Состояние инструментов

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

Создание и активация инструментов

Инструмент создается с помощью конструктора new Tool():

var myTool = new Tool();

Активировать инструмент можно через метод:

myTool.activate();

Активный инструмент получает все события ввода, такие как движение мыши, нажатия и отпускания кнопок. Важно: в Paper.js одновременно может быть активен только один инструмент. При активации нового инструмента предыдущий автоматически деактивируется.

Основные свойства инструментов

  • tool.active — булево значение, определяющее, является ли инструмент активным.
  • tool.minDistance — минимальное расстояние (в пикселях) между событиями onMouseDrag. Полезно для снижения количества вызовов при быстрых перемещениях мыши.
  • tool.maxDistance — максимальное расстояние между событиями onMouseDrag. Используется для контроля интерполяции при рисовании.
  • tool.fixedDistance — если установлено, события onMouseDrag будут вызываться с постоянным шагом вне зависимости от реального движения мыши.

Пример настройки инструмента для рисования с шагом:

var drawTool = new Tool();
drawTool.minDistance = 5;
drawTool.maxDistance = 20;

Обработчики событий инструментов

Инструменты Paper.js используют систему событий, которая позволяет реагировать на действия пользователя. Основные обработчики:

onMouseDown

Срабатывает при нажатии кнопки мыши.

myTool.onMouseD own = function(event) {
    console.log('Нажата кнопка мыши в точке:', event.point);
};

onMouseDrag

Срабатывает при перетаскивании мыши с зажатой кнопкой. Доступны такие свойства события, как:

  • event.point — текущая позиция мыши.
  • event.delta — вектор движения мыши с предыдущего события.
  • event.lastPoint — предыдущая позиция мыши.

Пример рисования линии:

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);
};

onMouseUp

Срабатывает при отпускании кнопки мыши. Используется для завершения операций, например:

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

onMouseMove

Реагирует на движение мыши без зажатых кнопок. Полезно для интерактивных эффектов, например, изменения курсора или предварительного просмотра:

myTool.onMouseM ove = function(event) {
    console.log('Курсор на:', event.point);
};

onKeyDown и onKeyUp

Позволяют реагировать на клавиатурные события. event.key содержит символ нажатой клавиши.

myTool.onKeyD own = function(event) {
    if (event.key === 'delete') {
        project.activeLayer.removeChildren();
    }
};

Состояние инструментов и переключение между ними

Paper.js позволяет хранить несколько инструментов и переключаться между ними динамически. Например, для реализации разных режимов рисования:

var drawTool = new Tool();
var eraseTool = new Tool();

drawTool.onMouseD rag = function(event) { /* рисование */ };
eraseTool.onMouseD rag = function(event) { /* стирание */ };

function switchTool(toolName) {
    if (toolName === 'draw') drawTool.activate();
    else if (toolName === 'erase') eraseTool.activate();
}

Состояние инструмента сохраняется, поэтому при возврате к нему все настройки (minDistance, maxDistance) и обработчики остаются в силе.

Пользовательские свойства и хранение состояния

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

var lineTool = new Tool();
lineTool.currentPath = null;

lineTool.onMouseD own = function(event) {
    this.currentPath = new Path();
    this.currentPath.strokeColor = 'blue';
    this.currentPath.add(event.point);
};

lineTool.onMouseD rag = function(event) {
    this.currentPath.add(event.point);
};

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

Примечания по производительности

  • События onMouseDrag могут вызываться очень часто при быстром движении мыши. Настройка minDistance и maxDistance помогает снизить нагрузку.
  • Для сложных интерактивных сцен лучше разделять инструменты по типу действий (рисование, выделение, стирание), чтобы избежать конфликтов событий.
  • Деактивация инструмента (tool.active = false) полностью отключает обработку всех событий и экономит ресурсы.

Совместимость с Paper.js проектом

Инструменты работают только внутри контекста PaperScope, что позволяет использовать несколько независимых проектов на одной странице:

var scope1 = new PaperScope();
scope1.setup('canvas1');

var scope2 = new PaperScope();
scope2.setup('canvas2');

var tool1 = new scope1.Tool();
var tool2 = new scope2.Tool();

Каждый инструмент будет реагировать только на события в своем scope и не будет конфликтовать с другими.

Использование инструментов в Paper.js обеспечивает гибкое управление интерактивными действиями, возможность хранения состояния между событиями и поддержку сложных сценариев с множеством режимов взаимодействия. Применение Tool позволяет создавать как простые кисти для рисования, так и полноценные редакторы с различными инструментами и клавиатурными комбинациями.

Оглавление