如何使用Apple鉛筆在HTML畫布上繪製或獲取指針座標？

Question

我努力讓鼠標事件，如鼠標向下，向上，移動和使用我的鼠標和我的微軟Surface觸控筆的HTML畫布繪製。現在我想用iPad親鉛筆試試這個，我弄清楚，當畫布區域的鉛筆，在畫布上不承認鉛筆，所以我不能做任何圖紙或事件。是否有任何特定的JavaScript庫，我應該使用或任何其他解決方案可用於使用HTML畫布的蘋果鉛筆？

Answer 1

蘋果鉛筆可與touch事件，而不是在HTML mouse事件。你可以設置你的畫布來偵聽觸摸事件，然後檢查其touchType爲筆。然後，您可以從該特定觸摸獲取clientX和clientY來完成繪圖。

document.getElementById('mycanvas').addEventListener('touchmove', function(event){ 
    for(var i = 0; i < event.touches.length; i++){ 
     if(event.touches[i].touchType === "stylus"){ 
      console.log("x coordinate: " + event.touches[i].clientX); 
      console.log("y coordinate: " + event.touches[i].clientY); 
     } 
    } 
}); 

查看W3C draft spec瞭解更多細節的觸摸事件。另請參閱this related question獲取Apple Pencil觸摸事件。

如果你正在尋找一個庫，可以讓您輕鬆地在蘋果鉛筆和表面筆，你應該看看Pressure.js之間移動。這是太棒了，非常容易使用。