onMouseDrag

Событие onMouseDrag является ключевым инструментом для реализации интерактивного поведения объектов при перетаскивании мышью. Оно вызывается каждый раз, когда пользователь удерживает кнопку мыши и перемещает курсор по канвасу. В Paper.js это обработчик, который можно назначить как на весь проект, так и на отдельные объекты Path, Shape или Item.

Синтаксис и параметры

function onMouseDrag(event) {
    // код обработки события
}

Параметры объекта event:

  • event.point — объект Point, представляющий текущую позицию курсора.
  • event.delta — смещение курсора относительно предыдущего события onMouseDrag.
  • event.downPoint — точка, где началось удержание кнопки мыши.
  • event.middlePoint — средняя точка между предыдущей и текущей позицией курсора.
  • event.item — объект, на котором произошло событие (если обработчик привязан к элементу, а не к проекту).

Назначение обработчика

Обработчик onMouseDrag можно назначить двумя способами:

  1. На уровне проекта:
paper.view.onMouseD rag = function(event) {
    console.log(event.point);
};
  1. На уровне объекта:
var circle = new Path.Circle({
    center: [50, 50],
    radius: 30,
    fillColor: 'red'
});

circle.onMouseD rag = function(event) {
    this.position += event.delta;
};

В последнем примере круг будет следовать за курсором при перетаскивании. Ключевым моментом является использование свойства event.delta для смещения позиции объекта.

Использование event.delta и event.point

event.delta позволяет плавно перемещать объекты, независимо от скорости движения мыши, так как это значение всегда отражает разницу между текущей и предыдущей позицией курсора. В отличие от event.point, которое содержит абсолютную позицию, delta удобен для вычислений смещений:

path.onMouseD rag = function(event) {
    this.position.x += event.delta.x;
    this.position.y += event.delta.y;
};

Использование event.point удобно для рисования линий или траекторий движения:

var path = new Path();
path.strokeColor = 'black';

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

В этом случае создаётся динамическая линия, которая обновляется в реальном времени при движении мыши.

Совмещение с другими событиями

onMouseDrag часто комбинируют с onMouseDown и onMouseUp для более сложной интерактивности. Например, можно отслеживать, где началось перетаскивание, и ограничивать движение объекта в пределах канваса:

var rectangle = new Path.Rectangle({
    point: [100, 100],
    size: [80, 50],
    fillColor: 'blue'
});

rectangle.onMouseD own = function(event) {
    this.data.startPosition = this.position.clone();
};

rectangle.onMouseD rag = function(event) {
    var newPosition = this.data.startPosition + event.delta;
    if (newPosition.x > 50 && newPosition.x < 300) {
        this.position = newPosition;
    }
};

Здесь data.startPosition сохраняет исходную позицию объекта, а проверка координаты X ограничивает его движение.

Важные особенности

  • Привязка к объекту — при назначении обработчика объект получает доступ к this, что позволяет изменять его свойства напрямую.
  • Производительность — события onMouseDrag могут вызываться очень часто, поэтому все вычисления внутри обработчика должны быть оптимизированы.
  • Наследование — если объект вложен в группу, события могут быть перехвачены на уровне группы, что удобно для организации сложных иерархий элементов.

Примеры продвинутых эффектов

  1. Перетаскивание с инерцией:
var velocity = new Point();
circle.onMouseD rag = function(event) {
    this.position += event.delta;
    velocity = event.delta;
};

view.onFr ame = function(event) {
    circle.position += velocity;
    velocity *= 0.9; // имитация трения
};
  1. Создание рисующего пера:
var tool = new Tool();
tool.onMouseD rag = function(event) {
    var path = new Path();
    path.strokeColor = 'green';
    path.add(event.middlePoint);
};

В этом случае линии плавно следуют за курсором, создавая эффект «рисования в реальном времени».

Использование onMouseDrag является фундаментальным для интерактивных приложений на Paper.js, позволяя создавать перетаскиваемые объекты, динамическое рисование, анимации с пользовательским управлением и сложные интерфейсы с обработкой координат и смещений. Правильное понимание event.delta, event.point и привязки обработчика к объектам открывает широкие возможности для визуальных и интерактивных эффектов.

Оглавление