javascript - 如何使用手写笔在 HTML5 Canvas 上绘图

Question

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

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

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

有人知道如何解决它吗？

Corrently 这是我使用的概念(但不起作用):

$(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"和 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.