Question

请注意这两个草图，one具有预期和期望的行为，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

区别在于宣布＆＃34;全球＆＃34;函数onMouseDrag导致纸张创建Tool，并且无论正常处理程序链是否请求传播停止，都会在处理结束时调用工具事件。（我说＆＃34;全球＆＃34;因为当纸张执行纸质脚本时，它将您的代码包装在具有自己范围的函数中。然后将这些＆＃34;全局＆＃34;函数传递回来自返回的对象中的纸张那个功能。）如果有任何＆＃34;全球＆＃34;函数被声明为纸张，然后创建一个处理它们的工具。无论处理程序是否终止处理，都会在事件处理结束时调用该工具。

以下代码是论文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()处理程序）由onMouseDrag调用，而工具是通过定义＆＃34; global＆＃34;而隐式创建的。无论view._handleEvent处理的结果如何，都会调用onMouseDrag。

只有在您使用自己的稿件并声明其中一个全局函数时才会出现此问题，例如#footer { position: fixed; width: 100%; clear: both; bottom: 0; padding: 0; margin: 0; height: 30px; background: #333; }。

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

1 个答案: