时间戳

首页 > 解决方案 > Paper JS 的程序化点击事件

javascript - Paper JS 的程序化点击事件

问题描述

我正在尝试触发MouseEvent将由Paper JS接收的香草 JavaScript 。我有一个 HTMLdrawing-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鼠标事件。

这是我在 Paper Sketch 中的尝试。我希望在运行它时会发生日志记录。

如何触发 Paper JS 将收到的 vanilla JS 鼠标事件？

标签： javascriptmouseeventdom-eventspaperjs

解决方案

我想有几件事会阻止您的示例正常工作：

  • Paper.js有自己的类，当在上下文中使用时（例如在sketch.paperjs.org 中）MouseEvent，可能与本地类冲突，因此您应该直接使用。PaperScriptJavaScript
  • 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
    }));
});

推荐阅读