如何用手写笔在HTML5画布上绘制 [英] How to draw on a HTML5 canvas with a stylus

问题描述

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

I used onmousedown, onmousemove and onmouseup events to draw with JavaScript on a HTML5 canvas object. Everything is working.

现在我想用一个测针替换鼠标(Wacom Intous Pro) 因此，我将鼠标事件替换为onpointerdown，onpointerup和onpointermove.

Now I want to replace the mouse with a sylus (Wacom Intous Pro) Therefore I replaced the mouse Events with onpointerdown, onpointerup and onpointermove.

但是，现在，如果我触摸并移动笔，则没有任何onpointermove事件，而是整个页面都被拖动了.通过将HTML正文{overflow:hidden}添加到HTML构造中，我可以防止这种行为，但是仍然没有任何onpointermove事件.这些只有在笔位于数位板上方时才会显示.

But now, if I touch and move the pen, I do not get any onpointermove Events, instead the whole page is draged. By adding html, body {overflow: hidden} to the HTML construct I could Prevent this behaviour, but still I do not get any onpointermove Events. These I only get when the pen is above the tablet.

有人知道如何解决吗?

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

Corrently this is the concept I use (but not working):

$(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);
}

推荐答案

此CSS应该可以帮助您:

This CSS should help you:

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

或使用JavaScript:

or in JavaScript:

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

来自有关触摸动作"的链接的更多详细信息； 和此链接中有关输入的一些常规信息:

touch-action CSS属性用于指定浏览器是否应将其默认(本机)触摸行为(例如缩放或平移)应用于区域.此属性可能适用于所有元素，但以下除外:不可替换的嵌入式元素，表行，行组，表列和列组.

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.

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

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.

这篇关于如何用手写笔在HTML5画布上绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！