Hey Com,
ich bräuchte da mal eure Hilfe.
Ich habe eine Funktion, die auf einem Canvas Element eine gerade und eine polygonale Linie zeichnet.
Die Funktionen dazu sind hier nicht wichtig.
Auf einem Browser der mit den Mausevents arbeitet klappt das super, da ich die jeweiligen Events für mousedown, mousemove und mouseup nicht registrieren bzw. löschen muss, da diese sich bei Aufruf ständig überschreiben.
Nun möchte ich das ganze aber auf einem mobilen Endgerät ausführen und nutze dafür die touch Events.
Bei diesen Event ist es allerdings so, dass ich jeden Handler mit addEventListener() registrieren muss.
Also ähnlich wie: $(object).addEventListener("mousestart",function(),false); usw.
Beim ersten Mal klappt das auch super.
Die Funktion wird ausgeführt und zeichnet das was ich sehen will auf meinem Canvas objekt.
Wenn ich jetzt aber etwas anderes ausführen möchte müsste ich zwingend der Handler löschen und neu registrieren oder überschreiben.
Also wenn ich die gerade Linie zeichnen will klicke ich auf den entsprechenden Button, die Funktion soll ausgeführt werden und zwar mit den Touch Events.
Wenn ich nun die polygonale Linie zeichnen möchte klicke ich auf einen Button und der Handler soll mit anderen Parametern ausgeführt ausgeführt werden.
Nun ist es aber so das ich den ersten Handler löschen muss um ihn danach neu zu registrieren (überschreiben funzt hier leider nicht).
Da bekomme ich allerdings Probleme weil ich nicht genau weiß wie ich das am besten anstelle.
Meine Frage daher, hat irgendwer ne passable Lösung oder gibt es ein framework das ich nutzen kann?
Zur Veranschaulichung was ich meine, hier einmal der Teilcode:
Wie ihr seht werden Funktionsvariablen immer neu gesetzt und an die Eventhandler übergeben.
Habe ich allerdings den Handler einmal registriert kannich ihn nicht löschen (oder ich bin zu Dumm es richtig zu machen).
Ich hoffe ich habe mich einigermaßen Verständlich ausgedrückt.
Wäre schön, wenn hier jemand nen Denkanstoß für mich hat.
Danke im Vorraus Mad.
ich bräuchte da mal eure Hilfe.
Ich habe eine Funktion, die auf einem Canvas Element eine gerade und eine polygonale Linie zeichnet.
Die Funktionen dazu sind hier nicht wichtig.
Auf einem Browser der mit den Mausevents arbeitet klappt das super, da ich die jeweiligen Events für mousedown, mousemove und mouseup nicht registrieren bzw. löschen muss, da diese sich bei Aufruf ständig überschreiben.
Nun möchte ich das ganze aber auf einem mobilen Endgerät ausführen und nutze dafür die touch Events.
Bei diesen Event ist es allerdings so, dass ich jeden Handler mit addEventListener() registrieren muss.
Also ähnlich wie: $(object).addEventListener("mousestart",function(),false); usw.
Beim ersten Mal klappt das auch super.
Die Funktion wird ausgeführt und zeichnet das was ich sehen will auf meinem Canvas objekt.
Wenn ich jetzt aber etwas anderes ausführen möchte müsste ich zwingend der Handler löschen und neu registrieren oder überschreiben.
Also wenn ich die gerade Linie zeichnen will klicke ich auf den entsprechenden Button, die Funktion soll ausgeführt werden und zwar mit den Touch Events.
Wenn ich nun die polygonale Linie zeichnen möchte klicke ich auf einen Button und der Handler soll mit anderen Parametern ausgeführt ausgeführt werden.
Nun ist es aber so das ich den ersten Handler löschen muss um ihn danach neu zu registrieren (überschreiben funzt hier leider nicht).
Da bekomme ich allerdings Probleme weil ich nicht genau weiß wie ich das am besten anstelle.
Meine Frage daher, hat irgendwer ne passable Lösung oder gibt es ein framework das ich nutzen kann?
Zur Veranschaulichung was ich meine, hier einmal der Teilcode:
Code:
function touchEvents(work) {
var x,y,x1,y1;
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var touchStart, touchMove, touchEnd;
// So klappt das nicht ganz
/*
canvas.addEventListener("touchstart",touchStart,false);
canvas.addEventListener("touchmove",touchMove,false);
canvas.addEventListener("touchend",touchEnd,false);
*/
// auch das funzt nicht so richtig
/*
canvas.off("touchstart").off("touchmove").off("touchend");
*/
if(work == "zeichnen_polygonal") {
// polygonale Linie
touchStart = function(e) {
x = e.touches[0].pageX;
y = e.touches[0].pageY;
x -= 2 * canvas.offsetLeft - canvas.getBoundingClientRect().left;
y -= 2 * canvas.offsetTop - canvas.getBoundingClientRect().top;
Draw(x, y, false); // Zeichenfunktion für polygonale Linie
};
touchMove = function(e) {
x = e.touches[0].pageX;
y = e.touches[0].pageY;
x -= 2 * canvas.offsetLeft - canvas.getBoundingClientRect().left;
y -= 2 * canvas.offsetTop - canvas.getBoundingClientRect().top;
Draw(x,y, true);
koord_X = 0;
koord_Y = 0;
};
touchEnd = function() {
};
}
if(work == "zeichnen_line") {
// gerade Linie
touchStart = function(e) {
x = e.touches[0].pageX;
y = e.touches[0].pageY;
x -= 2 * canvas.offsetLeft - canvas.getBoundingClientRect().left;
y -= 2 * canvas.offsetTop - canvas.getBoundingClientRect().top;
ctx.putImageData(imgOld, 0,0);
zeichneLinie(x,y,x,y); // Zeichenfunktion für gerade Linie mit Nachverfolgung
};
touchMove = function(e) {
x1 = e.touches[0].pageX;
y1 = eevent.touches[0].pageY;
x1 -= 2 * canvas.offsetLeft - canvas.getBoundingClientRect().left;
y1 -= 2 * canvas.offsetTop - canvas.getBoundingClientRect().top;
ctx.putImageData(imgOld, 0,0);
zeichneLinie(x,y,x1,y1);
};
touchEnd = function(e) {
$('#myCanvas').off(zeichneLinie());
ctx.putImageData(imgOld, 0,0);
ctx.beginPath();
ctx.moveTo(x,y);
ctx.lineTo(x1,y1);
ctx.closePath();
ctx.stroke();
canvasPaintLine();
};
}
canvas.addEventListener("touchstart",touchStart,false);
canvas.addEventListener("touchmove",touchMove,false);
canvas.addEventListener("touchend",touchEnd,false);
}Wie ihr seht werden Funktionsvariablen immer neu gesetzt und an die Eventhandler übergeben.
Habe ich allerdings den Handler einmal registriert kannich ihn nicht löschen (oder ich bin zu Dumm es richtig zu machen).
Ich hoffe ich habe mich einigermaßen Verständlich ausgedrückt.
Wäre schön, wenn hier jemand nen Denkanstoß für mich hat.
Danke im Vorraus Mad.
