Графические элементы не назначены родительские элементы на Safari iPad при использовании Google Closure

Question

Я использую Google для создания простой интерактивной графики в HTML/JS для просмотра на iPad Safari.

В приведенном ниже примере кода показано ожидаемое поведение на Safari Mac и всех других основных браузерах (кружок показывает, что при нажатии создается сообщение консоли), но не Safari iPad. В круг не зарегистрирован обработчик событий. Вместо этого возникает ошибка.

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'); 
    }); 
}; 

Ошибка чтения (выброшен из base.js):

JavaScript Error on Line 804 ... TypeError: Result of expression 'obj' [null] is not an object.

Я думаю, что я проследил проблему с отсутствием элемента DOM для окружности, а также тот факт, что регистрация слушателя по кругу пытается зарегистрировать слушателя по кругу.getElement(). Когда queried, circle.getElement() возвращает значение null, объясняя ошибку. Обратите внимание, что выходное сообщение консоли выводит нуль на iPad Safari, но:

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

на Mac Safari.

Как на Mac, так и на iPad Safari, круг рисуется одинаково. Единственное отличие - ошибка. Использование «touchstart» в качестве имени события вместо goog.events.EventType.MOUSEDOWN не имеет значения.

Я хочу зарегистрировать прослушиватель событий с кругом без Ошибка, сгенерированная на iPad. Как я могу это сделать?

Answer 1

Я думаю, что нашел ответ. Для тех, кто заинтересован ...

Использование Firebug Light Я заметил, что элемент чертежа, который был создан, был < холст >. Кажется совершенно очевидным сейчас, но goog.graphics.createGraphics по умолчанию создает тег canvas по умолчанию для iPad. Это объясняет, почему circle.getElement() возвращает значение null.

Нам нужен SVG, который поддерживается iPad. Закрытие может быть обманут в предоставлении SVG графики с чем-то вроде:

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

Делая это, демо работает, как ожидалось. С другой стороны, мы могли непосредственно создавать SVG графики, если IPad среда известна непосредственно инстанцировании:

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

Answer 2

Вероятно, было бы лучше, чтобы представить патч к методу goog.graphics.createGraphics в http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_graphics.js.source.html