如何在Paper.JS中手动调度事件

How to dispatch an event manually in Paper.JS?

本文关键字：调度 事件 JS Paper      更新时间：2023-09-26

我试图实现的是在画布上克隆一个项目，然后在不释放鼠标的情况下拖动克隆。

             menuItem.onMouseDown = function(event){
                var clone = this.clone();
                clone.onMouseDrag = function(event){
                    this.position+=event.delta;
                    console.log(event);
                }
                var ev = new MouseEvent('mousedrag',
                            event.event);
                ev.event.type="mousemove";
                ev.delta={x:0,y:0};
                ev.target=clone;
                ev.point=event.point;
                clone.emit('mousedrag',ev);
            };

我试过了，我相信我需要这样的东西。因此，当我单击menuItem时，我会克隆它，并为克隆设置事件，然后在它上设置emit事件。但发出的事件需要设置，这就是我的想法失败的地方。对这个有什么想法吗？

我会做一些不同的事情；我不会试图在选择/拖动过程中交换处理程序，而是暂时在逻辑上交换项目：

menuItem = new Path.Circle(view.bounds.center, 25);
menuItem.fillColor = 'red';
var oldMenuItem = null;
menuItem.onMouseDown = function(e) {
    oldMenuItem = this.clone();
    oldMenuItem.fillColor = 'green';
}
menuItem.onMouseDrag = function(e) {
    this.position += e.delta;
}
menuItem.onMouseUp = function(e) {
    // swap menuItem and oldMenuItem to keep mouse handling on the
    // original item?
    var t = this.position;
    this.position = oldMenuItem.position;
    oldMenuItem.position = t;
}

这是一个草图，它实现了（我认为）与你想要的类似的东西。只要假装红色圆圈是菜单项。

可以构造ToolEvent或MouseEvent（取决于处理程序），但目前尚未记录，需要访问github上的源代码。编辑：我很好奇，去了github。

MouseEvent构造函数代码在events目录中，但使用了构造函数，并且从CanvasView.js模块调用了.emit函数（搜索new MouseEvent）。但是，为了模拟您想要的内容，您需要模拟整个事件链，以保持内部状态的一致性。因此，您需要1）在原始项上发出mouseup事件，2）在新项上发出mousedown，3）在新项目上发出mousemoves，3）将处理程序从原始项分离，并在1&2.（如果之前分离处理程序，则可能不需要发出原始mouseup。）如果创建了Tool，则需要创建ToolEvent而不是MouseEvent。

不管怎样，我明白为什么它没有被记录下来——有很多事情需要记住。我想更新这个答案以反映你最初的问题，尽管答案仍然是最好找到另一种方法来执行这个操作。

如果有人真的想或需要这样做：

  1. 鼠标事件是通过MouseEvent.js中的代码构建的
  2. 在CanvasView.js中使用构造函数并发出事件
  3. 事件处理在View.js中驱动
  4. 工具事件是通过ToolEvent.js中的代码构建的

OTOH，发射帧事件很容易：

view.emit('frame', {});
相关文章：