Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
HTML Canvas und Pen
#1
Hallo,

Ich versuche derzeit ein simples "Paint" mit HTML5 und JS zu erstellen. Das ganze soll später mit einem Pen (alternativ auch Maus) bedient werden. Zum Test habe ich hier ein Intunous Pro.
Die Canvas Box ist vorhanden und die Methoden für onpointerdown, onpointerup und onpointermove sind eingerichtet.

Mit der Maus lässt sich das ganze auch bedienen (auch die Umrechnung der Koordinaten funktioniert).

Nur: Bediene ich mit einem Stift, wird das onpointerdown ausgelöst, jedoch führt dann ein "zeichnen" zu einem schieben der ganzen HTML Seite. So wie wenn man auf einem Tablet versucht weiter nach oben zu scrollen als es geht. Ein onpointermove wird hierbei leider nicht ausgelöst.

Ich habe auch schon das Verschieben mit CSS verhintert, aber es bringt bezüglich des onpointermove keinen Unterschied.
Ebenfalls erfolglos mein Versuch mit setPointerCapture.

Ach und die Browser: gleiches Verhalten bei Edge, FF und Chrome


Weiß jemand Rat?





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


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste