代码之家 › 专栏 › 技术社区 › Rich Apodaca

使用Google闭包时,Safari iPad上未分配父元素的图形元素

google-closure svg ipad javascript

1

Rich Apodaca · 技术社区 · 15 年前

我正在使用googleclosure创建一个简单的HTML/JS交互式图形,以便在ipadsafari上查看。

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]的结果不是对象。

我想我已经将问题追溯到circle缺少DOM元素,并且在circle上注册一个侦听器会尝试在circle上注册一个侦听器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和iPad Safari上,圆圈是一样的。唯一的区别是错误。使用“touchstart”作为事件名称,而不是goog.events.EventType事件类型MOUSEDOWN先生没什么区别。

我想用circle注册一个没有在iPad上生成时出错。我该怎么做?

2 回复 | 直到 15 年前

1

Rich Apodaca 15 年前

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

Firebug Light 我注意到创建的绘图元素是<画布>。现在看来很明显,但是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);

2

0

Chris 15 年前

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