javascript - Paper JS 的编程点击事件

Question

我正在尝试启动普通 JavaScript MouseEvent Paper JS 将收到.我有一个 HTML Canvas 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 鼠标事件。

Here是我在 Paper Sketch 中的尝试。我希望在运行它时进行日志记录。

我如何触发 Paper JS 将接收的普通 JS 鼠标事件？

Answer 1

我想有几件事会阻止您的示例工作:

• Paper.js 有自己的 MouseEvent 类，当在 PaperScript 上下文中使用时(例如在 sketch. paperjs.org) 所以你应该直接在 JavaScript 中工作。
• Paper.js 点击检测依赖于触发多个事件(mousedown 然后 mouseup 并进行一些时间和距离检查)所以你应该使用更简单的事件(例如 mousedown)。

对您来说最简单的方法是尝试从工作示例中拒绝您的具体案例。
这是一个fiddle给你一个起点。

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