Kinetic.js 不会失去对鼠标的控制答案

【问题标题】：Kinetic.js don't lose grip on mouse outKinetic.js 不会失去对鼠标的控制
【发布时间】：2012-12-01 00:19:22
【问题描述】：

当您拖动对象并且鼠标离开渲染区域时，拖动停止（触发事件）并且用户失去抓握。

考虑到所有其他技术（Flash、原始 HTML5 Canvas 等）即使鼠标不在，也可以保存抓地力，这非常不方便。

有没有办法解决这个问题？

更新：到目前为止，通过更改库文件并将侦听器绑定到文档而不是容器来解决问题。我知道入侵库文件很糟糕，但是在检查了库的源代码后，我还没有找到解决办法。

【问题讨论】：

标签： html html5-canvas kineticjs

【解决方案1】：

您可以检查该元素是否在视线之外，如果是，则将其带回来：

shape.on('dragend', function() {
 var pos = shape.getPosition();
 var layer = pos.getLayer();
 if (pos.y < 0) {
  pos.y = 0;
 }
 var maxY = layer.getHeight() - shape.getHeight();
 if (pos.y > maxY) {
  pos.y = maxY
 }
 shape.setPosition(pos);
}

【讨论】：

【解决方案2】：

看看element.setCapture()。您可以从鼠标事件的事件处理程序中调用它，例如。 mousedown:

function mouseDown(e) {
    e.target.setCapture();
    e.target.addEventListener("mousemove", mouseMoved, false);
}

虽然浏览器支持有点参差不齐（IE 和 Firefox 支持它，不确定其他浏览器），但对于跨浏览器使用，您将不得不退回到您已经遇到的文档方法上的绑定。

【讨论】：

非常感谢您的建议。无论如何，我可以从中学习以备将来使用！