Интеграция графических инструментов

Как добавить

Файлы JS для этих компонентов не включены в пакет библиотеки и могут быть взяты из:

Github https://github.com/webix-hub/components
или CDN

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

Библиотека Webix поддерживает интеграцию с популярными графическими инструментами с помощью собственных компонентов. На данный момент вы можете добавить следующие графические инструменты:

Konva
Paper

Чтобы встроить любой из инструментов на вашу веб-страницу, вы должны сослаться не только на Webix, но и на специальный файл JavaScript из папки с компонентами. Этот файл подключится к выбранному инструменту и загрузит дополнительные файлы к нему.

Обратите внимание, в примерах документации файлы связаны по-другому, в своем приложении используйте описанную ниже схему.

Задать путь к компоненту

Вы можете задать путь к источнику нужного инструмента на CDN. Существуют три способа сделать это:

с помощью свойства cdn в конфигурации компонента. Этот способ позволяет задать путь к конкретной версии нужной библиотеки или локальному CDN
не задавая путь вообще. В этом случае будет использован официальный CDN компонента или глобальный cdnjs (если источник компонента там присутствует)
напрямую включив все файлы на страницу компонента. В этом случае необходимо задать значение false свойству cdn, чтобы избежать возможных конфликтов с версией компонента, включенной по умолчанию.

Konva JS

Вы можете скачать файл JS для Konva из github.

Konva это JavaScript-фреймворк, который позволяет работать c canvas 2d в объектном стиле с поддержкой событий. Konva добавляет интерактивность canvas для десктопных и мобильных приложений.

Подробнее о библиотеке Konva.js

Related sample: Konva JS graphic tool

Инициализация

Подключите фреймворк в HTML файле:

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

Создайте экземпляр следующим образом:

webix.ui({
    view:"konva", 
    ready:function(){...};
});

ready - функция, которая выполнятся когда компонент полностью загружен. Сожержит необходимую конфигурацию слоев и форм. (подробное описание доступно на сайте Konva).

Настройка

Если вы хотите использовать конфигурацию Konva JS, получите объект Konva с помощью метода getStage():

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

У метода есть необязательный параметр waitStage. Если для него установлено true, метод вернет промис, который позволит подождать готовности инструмента, после чего использовать его свойства, например:

$$("konva1").getStage(true).then(function(stage){
    //  stage - это объект Konva
});

Paper JS

Вы можете скачать файл JS для Paper из github.

Paper.js - это библиотека векторной графики с открытым исходным кодом, которая работает поверх HTML5 Canvas.

Подробнее о библиотеке Paper.js

Related sample: Paper JS graphic tool

Инициализация

Кроме самой библиотеки, вам необходимо сослаться на js файл с необходимым PaperScript и связать его с соответствующим canvas при помощи свойства canvas.

Код PaperScript загружается с использованием тега < script > tag и типом установленным как "text/paperscript". Код может быть внешним файлом (src="URL"), или на клиенте. Подробнее в документации Paper.js.

Подключите фреймворк в HTML файле:

<!-- Загрузите библиотеку Paper.js -->
<script type="text/javascript" src="./paper.js"></script>
<!-- Загрузите внешний PaperScript и свяжите его с canvasB -->
<script type="text/paperscript" src="./paperballs.js" canvas="canvasB"></script>

Создайте экземпляр следующим образом:

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

Полный список свойств объекта Paper можно найти на официальном сайте.

Наверх