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抛出）：

第804行的JavaScript错误... TypeError：表达式'obj'[null]的结果不是对象。

我认为我已经将问题追溯到缺少圈子的DOM元素，并且在圈子上注册监听器的事实尝试在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我注意到创建的绘图元素是＆lt; canvas＆gt;。现在看来显而易见，但goog.graphics.createGraphics默认为iPad创建了一个canvas标签。这解释了为什么circle.getElement（）返回null。

我们需要支持iPad的SVG。关闭可以欺骗提供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);

Answer 2

向http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_graphics.js.source.html

中的goog.graphics.createGraphics方法提交补丁可能会更好

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

2 个答案: