1

私はGoogleクロージャーを使用して、iPadSafariで表示するHTML/JSでシンプルなインタラクティブグラフィックを作成しています。

以下のコードサンプルは、Safari Macおよびその他すべての主要なブラウザで予想される動作を示しています（クリックするとコンソールメッセージが生成される円が表示されます）が、SafariiPadでは表示されません。サークルにイベントハンドラーが登録されていません。代わりに、エラーがスローされます。

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.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">​

MacSafariで。

MacとiPadSafariの両方で、円は同じように描かれます。唯一の違いはエラーです。goog.events.EventType.MOUSEDOWNの代わりにイベント名として「touchstart」を使用しても違いはありません。

iPadでエラーが発生しないようにイベントリスナーをサークルに登録したい。これどうやってするの？

4

2 に答える 2

1

私は答えを見つけたと思います。興味のある方は...

Firebug Lightを使用して、作成された描画要素が <canvas> であることに気付きました。今では当たり前のように思えますが、 goog.graphics.createGraphics はデフォルトで iPad のキャンバス タグを作成します。これは、circle.getElement() が null を返す理由を説明しています。

iPad でサポートされている SVG が必要です。Closure は、次のような 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 に答える