如何使用手写笔在 HTML5 canvas 上绘图

Question

我使用 onmousedown、onmousemove 和 onmouseup 事件在 HTML5 canvas 对象上使用 JavaScript 绘制。一切正常。

现在想把鼠标换成sylus (Wacom Intous Pro) 因此，我将鼠标事件替换为 onpointerdown、onpointerup 和 onpointermove。

但是现在，如果我触摸并移动笔，我不会得到任何 onpointermove 事件，而是拖动整个页面。通过将 html, body {overflow: hidden} 添加到 HTML 构造中，我可以防止这种行为，但我仍然没有得到任何 onpointermove 事件。只有当笔在数位板上方时，我才会得到这些。

有人知道如何解决吗？

目前这是我使用的概念（但不起作用）：

$(function() {
   var el=document.getElementById("myDraw");
    el.onpointerdown = down_handler;
    el.onpointerup = up_handler;
    el.onpointermove = move_handler;
    ctx = el.getContext("2d");
    ctx.canvas.width  = window.innerWidth*0.75;
    ctx.canvas.height = window.innerHeight*0.75;
});



function move_handler(ev) 
{ 
if (onTrack>0)
{
    var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
    var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
    ctx.beginPath();
    ctx.lineWidth=10*ev.pressure;
    ctx.moveTo(lastX,lastY);
    ctx.lineTo(xPosition,yPosition);
    ctx.stroke();     
    lastX = xPosition; 
    lastY = yPosition;
}
}

function down_handler(ev) 
{
    var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
    var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
    ctx.beginPath();
    ctx.arc(xPosition, yPosition, 5, 0, 2 * Math.PI);
    ctx.stroke();     
    startX = xPosition;
    startY = yPosition;
    lastX = xPosition;
    lastY = yPosition;
    onTrack=1;
    var el=document.getElementById("myRemoteDraw");
   el.setPointerCapture(ev.pointerId);
    console.log('pointer down '+ev.pointerId);
}


function up_handler(ev) 
{
    var xPosition = ev.clientX-getPosition(document.getElementById("myDraw")).x;
    var yPosition = ev.clientY-getPosition(document.getElementById("myDraw")).y;
    ctx.beginPath();
    ctx.rect(xPosition-5, yPosition-5, 10, 10);
    ctx.stroke();     
    onTrack = 0;
    var el=document.getElementById("myRemoteDraw");
    el.releasePointerCapture(ev.pointerId);
    console.log('pointer up '+ev.pointerId);
}

Answer 1

这个CSS应该可以帮助你：

<style>
    /* Disable intrinsic user agent touch behaviors (such as panning or zooming) */
    canvas {
      touch-action: none;
    }
</style>

或 JavaScript:

ctx.canvas.style.touchAction = "none";

来自 this link about "touch-action" and some general info in this link about inputs 的更多详细信息：

The touch-action CSS property is used to specify whether or not the browser should apply its default (native) touch behavior (such as zooming or panning) to a region. This property may be applied to all elements except: non-replaced inline elements, table rows, row groups, table columns, and column groups.

A value of auto means the browser is free to apply its default touch behavior (to the specified region) and the value of none disables the browser's default touch behavior for the region. The values pan-x and pan-y, mean that touches that begin on the specified region are only for horizontal and vertical scrolling, respectively. The value manipulation means the browser may consider touches that begin on the element are only for scrolling and zooming.

如何使用手写笔在 HTML5 canvas 上绘图

How to draw on a HTML5 canvas with a stylus

html

javascript

stylus-pen