1

我正在使用 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 没有区别。

我想用 circle 注册一个事件侦听器，而不会在 iPad 上生成错误。我怎样才能做到这一点？

4

2 回答 2

1

我想我找到了答案。对于那些有兴趣的人...

使用Firebug Light我注意到创建的绘图元素是 <canvas>。现在看起来很明显，但 goog.graphics.createGraphics 默认为 iPad 创建一个画布标签。这解释了为什么 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);
于 2010-08-14T22:09:31.817 回答
0

向http://closure-library.googlecode.com/svn/docs/closure_goog_graphics_graphics.js.source.html中的 goog.graphics.createGraphics 方法提交补丁可能会更好

于 2010-08-16T11:32:37.330 回答