javascript - KineticJS:降低拖动事件的敏感性

Question

背景:我正在尝试构建一个应用程序，用户可以通过同时单击两个动力学形状来执行操作，但也可以在 Canvas 上拖动各个形状自由地。我意识到 KineticJS 还不支持多点触控，但在解决该问题之前我遇到了另一个问题。

问题: 我正在使用的触摸屏(Planar 27"Helium，在 Windows 8 的 Chrome 上)似乎很难很好地解决触摸事件。这意味着在 Kinetic 中“单击”(并按住)一个形状会触发拖动事件，而不是单个事件。单击或点击事件。发生这种情况时，我可以明显地看到形状在手指下方的几个像素处跳跃，这告诉我触摸事件正在移动位置，即使手指停留在同一个位置。

我想要什么: 一种调整拖动事件灵敏度的方法，以便仅当距当前形状位置的距离达到一定像素数时才触发它们。理想情况下，将触发 click 事件，然后在达到某个阈值后启动 Dragstart。我假设停止拖动事件最初触发也意味着当我按住按钮时，形状将停止在我的手指下稍微移动。

我对 KineticJS 源代码进行了窥探，但我似乎看不出应该在哪里实现这样的代码。

<小时/>

解决了!请参阅下面我的解决方案。

Answer 1

通过在 KineticJS 项目最近的提交中引入 dragDistance 属性( https://github.com/ericdrowell/KineticJS/commit/0b93e21e0b9e11165dfed7574dbafa0ae2a144e0 ，或参阅 https://github.com/ericdrowell/KineticJS/pull/725 获取拉取请求)，这个问题得到了解决

要使用该功能，只需将触发之前拖动必须超过的值(以像素为单位)分配给形状或组的 DragDistance 属性即可。低于此阈值的 touchStart 事件将不会触发 dragStart，这意味着 tap 事件现在在触摸场景中更加有用。

var rect = new Kinetic.Rect({
    draggable: true,
    dragDistance: 5
});