Событие программного нажатия для Paper JS - PullRequest
Новая
       30

Событие программного нажатия для Paper JS

0 голосов
/ 26 февраля 2019

Я пытаюсь запустить ванильный код JavaScript MouseEvent, который будет получен Paper JS .У меня есть холст HTML drawing-canvas, который был paper.setup.Вот моя текущая попытка: 

const drawingCanvas = document.getElementById('drawing-canvas');
drawingCanvas.dispatchEvent(new MouseEvent('click', {
    buttons: 1,
    clientX: 1153,
    clientY: 550,
    screenX: 1153,
    screenY: 621,
}));

Запуск этого с консоли не вызывает мои Layer события мыши.

Здесь - моя попытка сделать это на бумагеЭскиз.Я ожидаю, что запись будет происходить при запуске.

Как вызвать событие мыши Vanilla JS, которое получит Paper JS?

1 Ответ

0 голосов
/ 03 марта 2019

Я думаю, что есть несколько вещей, которые мешают вашему примеру работать:

  • Paper.js имеет свой собственный класс MouseEvent, который может конфликтовать с собственным классом при использовании в PaperScriptконтекст (например, в sketch.paperjs.org), поэтому вы должны работать в JavaScript напрямую.
  • Paper.js обнаружение щелчков зависит от нескольких событий (mousedown, затем mouseup с некоторой проверкой времени и расстояния).) поэтому вам следует использовать более простое событие (например, mousedown).

Самое простое для вас - попытаться отклонить конкретный случай от рабочего примера.
Вот скрипка дает вам начальную точку. 

// Setup Paper.js.
paper.setup('canvas');

// Create an orange rectangle covering all the canvas.
new paper.Path.Rectangle({
    rectangle: paper.view.bounds,
    fillColor: 'orange',
    // On mousedown on this rectangle...
    onMouseDown: function(event) {
        // ...draw a blue circle at event point.
        new paper.Path.Circle({
            center: event.point,
            radius: 30,
            fillColor: 'blue'
        });
    }
});

// On button click...
document.getElementById('button').addEventListener('click', function() {
    // ...trigger a fake mousedown event at point 100,100.
    document.getElementById('canvas').dispatchEvent(new MouseEvent('mousedown', {
        clientX: 100,
        clientY: 100
    }));
});
...