Paper.js鼠标事件被工具所抑制

我正在使用Paper.js，我需要在光栅上的mouseup上做些事情。但是，当我使用全局工具空间时，事件似乎并未触发。Paper.js鼠标事件被工具所抑制

注意这个sketch，在点击和拖动产量日志是这样的：

光栅鼠标按下

光栅mousedrag

... [详细 “光栅mousedrag”] ...

栅格mousedrag

栅格mouseup

表示raster.on('mouseup' function() {...});按预期正确命中。

但是，在此sketch（其中包含用于显示拖动区域的功能）下，raster.on('mouseup' function() {...});未正确命中。请注意，日志不包含“光栅鼠标”，仅包含“栅格mousedown”和“栅格mousedrag”。

为什么在第二种情况下，mouseup不会在栅格上触发？我如何调整第二个草图中的代码以使其启动？

来源

2015-12-02 Scott H

我最终在github上打开了一个问题，因为我在玩这个时遇到了一个问题 - 如果使用view.on（'drag'，...），那么矩形的.removeOn函数不会被调用。纸张中的鼠标处理可能会使用一点检修。我通常只使用两种类型的处理程序 - 一个全局工具处理程序，如果需要的话，还可以根据需要使用path.removeOn（...）的特定处理程序。 – bmacnaughton

这将在paperjs中得到解决，但Júrg提供了一个干净的解决方法：将红色矩形设置为指导。在他的评论中看到草图：https://github.com/paperjs/paper.js/issues/842#issuecomment-166155595 – bmacnaughton

那么，简单的答案是，问题是on('mouseup', ...)处理程序永远不会被调用。纸质代码获取最近的点击，即您正在绘制的红色矩形，并检查是否响应'mouseup'事件。它没有。然后它检查父母链，红色矩形的父母是图层，所以它也不会通过.responds测试。因为栅格与栅格相关联的红色矩形处理程序从不被调用，所以栅格处于相同的级别。

最简单的答案是对view，而不是raster安装处理程序，通过使用全球工具，例如，

function onMouseUp(event) { 
    console.log('vup'); 
}

见paperjs代码（CanvasView.js）：

function callEvent(view, type, event, point, target, lastPoint) { 
    var item = target, 
     mouseEvent; 

    function call(obj) { 
     if (obj.responds(type)) { 
      if (!mouseEvent) { 
       mouseEvent = new MouseEvent(type, event, point, target, 
         lastPoint ? point.subtract(lastPoint) : null); 
      } 
      if (obj.emit(type, mouseEvent) && mouseEvent.isStopped) { 
       event.preventDefault(); 
       return true; 
      } 
     } 
    } 

    while (item) { 
     if (call(item)) 
      return true; 
     item = item.getParent(); 
    } 
    if (call(view)) 
     return true; 
    return false; 
}

来源

2015-12-03 22:26:52 bmacnaughton

Paper.js鼠标事件被工具所抑制

回答

相关问题