Графическим элементам не назначаются родительские элементы на Safari iPad при использовании Google Closure - PullRequest
1 голос
/ 15 августа 2010

Я использую Google closure для создания простой интерактивной графики в 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 в строке 804 ... Ошибка типа: Результат выражения 'obj' [null] не является объектом.

Я думаю, что я проследил проблему до отсутствия элемента DOM для круга и того факта, что регистрация слушателя в круге пытается зарегистрировать слушателя в circle.getElement (). При запросе 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. Как я могу это сделать?

Ответы [ 2 ]

1 голос
/ 15 августа 2010

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

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

Нам нужен 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);
0 голосов
/ 16 августа 2010

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

...