Кастомные инструменты рисования

Paper.js предоставляет мощный объект Tool, позволяющий создавать собственные инструменты для рисования, обработки событий мыши и клавиатуры. Кастомные инструменты особенно полезны для реализации интерактивных приложений, редакторов графики и анимаций.

Инициализация инструмента

Для начала создаётся новый объект Tool:

var myTool = new Tool();

Каждый инструмент может иметь свои обработчики событий, которые реагируют на действия пользователя:

  • onMouseDown(event) — срабатывает при нажатии кнопки мыши.
  • onMouseDrag(event) — срабатывает при перемещении мыши с зажатой кнопкой.
  • onMouseUp(event) — срабатывает при отпускании кнопки мыши.
  • onKeyDown(event) — срабатывает при нажатии клавиши на клавиатуре.
  • onKeyUp(event) — срабатывает при отпускании клавиши на клавиатуре.

Пример базового инструмента, рисующего линии при перетаскивании мыши:

var path;

myTool.onMouseD own = function(event) {
    path = new Path();
    path.strokeColor = 'black';
    path.add(event.point);
};

myTool.onMouseD rag = function(event) {
    path.add(event.point);
};

myTool.onMous eUp = function(event) {
    path.simplify();
};

Особенности:

  • event.point возвращает точку в координатах Paper.js.
  • Path автоматически создаёт новый объект кривой или линии.
  • Метод simplify() уменьшает количество сегментов без потери визуального качества.

Настройка инструментов с разными режимами

Инструменты могут иметь собственные состояния, позволяющие создавать многофункциональные кисти:

var toolMode = 'pen'; // или 'eraser'
var path;

myTool.onMouseD own = function(event) {
    if (toolMode === 'pen') {
        path = new Path();
        path.strokeColor = 'blue';
        path.add(event.point);
    } else if (toolMode === 'eraser') {
        var hitResult = project.hitTest(event.point, { fill: true, stroke: true });
        if (hitResult) hitResult.item.remove();
    }
};

myTool.onMouseD rag = function(event) {
    if (toolMode === 'pen') {
        path.add(event.point);
    }
};

Ключевые моменты:

  • project.hitTest(point, options) позволяет определить объект под курсором.
  • Инструменты могут переключаться динамически, управляя поведением мыши.

Кастомные кисти и динамическая визуализация

Можно создавать кисти, которые изменяют свой вид в зависимости от скорости движения мыши, давления или угла:

var brush = new Tool();
var path;

brush.onMouseD own = function(event) {
    path = new Path();
    path.strokeColor = 'red';
};

brush.onMouseD rag = function(event) {
    var speed = event.delta.length;
    path.strokeWidth = Math.min(speed, 10); // толщина зависит от скорости
    path.add(event.point);
};

Пояснение:

  • event.delta — вектор перемещения мыши с предыдущего события.
  • Изменение strokeWidth создаёт эффект динамичной линии, реагирующей на движение.

Комбинирование инструментов

В Paper.js можно иметь несколько инструментов одновременно, активируя нужный через activate():

var penTool = new Tool();
var eraserTool = new Tool();

penTool.onMouseD rag = function(event) {
    var path = new Path();
    path.strokeColor = 'green';
    path.add(event.point);
};

eraserTool.onMouseD rag = function(event) {
    var hitResult = project.hitTest(event.point, { fill: true, stroke: true });
    if (hitResult) hitResult.item.remove();
};

// активация нужного инструмента
penTool.activate();

Особенности:

  • Только активный инструмент получает события мыши и клавиатуры.
  • Инструменты могут хранить свои собственные состояния, не мешая другим.

Обработка клавиатуры в инструментах

Инструменты Paper.js позволяют реагировать на клавиши, расширяя функциональность:

var keyTool = new Tool();
var path;

keyTool.onKeyD own = function(event) {
    if (event.key === 'z') {
        project.activeLayer.removeChildren(); // очистка слоя
    }
};

keyTool.onMouseD own = function(event) {
    path = new Path.Circle({
        center: event.point,
        radius: 20,
        fillColor: 'orange'
    });
};

Важно:

  • event.key возвращает имя клавиши в виде строки.
  • Можно комбинировать мышь и клавиатуру для создания сложных интерактивных инструментов.

Расширенные возможности: инструменты для сложной графики

  1. Инструменты для рисования кривых Безье

    • Использование Segment и handleIn / handleOut для плавных кривых.

  2. Инструменты выделения и перемещения объектов

    • project.hitTest для выбора объектов.
    • item.position += event.delta для перетаскивания.

  3. Инструменты с визуальной подсказкой

    • Добавление временных Path или Raster объектов для отображения формы до фиксации.

Пример инструмента выделения и перемещения:

var moveTool = new Tool();
var selected;

moveTool.onMouseD own = function(event) {
    var hit = project.hitTest(event.point, { fill: true, stroke: true });
    if (hit) selected = hit.item;
};

moveTool.onMouseD rag = function(event) {
    if (selected) selected.position += event.delta;
};

moveTool.onMous eUp = function(event) {
    selected = null;
};

Итоговые принципы кастомных инструментов

  • Каждый инструмент — это отдельный объект Tool с собственными событиями.
  • Состояния и параметры (цвет, толщина, режим) хранятся внутри инструмента.
  • Можно использовать динамические свойства event.delta, event.point и event.count для интерактивного эффекта.
  • Несколько инструментов могут сосуществовать, но только активный обрабатывает события.
  • Интеграция с клавиатурой расширяет возможности интерактивности.

Эти возможности позволяют создавать в Paper.js практически любые интерактивные редакторы и визуальные эффекты, от простых кистей до сложных редакторов векторной графики.

Оглавление