如何使用触笔在HTML5画布上绘画

Question

如何使用触笔在HTML5画布上绘画

4

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

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

但现在，如果我触摸并移动笔，我没有得到任何onpointermove事件，整个页面被拖动。通过在HTML结构中添加html, body {overflow: hidden}，我可以防止这种行为，但仍然无法获得任何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);
}

- AntonWert

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Algirdas Butkus · Accepted Answer

以下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"的更多详细信息请参考此链接，有关输入的一些常规信息请参考此链接：

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

值为auto表示浏览器可以自由地应用其默认的触摸行为（对于指定区域），而none的值则禁用了浏览器区域的默认触摸行为。pan-x和pan-y的取值意味着仅用于水平和垂直滚动的在指定区域中开始的触摸。而manipulation的值意味着浏览器可能会认为在元素上开始的触摸只用于滚动和缩放。