javascript - 如何计算 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; });