Graphic Tools Integration

How to Include

JS files for these components aren't included in the lib package and should be taken:

either from Github https://github.com/webix-hub/components
or included from CDN as

<script src="https://cdn.webix.com/components/edge/ckeditor/ckeditor.js"></script>

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

Konva
Paper

To embed either tool 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 desired tool and load files required for it.

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

Setting Path to the Component

You can set path to sources of the necessary graphic tool on CDN. Actually, there are three ways to do that:

via the cdn property in the view configuration. This way allows setting path to the particular version of the necessary library or to the local CDN
not setting any paths at all. In this case either the official CDN of the component or the global cdnjs (if the source of the component is available there) will be used
by directly including all the source files of the component on a page. In this case you should set the cdn property to false to avoid possible collisions with the component version included by default.

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

Include the framework into your HTML page

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

Instantiate it as follows:

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).

Configuration

If you want to use Konva JS configuration, get the Konva object with the help of the getStage() method.

const konva = $$("konva1").getStage();

The method has the optional waitStage parameter. If it is set tu true, the method returns a promise, which allows you to wait till the tool is ready and then use its properties. For example:

$$("konva1").getStage(true).then(function(stage){
    //  stage is the Konva object
});

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 in an external file (src="URL"), or be inline. Read the details in the Paper.js documentation.

Include the library into your HTML page:

<!-- 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>

Create a tool instance as follows:

webix.ui({
    view:"paper", 
    canvas:"canvasB"
});

Full list of a Paper object properties can be found on their site.