javascript - 使用 Google Closure 时，Safari iPad 上的图形元素未分配父元素

Question

我正在使用 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 Error on Line 804 ... TypeError: Result of expression 'obj' [null] is not an object.

我想我已经将问题追溯到circle缺少DOM元素，并且在circle上注册监听器尝试在circle.getElement()上注册监听器这一事实。查询时，circle.getElement() 返回 null，解释错误。请注意，控制台输出消息在 iPad Safari 上打印 null，但是:

<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 默认为 iPad 创建一个 Canvas 标签。这解释了为什么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;

这样做后，演示将按预期工作。或者，如果 iPad 环境已知，我们可以通过直接实例化来直接创建 SVG 图形:

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