Paper.js 图层事件与工具事件 - 不同的行为

Question

注意这两个草图，one which has the expected and desired behavior, and one没有。当您打开这些草图时，您会看到一张带有一些文字的图像。文本可拖动到新位置。在重新定位期间图像应保持静止。第一个草图是，第二个不是。

两个草图的代码差异在于第一个草图的事件是在活动层上建立的：

project.activeLayer.onMouseDrag = function(event) {
    view.center = changeCenter(paper.view.center, event.delta.x, event.delta.y, 0.7);
}

在第二个中，它建立在我理解的全局 paper.tool:

function onMouseDrag(event) {
    view.center = changeCenter(paper.view.center, event.delta.x, event.delta.y, 0.7);
}

在我看来这无关紧要，因为在 text mousedrag 侦听器中我正在停止传播事件：

event.stopPropagation();

但是，这似乎只在第一个草图中生效，而不是在第二个草图中生效。为什么会这样？

Answer 1

不同之处在于，声明 "global" 函数 onMouseDrag 会导致纸张创建 Tool 并且无论正常处理程序是否在处理结束时都会调用工具事件链请求停止传播。（我说 "global" 是因为当 paper 执行 paper 脚本时，它会将您的代码包装在一个具有自己范围的函数中。然后它将那些 "global" 函数传递回从该函数返回的对象中的 paper。）如果有的话"global" 函数被声明为纸，然后创建一个处理它们的工具。无论您的处理程序是否终止处理，该工具都会在事件处理结束时被调用。

以下代码是论文View.js模块中的相关代码：

function handleMouseMove(view, point, event) {
    view._handleEvent('mousemove', point, event);
    var tool = view._scope.tool;
    if (tool) {
        tool._handleEvent(dragging && tool.responds('mousedrag')
                ? 'mousedrag' : 'mousemove', point, event);
    }
    view.update();
    return tool;
}

项目的处理程序（您的 PointText 处理程序）正在被 view._handleEvent() 调用，而通过定义 "global" onMouseDrag 隐式创建的工具被调用，无论view._handleEvent 处理的结果。

仅当您使用 paperscript 并声明其中一个全局函数时才会出现此问题，例如 onMouseDrag。

Paper.js 图层事件与工具事件 - 不同的行为

Paper.js Layer Event versus Tool Event - Different Behavior

javascript

events

dom-events

paperjs