如何計算HTML5畫布上拖放事件的長度？ （KineticJS）

Question

我正在嘗試創建一個應用程序，其中用戶需要將對象拖動一個必需的時間長度（本例中爲5秒）;這將被用來確保他們不會在沒有完成任務的情況下進入下一個階段。我正在爲我的應用程序使用KineticJS。這可能與dragstart，dragmove和dragend事件處理程序的某些組合有關嗎？

Answer 1

我現在已經想出了一個解決方案，所以把它放在這裏給任何可能感興趣的人。我相信最簡單的方法是在dragstart中添加時間戳，然後在dragend中執行相同的操作並執行diff。用差異增加一個全局計數器變量，然後檢查dragend，看看該計數器是否超過了所需的數量。

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

Answer 2

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'，它會爲你計算幾毫秒，但如果你只想拖動事件有點麻煩。