在JavaScript中存儲鼠標移動數據的最有效處理方式是什么？

Question

我正在嘗試准確記錄鼠標在網頁上移動的位置（到達像素）。 我有以下代碼，但結果數據之間存在差距。

var mouse = new Array();
$("html").mousemove(function(e){
    mouse.push(e.pageX + "," + e.pageY);
});

但是，當我查看記錄的數據時，這是我所看到的一個示例。

76,2 //start x,y
78,5 //moved right two pixels, down three pixels
78,8 //moved down three pixels

最好看起來像這樣：

76,2 //start x,y
77,3 //missing
78,4 //missing
78,5 //moved right two pixels, down three pixels
78,6 //missing
78,7 //missing
78,8 //moved down three pixels

有沒有更好的方法來存儲逐像素鼠標移動數據？ 我的目標對於網頁而言是否太不切實際？

Answer 1

您只能按照給定的速度保存該信息。 mousemove事件以瀏覽器確定的速率觸發，通常以60hz最高。 由於您可以將指針移動的速度絕對快於60px /秒，因此除非進行某種插值，否則您將無法填充空白。

對我來說，這聽起來像是個好主意，想象一下，當您將鼠標跳到屏幕的另一側時，一次觸發1920次mousemove事件的麻煩（和性能降低）-我什至不認為鼠標本身會快速輪詢足夠，游戲鼠標的速度不會超過1000hz。

在此處查看實時幀率測試： http : //jsbin.com/ucevar/

在插值，看到了這個問題 ，它實現了Bresenham直線算法 ，你可以用它來尋找失蹤的點。 這是一個很難解決的問題，iPad的PenUltimate應用程序實現了一些驚人的插值，使線條圖看起來完全自然流暢，但是在網絡上卻一無所有。

至於存儲數據，只需壓入[x,y]數組而不是字符串即可。 緩慢的事件處理程序功能也會減慢刷新速度，因為事件會在落后時被丟棄。

Answer 2

移動鼠標時，並不是每個像素處都有鼠標。 在更新周期中，它實際上以平滑的方式從一個點跳到另一個點，因此在眼睛看來，它碰到了中間的每個點，而實際上卻只是在故意地跳過而已。

我建議僅存儲注冊鼠標移動事件的點。 兩點之間的每個間隔都會創建一條線，該線可用於您需要的任何位置。

_{而且，就處理效率而言...}

處理效率將取決於許多因素。 使用什么瀏覽器，計算機有多少內存，針對數據結構優化代碼的程度等。

與其過早地優化，不如編寫程序，然后對較慢的部分進行基准測試，以找出瓶頸所在。

1. 我可能會在原型上創建帶有一堆函數的自定義Point對象，並查看其性能
2. 如果停滯不前，我將改用設置x和y對象文字。
3. 如果停滯不前，我切換到使用兩個陣列，一個用於x ，一個用於y ，並確保始終設置x和y的值加在一起。
4. 如果停滯不前，我想嘗試一些新的東西。
5. 轉到4

Answer 3

有沒有更好的方法來存儲逐像素鼠標移動數據？

您對“更好”的標准是什么？

我的目標對於網頁而言是否太不切實際？

如果您的目標是每次光標輸入新像素都存儲一個新點，則可以。 另請注意，瀏覽器像素不一定將1：1映射到屏幕像素，尤其是在CRT顯示器中，它們幾乎肯定不會映射。