如何计算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来增加变量'count'，然后在拖动完成时返回该变量。

如果你想要一个原生的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; });