Hatena::Groupsubtech

#生存戦略 、それは

-> 07 { 12 / 25 }

HTML + JS + SVG は辞めて canvas

02:13 | はてなブックマーク -  HTML + JS + SVG は辞めて canvas - #生存戦略 、それは

外部の SVG ファイルを読み込まずに HTML から SVGJS インタフェ叩いてあれこれを探すこと二時間あまり。data スキーム使って svg の onload にフックして parent.window に現在の svg の document 参照渡せば普通に使えることは使えるけど超めんどくさい。しかもこれ Adobe SVG Viewer だけで Firefox + cairosvg 使うにはどうすりゃいいんだろ(xhtmlからならいけるけど)あれこれの情報を調べてたらもう別に canvas でよくね?という結論に。

というか初めて canvasAPI みてみた( http://developer.mozilla.org/ja/docs/Canvas_tutorial )ら FlashPlayer API の DisplayObject/Graphics とほぼ同じ使い方が出来る API が!十分というかすげーよ canvas。Sprite のラッパーもつくれそうな感じだ。ただ基本的にアニメーションさせるには、自前でイベントループ用意して毎回 clear → 再描画が必要なのでめんどくさいかなー。

というわけで良くあるローディング画像アニメーションを書いてみた。setter/getter のラッパとキャンバスのクリアと自前イベントループさえ用意すればそれなりに手早く作れそうな。

Firefox3 だと動かないらしい。なんでだろ。canvas 大本の safari でもうごかない(これは getter/setter 使ってるからアレ)。Firefox2 から 3 への移行期ってどれぐらいあるんだろう GM 書く人なんかはもう 3 がリリースされたら 2 での動作確認とかしなさそうだし、どうせなら即座にみんな3使って欲しいなぁ。

dhrnamedhrname2007/12/26 20:31getSVGDocument()はムリでしたか…
http://d.hatena.ne.jp/dhrname/searchdiary?word=getSVGDocument&type=detail

secondlifesecondlife2007/12/27 00:27ええ、object/embed で埋め込みのSVGが最初からあれば楽なんですけどねぇ。動的に作ろうといろいろ試してはみたのですが、自分の方法では無理でした。
MDCやSVGwiki などのドキュメントをいろいろ読んでは見たのですが、svg ファイルをロードせずに getSVGDocument で svg なドキュメントのインスタンスを作る方法は載ってませんでした。

flsfls2008/01/02 14:31最後の script タグを </script> で閉じれば Firefox3 でも動きましたよ。

トラックバック - http://subtech.g.hatena.ne.jp/secondlife/20071225