HTML5-Canvas-touch-event-offset auf dem Ipad oder mobile safari-browser

Ich habe ein problem ich habe nicht in der Lage, um Google meinen Weg und dies ist mein Erster Beitrag auf stackoverlow.
Ich habe zwei canvas-Elemente gestapelt auf der jeweils anderen Seite zu schaffen, eine Lotterie geben scratcher-Funktion auf meine Firmen-website.
Das problem ist, dass auf dem Ipad, wenn ich nach unten scrollen die Seite noch ein pixel die touch-Positionen sind aus der Höhe von den Blättern. Ich habe versucht, mehrere verschiedene Routen, um zu versuchen, dies zu beheben, offset-problem ohne Erfolg.

JS-Bibliotheken verwendet: Jquery1.6.4 und kinetic2d1.0.2 http://www.kineticjs.com/ für die mobile touch-Ereignis-Erkennung.

Ich habe nicht gearbeitet mit safari mobile, sehr viel, so dass ich vermute, es ist irgendeine Eigenschaft oder Methode, um zu bestimmen, den offset, die mir nicht bekannt sind.

Möchte ich eine JS Lösung für dieses problem, aber jeder hack, der mich an der Ziellinie gewinnt.

Vielen Dank im Voraus.

InformationsquelleAutor Chris Wheaton | 2011-10-26
  1. 4

    Don ' T haben ein iPad hier, um es zu testen, aber haben Sie schaute auf jQuery Offset?
    Sie können es verwenden, um die Koordinaten des canvas-Elements relativ zu dem browser-Fenster und dann zu kompensieren, die in Ihren Berechnungen, etwa so:

    offset = $('#myCanvas').offset();
left = pageX - offset.left;
top = pageY - offset.top;
    • Ja, das war eines der ersten Dinge, die ich versuchte. Berechnung der offset war kein problem.
    InformationsquelleAutor debagel
  2. 2

    Verwendung dieser Funktion wickeln Sie Ihre touch-Koordinaten - fügen Sie ein touchmove-listener, um diese Funktion

    function touchMove_event(event){
    var canvas = document.getElementById("yourCanvas");
    var coors = {
      x: event.targetTouches[0].pageX - canvas.clientLeft,
      y: event.targetTouches[0].pageY- canvas.clientTop
    };
    touchHandler(coors);
}

    übergeben, was auch immer Funktion, die Sie haben derzeit die Handhabung der touch-Ereignisse - Verwendung coord.x und coord.y

    InformationsquelleAutor HarrisonJackson
  3. 1

    Fand ich, dass durch das laden der Leinwand in einem iframe das offset-Problem wurde stumm. Also unabhängig von den Blättern, die Ausrichtung, die Schwerkraft des Mondes die scratcher funktioniert.

    Sehen Sie die live-version über das web, ipad oder smartphone auf Front Flip. Download der app zu. Es rockt!

    • Dies ist eine enorme hack - ein bisschen wie ein Schmerz zu implementieren und aufrecht zu erhalten, aber scheint zu funktionieren Charme
    InformationsquelleAutor Chris Wheaton
Schreibe einen Kommentar