Integration with Graphic Tools

JS files for these components aren't included in the lib package and should be taken from https://github.com/webix-hub/components

Webix library supports integration of popular graphic tools in the application with the help of its own components. For now, the following graphic tools can be included:

To embed any of the tools into your web page, you should link not only to Webix, but also to a special JavaScript file from the components folder. This file will connect you to the chosen editor as well load extra required files for it.

Note that in documentation samples files are linked in another way, but in your apps you should follow the patterns described below.

Konva JS

You can download JS file for the Konva JS tool from github.

Konva is an HTML5 Canvas JavaScript framework that extends the 2D context by enabling canvas interactivity for desktop and mobile applications.

Learn more about Konva.js library

Related sample: Konva JS graphic tool

Component Initialization

Link to the library

<script type="text/javascript" src="./konva.js"></script>

JS code

//path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    view:"konva", 
    ready:function(){...};
});
  • ready - function that is executed when the component is fully loaded. It contains the necessary shapes and layers configuration (available on their site).

Paper JS

You can download JS file for the Paper JS tool from github.

Paper.js is an open source vector graphics scripting framework that runs on top of the HTML5 Canvas.

Learn more about Paper.js library

Related sample: Paper JS graphic tool

Component Initialization

Besides the library itself, you need to link a js file with necessary PaperScript and associate it with a related canvas specified by the canvas property.

PaperScript code is loaded using the < script > tag and the type being set to "text/paperscript". The code can either be an external file (src="URL"), or inlined. Read the details in the Paper.js documentation.

Link to the library

<!-- Load the Paper.js library -->
<script type="text/javascript" src="./paper.js"></script>
<!-- Load external PaperScript and associate it with canvasB -->
<script type="text/paperscript" src="./paperballs.js" canvas="canvasB"></script>

JS code

//path from which extra libraries are autoloaded
webix.codebase = "./";
 
webix.ui({
    view:"paper", 
    canvas:"canvasB"
});
  • Full list of a Paper object properties can be found on their site.
Back to top