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

Question

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

现在我想用sylus(Wacom Intous Pro(代替鼠标因此，我用onpointerdown、onpointerup和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";

来自该链接的关于"；触摸动作"；以及这个链接中关于输入的一些一般信息：

触摸动作CSS属性用于指定浏览器是否应将其默认(本地(触摸行为(如缩放或平移(应用于区域。此属性可应用于除以下元素之外的所有元素：未替换的内联元素、表行、行组、表列和列组。

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