如何用手写笔在HTML5画布上绘制

安东·沃特

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

现在，我想用一个测针（Wacom Intous Pro）替换鼠标，因此我用onpointerdown，onpointerup和onpointermove替换了鼠标事件。

但是现在，如果我触摸并移动笔，则不会收到任何onpointermove事件，而是整个页面都被拖动了。通过将HTML正文{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);
}

阿尔吉达斯·布特库斯（Algirdas Butkus）

该CSS应该可以帮助您：

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

或在JavaScript中：

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

此链接中有关“触摸操作”的更多详细信息，以及此链接中有关输入的一些常规信息：

touch-action CSS属性用于指定浏览器是否应将其默认（本机）触摸行为（例如缩放或平移）应用于区域。此属性可以应用于除以下元素之外的所有元素：非替换内联元素，表行，行组，表列和列组。

auto值表示浏览器可以自由地将其默认触摸行为（应用于指定区域），none值禁用浏览器对该区域的默认触摸行为。值pan-x和pan-y表示分别从指定区域开始的触摸仅用于水平和垂直滚动。值操纵意味着浏览器可以考虑从元素开始的触摸仅用于滚动和缩放。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。