如何在Paper.JS中手动分派事件？

我想要实现的是在画布上克隆一个项目，然后单击它并拖动克隆而不释放鼠标。如何在Paper.JS中手动分派事件？

   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。但是排出的事件需要设置，这就是我的想法分崩离析的地方。对此有任何想法？

来源

2015-12-31 godzsa

我会做的事情有点不同;我不会试图交换处理在选择/拖动中间，但也只是暂时逻辑交换物品：

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

这里有一个sketch实现类似的东西（我觉得）你在找什么对于。只要假装红色圆圈就是菜单项。

可以构建一个ToolEvent或MouseEvent（取决于处理程序），但目前没有记录，并需要在github上访问源代码。编辑：我很好奇，并去了github之旅。

的MouseEvent构造函数代码在活动目录中，而是用于构造和.emit功能从CanvasView.js模块（搜索new MouseEvent）调用。但为了模拟你想要的东西，你需要模拟整个事件链，以保持内部状态的一致性。所以你需要1）在原始项目上发出mouseup事件，2）在新项目上发出mousedown，3）在新项目上发出鼠标移动，3）将处理程序从原始项目中分离出来并附加1 & 2.（如果您之前分离处理程序，则可能不需要发出原始的mouseup。）如果您创建了Tool，则需要创建ToolEvent而不是MouseEvent。

无论如何，我可以看到为什么它没有记录 - 有很多要记住。我想更新此答案以反映您的原始问题，即使答案仍然是最好找到另一种方式来执行此操作。

如果有人真的想要或需要做到这一点：

鼠标事件通过代码构建了MouseEvent.js
构造被使用，并且该事件发出，在CanvasView.js
事件处理驱动在View.js
工具事件通过代码构造ToolEvent.js

OTOH，散发出帧事件很简单：

view.emit('frame', {});

来源

2015-12-31 01:36:08 bmacnaughton

这似乎解决我的问题，但感谢的线索，我会看看ToolEvent在github – godzsa

所以，你在做什么，不拖克隆，但拖动原来的克隆并放置它的位置？ – Aron

是的，然后用鼠标将它们交换回来。如果我从头开始编码，我会使用'view.on（'mousedown'，...）'和mousedrag，mouseup来避免重叠另一个的情况等。我不需要切换处理程序，因为事件是整个视图。但是我需要在鼠标上做我自己的测试 - 除非有大量的menuItem，否则不是什么大问题。 – bmacnaughton

如何在Paper.JS中手动分派事件？

回答

相关问题