私は現在、wacom intousを使用して、ブラウザーのキャンバスに何かをペイントしようとしています。
コードは非常に基本的で、マウスの位置を見つけて、マウスがクリックされたときにパスを描画する以外に何もしません。
これは、マウスを使用すると期待どおりに機能します。wacomタブレットを使用すると、約20px後に移動がキャンセルさlostpointercaptureれ、pointercancelイベントとイベントが発生します。
これはコードです：
(function() {
var canvas = document.querySelector('.canvas');
var ctx = canvas.getContext('2d');
var currentPosition = {
x: 0,
y: 0
};
function init() {
adjustCanvasSize();
}
function adjustCanvasSize() {
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.innerHeight;
}
function setPosition(ev) {
currentPosition.x = ev.clientX;
currentPosition.y = ev.clientY;
}
function draw(ev) {
ev.preventDefault();
if (ev.buttons !== 1) {
return;
}
ctx.beginPath();
ctx.lineWidth = 1;
ctx.lineCap = 'round';
ctx.strokeStyle = '#1a1b1c';
ctx.moveTo(currentPosition.x, currentPosition.y);
setPosition(ev);
ctx.lineTo(currentPosition.x, currentPosition.y);
ctx.stroke();
}
document.addEventListener('pointermove', draw);
document.addEventListener('pointerdown', setPosition);
document.addEventListener('pointerenter', setPosition);
init();
})();
ワコムが数ピクセル後に描画を停止する理由を誰かが知っていますか？
数ピクセルを通過した後の「lostpointercapture」PointerEventで、この正確な問題に遭遇しました
https://jsfiddle.net/mr1z7qg3/
解決策は、を追加することです
touch-action: none;
描画される場所にスタイルを設定します。そうしないと、ブラウザはそれをパン/ズームタッチジェスチャとして解釈しますhttps://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
... Chromeの場合
Firefoxでは、代わりにabout：configにdom.w3c_pointer_events.dispatch_by_pointer_messagesが必要です。
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加