我正在嘗試制作一個(gè)繪圖網(wǎng)絡(luò)應(yīng)用程序。我想用手寫筆繪畫并用手移動畫布。如何區(qū)分這兩者？我在 MDN 官方文檔中沒有發(fā)現(xiàn)任何有希望的內(nèi)容。
1 回答
慕標(biāo)5832272
TA貢獻(xiàn)1966條經(jīng)驗(yàn) 獲得超4個(gè)贊
通過捕獲 PointerEvent 并檢查其代表筆尖尺寸的寬度和高度屬性，您可以相當(dāng)高的置信度判斷觸摸是否是由手指或手寫筆進(jìn)行的。
手寫筆通常比手指具有更小的寬度和高度。
訓(xùn)練應(yīng)用程序來識別手指與手寫筆
由于屏幕、手指和觸控筆之間的筆尖尺寸可能有所不同，因此一種可能的策略是讓用戶訓(xùn)練應(yīng)用程序以識別不同類型的觸摸：
“這是一根手指”命令，然后進(jìn)行幾次手指觸摸，直到應(yīng)用程序獲得良好的尺寸樣本。
“這是一支手寫筆”命令，然后是幾次手寫筆觸摸。
這將顯示屏幕上觸摸或單擊的筆尖尺寸：
let counter = 0;
// listen for 'pointerdown' events, detect tip size
window.addEventListener('pointerdown', (evt) => {
? const w = Number(evt.width).toFixed(1);
? const h = Number(evt.height).toFixed(1);
? const div = document.getElementById('result');
? counter++;
? div.innerHTML = `${counter}: stylus width: ${w}, height: ${h}`;
});
body {
? background-color: #eee;
? color: black;
}
#result {
? margin: 0.5rem;
? width: 18rem;
? min-height: 2rem;
? padding: 0.5rem;
? border: 1px solid gray;
? color: green;
}
<h4>Test of Pointer Stylus Tip Size</h4>
<p>Touch or click anywhere...</p>
<div id="result"></div>
- 1 回答
- 0 關(guān)注
- 258 瀏覽
添加回答
舉報(bào)
0/150
提交
取消