如何在HTML5 Canvas上时间将拖放事件的长度长？（kineticjs）答案

【问题标题】：How can I time the length of a drag/drop event on a HTML5 canvas? (KineticJS)如何在HTML5 Canvas上时间将拖放事件的长度长？（kineticjs）
【发布时间】：2012-12-09 23:35:25
【问题描述】：

我正在尝试创建一个应用程序，其中要求用户将 Kinetic.Image 对象拖动一段必要的时间（在本例中为 5 秒）；这将用于确保他们在未完成手头任务的情况下不会进入下一阶段。我正在为我的应用程序使用 KineticJS。这可能与 dragstart、dragmove 和 dragend 事件处理程序的某种组合吗？

【问题讨论】：

标签： javascript timer html5-canvas kineticjs

【解决方案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”，它会为你计算毫秒，但如果你只想拖动事件，那就有点麻烦了。

【讨论】：

感谢您的帖子——我自己现在已经想出了一个可行的解决方案，但由于我的声誉得分较低（有一段时间出于某种原因回答您自己的问题的限制！）干杯。

【解决方案2】：

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

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

【讨论】：