Touch draw-Ereignisse und HTML5-Canvas

Ich versuche zu schreiben, ein canvas-element, das kann 'ziehen' mit der Maus und mobile (iOS/Android).

hier ist meine bind-code: 

 /- /Maus-basierte Schnittstelle 
$(Zeichnung.Leinwand).bind('mousedown', Zeichnung.drawStart); 
$(Zeichnung.Leinwand).bind('mousemove', Zeichnung.zeichnen); 
$(Zeichnung.Leinwand).bind('mouseup', Zeichnung.drawEnd); 
$('body').bind('mouseup', Zeichnung.drawEnd); 

$(Zeichnung.Leinwand).bind('touchstart', Zeichnung.drawStart); 
$(Zeichnung.Leinwand).bind('touchmove', Zeichnung.zeichnen); 
$(Zeichnung.Leinwand).bind('touchend', Zeichnung.drawEnd);

Arbeitet mit computer (PC, Mac), aber nicht für Mobilgeräte (iOS/Android). Ich habe auch versucht addEventListener für die touch* Ereignisse, aber keine Freude.

Irgendwelche Ideen?

  • So haben Sie versucht canvas.addEventListener( 'touchstart', onTouchStart, false);? Ignorieren jQuery komplett für jetzt, versuchen Sie einfach zu bekommen, dass funktioniert.
  • hinzufügen des schwarzen Rechtecks code gearbeitet, aber es didin ' T Arbeit für das zeichnen von Linien,etc. Also ich Frage mich, ob es ist die Zeichnung Funktionen, die nicht arbeiten oder so etwas.
  • Es ist höchstwahrscheinlich etwas anderes das problem verursacht Sie. Starten Sie schnitzten Dinge nach unten in Ihrem code, bis Sie eine funktionierende version, dann arbeiten Sie sich zurück von dort.
InformationsquelleAutor cbrulak | 2011-05-03
  1. 4

    Entweder es ist ein sytax Fehler oder ein jQuery-problem. Destilliert nach unten, canvas.addEventListener( 'touchstart', onTouchStart, false); funktioniert gut für android:

    http://jsfiddle.net/tQW2L/

    (auf dem touch Malt er ein großes, Schwarzes Rechteck, um zu bestätigen, dass es funktioniert)

    InformationsquelleAutor Simon Sarris
Schreibe einen Kommentar