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

时间:2015-12-31 00:24:43

标签: javascript paperjs

我想要实现的是当我点击它并在不释放鼠标的情况下拖动克隆时在画布上克隆一个项目。

             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上的事件。但是需要建立发生的事件,这就是我的想法崩溃的地方。对这个有什么想法吗?

1 个答案:

答案 0 :(得分:2)

我会做的事情有点不同;我不会尝试在选择/拖动过程中交换处理程序,但只是暂时逻辑交换项目:

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构造函数代码位于events目录中,但使用了构造函数,并从CanvasView.js模块调用.emit函数(搜索new MouseEvent)。但是为了模拟你想要的东西,我需要模拟整个事件链,以保持内部状态的一致性。所以你需要1)在原始项目上发出mouseup事件,2)在新项目上发出mousedown,3)在新项目上发出mousemoves,3)从原始项目中分离处理程序将处理程序附加到1&之间的新项目中。 2.(如果您之前分离处理程序,则可能不需要发出原始鼠标。)如果您已创建Tool,则需要创建ToolEvent而不是{{1} }}

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

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

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

    OTOH,发出框架事件很容易:

    MouseEvent