使用javascript存儲用戶的繪圖

Question

我需要存儲用戶繪製的路徑以及任何給定點的速度。基本上記錄一條線是如何繪製的。之後，我必須能夠操作/編輯繪圖（路徑和速度）。

像這樣的事情，但也與轉速/速度信息：

http://paperjs.org/examples/path-simplification

我不知道我應該如何存儲速度是多少？比存儲指針位置有更好的方法，例如每秒10次？

Answer 1

你可以將其存儲在自己的定製對象。讓事件偵聽器監聽到每個mousemove事件它被點擊之後：

var pointArray = []; 

onMouseMove(event){ 
    var pointData = { 
     x: event.screenX, 
     y: event.screenY, 
     time: Date.now() 
    } 

    pointArray.push(pointData); 
} 

現在你有一個長pointArray充滿位置&時間的信息！順便說一下，每秒存儲數據10次沒有意義，因爲如果鼠標不移動，只會獲得冗餘信息。最好只聽mousemove。

Answer 2

任何行可以表示爲個點的數目。如果您存儲每個點的時間戳，則可以推斷該線上任意兩點之間的平均速度。

Paper.js上面鏈接的是一個有趣的JS代表路徑的例子。我建議研究現有的庫來創建和表示Javascript中的路徑。從長遠來看，與爲自己的圖書館寫入功能相比，它會節省您的時間。

這是一個相關的堆棧溢出答案有關Javascript繪圖庫的差異。

• Javascript Drawing Library