如何在 HTML5 画布上计时拖放事件的长度？ (KineticJS)

Question

我正在尝试创建一个应用程序，其中要求用户拖动Kinetic.Image对象所需的时间长度（在本例中为 5 秒）； 这将用于确保他们在没有执行手头任务的情况下不会进入下一阶段。 我正在为我的应用程序使用 KineticJS。 这可以通过 dragstart、dragmove 和 dragend 事件处理程序的某种组合来实现吗？

Answer 1

 var count = 0;
 function Tick() {
     count++;
     window.setTimeout("Tick()", 1000);
 }

 myObject.on('dragstart', function(){
     Tick();
 });

 myObject.on('dragend', function(){
     return count;
 }

我不确定这是否是一个好方法，但是您可以使用 setTimeout 或 setInterval 来增加变量“计数”，然后在拖动完成时返回该变量。

如果你想要一个原生的 KineticJS 实现，你必须使用 Kinetic.Animation，因为它有一个内置的“frame.time”，它会为你计算毫秒，但如果你只想拖动事件，那就有点麻烦了。

Answer 2

我现在自己想出了一个解决方案，所以把它放在这里给任何可能感兴趣的人。 我相信，最简单的方法是在 dragstart 中获取时间戳并在 dragend 中执行相同的操作并执行差异。 用差值递增一个全局计数器变量，然后在 dragend 中检查该计数器是否超过所需的数量。

object1.on("dragstart", function() { lastTimestamp = Date.now(); });
object1.on("dragend", function() { timeTaken = Date.now() - lastTimestamp; });