4

我使用 onmousedown、onmousemove 和 onmouseup 事件在 HTML5 画布对象上使用 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);
}
4

1 回答 1

4

这个 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 的值表示从指定区域开始的触摸分别仅用于水平和垂直滚动。值操作意味着浏览器可能认为从元素开始的触摸仅用于滚动和缩放。

于 2018-07-29T15:06:53.270 回答