Grafische Elemente nicht übergeordnete Elemente auf Safari iPad zugewiesen bei der Verwendung von Google Closure

Question

Ich verwende Google Verschluss eine einfache interaktive Grafik in HTML / JS zu erstellen, die auf iPad Safari betrachtet werden.

Der Beispielcode unten zeigt die erwartete Verhalten auf Safari Mac und alle anderen gängigen Browsern (ein Kreis erscheint, dass beim Anklicken einer Konsolennachricht erzeugt), aber nicht Safari iPad. Kein Event-Handler wird mit dem Kreis registriert. Stattdessen wird ein Fehler ausgelöst.

goog.require('goog.graphics'); 
goog.require('goog.events.EventType'); 
goog.require('goog.graphics.Stroke'); 
goog.require('goog.graphics.SolidFill'); 

var showCircle = function() { 
  var graphics = goog.graphics.createGraphics(400, 400); 
  var stroke = new goog.graphics.Stroke(1, 'black'); 
  var fill = new goog.graphics.SolidFill('#00ff00', 0.5); 
  var circle = graphics.drawEllipse(100, 100, 30, 30, stroke, fill); 
  var element = goog.dom.getElement('demo'); 
  graphics.render(element); 
  console.info(circle.getElement()); 
  goog.events.listen(circle, goog.events.EventType.MOUSEDOWN, function(e) { 
    console.info('mousedown'); 
  });
};

Der Fehler liest (von base.js geworfen):

  

JavaScript Fehler in Zeile 804 ... Typeerror:. Ergebnis des Ausdrucks 'obj' [null] ist kein Objekt

Ich denke, dass ich das Problem das Fehlen eines DOM-Element für Kreis verfolgt haben, und die Tatsache, dass ein Zuhörer auf Kreis versucht Registrierung eines Zuhörers auf circle.getElement () zu registrieren. Bei der Abfrage circle.getElement () NULL zurück, erklärt die Fehler. Beachten Sie, dass die Konsole Ausgangsnachricht druckt null auf iPad Safari, aber:

<ellipse cx=​"100" cy=​ "100" rx=​"30" ry=​"30" stroke=​"black" stroke-width=​"1" fill=​ "#00ff00" fill-opacity=​"0.5">​

auf Mac Safari.

Auf Mac und iPad Safari wird der Kreis das gleiche gezogen. Der einzige Unterschied ist der Fehler. Mit ‚touchstart‘ als Ereignisnamen statt goog.events.EventType.MOUSEDOWN macht keinen Unterschied.

Ich möchte, ohne dass ein Ereignis-Listener mit Kreis registrieren Fehler werden auf IPAD erzeugt. Wie kann ich das machen?

Answer 1

Ich denke, dass ich die Antwort gefunden. Für diejenigen, die daran interessiert sind ...

Mit Firebug Licht Ich bemerkte, dass das Zeichenelement, das erstellt wurde, war . Scheint jetzt völlig klar, aber goog.graphics.createGraphics schafft eine Leinwand-Tag standardmäßig für iPad. Dies erklärt, warum circle.getElement () den Wert null zurück.

Wir brauchen SVG, die durch iPad unterstützt wird. Verschluss kann in der Bereitstellung SVG-Grafiken mit so etwas wie ausgetrickst wird:

  var oldMobileSetting = goog.userAgent.MOBILE;
  goog.userAgent.MOBILE = false;
  var graphics = goog.graphics.createGraphics(400, 400);
  goog.userAgent.MOBILE = oldMobileSetting;

Dadurch arbeitet die Demo wie erwartet. Alternativ könnten wir direkt SVG-Grafiken erstellen, wenn iPad Umgebung von direkt Instanziieren bekannt ist:

var graphics = new goog.graphics.SvgGraphics(400, 400);

Answer 2

Es wäre wahrscheinlich besser, einen Patch auf die goog.graphics.createGraphics Methode einreichen in http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_graphics.js.source.html