Tool и создание инструментов

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

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

Создание нового инструмента осуществляется с помощью конструктора new Tool():

var myTool = new Tool();

Каждый экземпляр Tool обладает собственным набором событий и может быть активирован или деактивирован с помощью свойства active.

myTool.active = true; // делает инструмент активным

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

Основные события Tool

onMouseDown

Срабатывает при нажатии кнопки мыши на холсте. Аргументом функции является объект события event, содержащий координаты и другие параметры:

myTool.onMouseD own = function(event) {
    console.log('Клик в точке:', event.point);
};

Свойства объекта event:

  • point — объект Point с координатами клика;
  • count — количество последовательных кликов (удобно для обработки двойных кликов);
  • event.event — оригинальный DOM-событие.

onMouseDrag

Срабатывает при перемещении мыши с зажатой кнопкой. Позволяет отслеживать траектории и создавать интерактивные линии или фигуры:

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

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

  • event.delta — разница между предыдущей и текущей точкой;
  • event.middlePoint — средняя точка между предыдущей и текущей координатой, полезна для сглаживания траекторий.

onMouseMove

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

myTool.onMouseM ove = function(event) {
    var hitResult = project.hitTest(event.point);
    if(hitResult) {
        hitResult.item.fillColor = 'red';
    }
};

onMouseUp

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

myTool.onMous eUp = function(event) {
    console.log('Отпускание кнопки мыши в точке:', event.point);
};

Управление клавишами с помощью Tool

Tool позволяет обрабатывать события клавиатуры через методы onKeyDown и onKeyUp:

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

Свойства объекта event:

  • key — название нажатой клавиши;
  • character — символ, соответствующий клавише;
  • event.event — оригинальное DOM-событие.

Свойства и методы Tool

  • active — определяет, активен ли инструмент;
  • minDistance — минимальное расстояние в пикселях между событиями onMouseDrag (по умолчанию 0);
  • maxDistance — максимальное расстояние между событиями onMouseDrag, полезно для ускоренной обработки;
  • remove() — удаляет инструмент и отключает обработку событий.
myTool.minDistance = 5;
myTool.maxDistance = 50;
myTool.remove();

Примеры практического применения

1. Рисование свободной линии

var path;

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

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

2. Создание прямоугольников по клику и перетаскиванию

var rect;

myTool.onMouseD own = function(event) {
    rect = new Path.Rectangle({
        point: event.point,
        size: [0, 0],
        strokeColor: 'green'
    });
};

myTool.onMouseD rag = function(event) {
    rect.size = [event.point.x - rect.bounds.x, event.point.y - rect.bounds.y];
};

3. Интерактивная подсветка объектов

myTool.onMouseM ove = function(event) {
    project.activeLayer.children.forEach(function(item) {
        item.strokeColor = 'black';
    });
    var hitResult = project.hitTest(event.point);
    if(hitResult) {
        hitResult.item.strokeColor = 'red';
    }
};

Рекомендации по оптимизации

  • Для сложных проектов лучше создавать несколько инструментов с разными функциями и переключаться между ними через active.
  • Использование minDistance и maxDistance позволяет регулировать количество создаваемых объектов при перетаскивании и уменьшать нагрузку на рендеринг.
  • События клавиатуры можно комбинировать с мышиными для создания продвинутых интерактивных редакторов, например, для масштабирования, поворота или удаления объектов.

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

Оглавление