針對jQuery mobile colorpicker滑塊和畫布的多點觸控？

Question

現在我已經有了一個有效的colorpicker滑塊，我的本地副本稍微更加開發，因爲我修改了jQuery移動庫，但我認爲this fiddle應該足以顯示我的工作概念。

我希望我可以使用現有的jQuery移動框架，或者與另一個不會與jQuery移動產生衝突的庫（如hammer.js？）一起工作。 。我完全不熟悉這個，但是我沒有在他們的文檔中看到任何有關它的信息，或者如果甚至可以用其他框架。

我在這個庫（thumbs.js）看，它可能會添加類似可能：

element.setAttribute('ontouchstart', 'console.log("hi");'); 

纔有可能有滑塊和帆布是活躍在同一時間，以便用戶可以用一根手指滑動並與另一個手指同時在畫布上畫畫？

我想要一個類似的例子，但我還沒有成功。我看到很多關於js相關的多點觸控和觸控項目的信息，like this wiki，但我不確定如何將它們實現到我的項目中。

Answer 1

hammer.js將與jQuery和jQuery mobile一起使用，用於多點觸控手勢。還請查看this page，其中有人已經調整了hammer.js以使用更方便的jQuery特殊事件API。 如果您打算支持Android 2.x，請參閱this page瞭解如何在這些設備上運行的應用程序中重新啓用多點觸控。

但是，您所描述的使用一根手指來控制滑塊而另一隻手指在畫布上獨立繪製並不是這樣的手勢，因此我不確定您會發現現有的庫支持這個。您需要獨立跟蹤兩個手指的x，y位置。縱觀hammer.js源代碼，它似乎可以提取X，Y每個觸摸座標：

var pos = [], src; 
for(var t=0, len=event.touches.length; t<len; t++) { 
    src = event.touches[t]; 
    pos.push({ x: src.pageX, y: src.pageY }); 
} 
return pos; 

所以，你可能能夠延長hammer.js或寫一些自定義的JS來提取這一信息並因此同時跟蹤滑塊位置和畫布位置。