前回、前々回とGWTでSVGやCanvasのサンプルを作ってみましたが、なぜこんなことやったかというと、、、 迷路メーカーhttp://gwt-html5-games.appspot.com/maze.html これが作りたかったから。最初はこんな感じ。ツールバーの"brush"のボタンを押してお絵かきソフトっぽく迷路を作っていってください。完成するとこんな感じ。作った迷路は"play"ボタンで3Dっぽい画面で遊べます。緑のマスがスタート青がゴール"solve"ボタンを押すと、スタートからゴールまでの経路がオレンジで表示されます。(3Dには反映されません) 画面の上部には[svg]と[canvas]の2つのタブがついてます。それぞれ、SVGで実装したアプリとCanvasで実装したアプリで遊べます。実装が違いますが、機能自体はほぼ同じです。作ってみた印象としては、迷路を作る画面はcanvas
3月中旬、米国ラスベガスで開催されたマイクロソフトの技術カンファレンス「MIX10」でInternet Explorer（IE）の次期バージョンIE9の概要が発表された。そこで、JavaScript実行速度の向上など、IE9における様々な強化点が発表された（関連記事）。中でも、筆者が関心を持ったのはHTML5への対応で、特にSVGの標準サポートを正式表明した点に興味を覚えた。 SVGとはScalable Vector Graphicsの略で、画像を扱うためのフォーマット形式である。JPEGやGIFなどと同じようなものと考えればよい。ただし、JPEGやGIFがラスター方式と呼ばれる画像を細かいドットで表す方式を使っているのに対し、SVGはベクター形式と呼ばれる画像を構成する線の位置や関係といった情報で表す方式を使っている点が異なる。ベクター方式を使うことで、画像サイズが携帯電話のような小さな
高輪 知明氏 http://nutsu.com この記事は、Spark projectが主催する勉強会での講演内容を、講演者とSpark projectの協力のもと、Adobe Developer Connection用に再構成したものです。Spark projectの勉強会は、毎月開催されています。詳しくは、「Spark project 勉強会」のページまで。 Flashで外部画像データを読み込んで表示する場合、外部画像データとしてPNGやJPEGなどのラスター形式の画像を利用することが多いでしょう。では、ベクター形式の画像を利用したいと思った場合、どうすればいいでしょうか？ ベクター形式の画像を利用する場合、まずそのフォーマットを検討することが必要となるでしょう。SWFなのか、それとも別のフォーマットなのか。場合によっては、独自フォーマットを検討することがあるかもしれません。 フォーマ
This is a converter from Inkscape's SVG files into SWFTOOLS swfc.exe format InkscapeのSVGファイルをSWFTOOLSのswfc.exeにインポートするコンバータを作ってみました。 Inkscape以外のもので作られたSVGファイルをInkscapeで操作して保存することでコンバートすることが可能です。 Download: This is a converter from Inkscape's SVG files into SWFTOOLS swfc.exe format inkscape2swfc_demo070.py Ruby version : inkscape2swfc_ruby0.01.rb 2008/6/5 更新歴： 2007/1/3 nkscape2swfc_demo070.py t
連休中にやろうと思っていたことの半分もできなくて残念です。 ワードローグのコーディングも途中で投げ出したままだし、本の原稿も完成してないし。。。やれやれです。 つくづく未来の予測はむずかしいと思う。 PDF（Portable Document Format）やドローツールのIllustratorで有名なAdobe（アドビシステムズ社）が、SVG（Scalable Vector Graphics）のサポートを停止する（正確には、SVG表示ソフトのSVG Viewerに関して、2007年末にサポートを、2008年末に配布を終了する）、という発表をしたのを聞いて、「しまった、読みを間違えた」と思ったのである。 SVGは、PDFとほぼ同じ表現能力を持つ、Webブラウザ向けのベクターグラフィック言語のことである。 実は、SVGが発表され、Adobeがそのビューア（Webブラウザのプラグイン）を公開し
Posted by nene2001 at 00:17 / Tag(Edit): svg viewer ie / 1 Comments: Post / View / 4 TrackBack / Google Maps PlaceXML報告会で、YRPユビキタス研の高木先生等が中心となって開発されている、SVGビューワのα版を見せてもらいました。 これまでの唯一解と言ってもよかったアドビのSVG Viewerと比較して、その神速ぶりに驚くばかり。 まず最初に、データサイズ14MBくらいの、地球地図起源の日本全国のベクトル地図画像を読み込んだのですが、新SVGビューワが4秒かそこらで読み込み・表示完了したのに対し、アドビのSVG Viewerは20秒近く経ってようやく読み込み完了。 さらに読み込まれた後も、新ビューワの方はマウスでのドラッグでGoogle Mapsばりに自由に
いわゆるSVG形式のベクター形式画像ファイルを扱う時に便利なオープンソースのソフトウェア。開いたSVGファイルを任意の解像度のPNGファイルに変換できます。また、Illustratorのようにベクター形式で画像を作成することも可能。Linux、Windows 2000/2003/XP、Mac OS X、FreeBSDなどで動作します。 実際のインストールと利用方法は以下の通り。 Inkscape. Draw Freely http://www.inkscape.org/ ダウンロードはこちらから。 http://www.inkscape.org/download.php ダウンロードした本体をクリックしてインストール開始 「Next」をクリック 「Next」をクリック 「Next」をクリック 「Install」をクリック しばらく待つ 「Next」をクリック 「Finish」をクリックすれ
Firefox対応ライフゲーム完成*1。まだ改善できる点はいくつかあるけど、基本形はこれでOK。 以前に作った物との違いは Firefox1.5対応 Adobe SVG Viewer(以下ASV)固有の機能は不使用 コンテキストメニュー書き換え DOM APIの拡張メソッド 代わりにW3C標準のDOMを使用 セルを○から□に変更 高速な描画 ランダム配置の実装 某iアプリに触発されたのと、実装が簡単だったため パターン呼び出しを削除 めんどかった(ぉ ホイールクリックで次の状態に進む機能の削除 なぜかイベントが飛んでこなかったからできなかった こんなところかな。 次のステップは、ASV固有のメソッドを使ってブラウザ判別し、両対応のを作ることかな。 *1:Firefox1.5.0.1でしか試してないので注意。1.5より前のバージョンでは、svgをenableにしてコンパイルする必要があります
どっちもWEBベースのベクターグラフィクス。何かと制限は多いが、SWFからSVGを読み込んで表示させてやることができるものがあるので紹介。 ↑はchara.svgをswfで表示させている状態。 http://actionscript-toolbox.com/shapeDefinedMC.phpからfmx_shapeDefinedMC.zipファイルを取得。 その中にある、displayFromSVG.flaを開く。 actionsレイヤーの1フレーム目にあるアクションの下の方の、以下のコードの c.startSVGParse('toucan_20030512.svg'); 'toucan_20030512.svg'の部分を'people.svg'に変えてパブリッシュ。イラストが描かれていくムービーが表示される。 同じように、SDMC_examples.flaもパブリッシュ。読み込んだSV
SVG（Scalable Vector Graphics）は、W3C（World Wide Web Consortium）が提唱しているXMLベースのベクター画像記述言語である。LinuxでSVG形式のファイルを表示／編集する場合は、InkscapeやSodipodiなどのソフトウェアを使用するのがいいだろう。 InkscapeはSodipodiから派生したプロジェクトで、SVG形式以外にSVGZ形式（gzipで圧縮されたSVG形式）のファイルも表示／編集できる。Inkscapeは、tabボールのほかに各種パッケージでも配布されているが、本体以外にライブラリなどが必要となるため、インストールにはかなり手間がかかる。Fedora Core 4の場合はFedora Extrasでパッケージが配布されているため、yumコマンドでインストール可能だ。
「Ajax を使った手書き文字認識」を見て。ここでは線を描くのに絶対配置の span 要素を大量生成しているけど、最近のブラウザってベクター描画エンジン付きのものが多いわけで。WinIE 5 以降の VML 、Opera 8 ・ Firefox 1.5 以降の SVG 、Safari 1.3 ・ Firefox 1.5 以降の canvas 要素といった具合に。 ということで各ブラウザでベクター描画エンジンが使えればそれを使い、なければ絶対配置の HTML 要素を大量生成することで、ブラウザ上でお絵かきできるというものを作ってみた。元に戻す / やり直すこともできる。線を描くだけで塗りつぶしはできないが。 その線を描くために作ったのが DrawingCanvas クラス。以下のようにすることで三角形が描ける。実際の描画部分には SVG Tiny 、HTML Canvas 、CSS Posi
１．イントロダクション 本連載第１回では、SVGグラフィックを動かすにはSMIL AnimationとDOMの２つの方法があり、SMIL Animationの書き方を簡単に解説しました。第3回では、DOM+JavaScriptでSVG表示を変更したり動かしたりする方法を紹介します。 Adobe社の「SVG Viewer」をIEにプラグインして使います。Adobe社のダウンロードサイトからダウンロードしてください。指定されたインストール手順に従うと、IEにプラグインされます。 ２．スクリプトの書き方 SVGファイル中にスクリプトを書き込むには、以下の2つの方法があります。 ①<script>部分にスクリプトを書く <script>部分にスクリプト言語を書き込みます。 <script>要素の書き方 <svg width="100" height="100"> <script type="tex
XML, SVG, DOM のサンプルＤＯＭとＳＶＧのサンプル表示として、 ＤＯＭオブジェクトを利用して、ＸＭＬからＨＴＭＬを生成させる。・・・(XML to HTML) ＳＶＧの filter を利用して、ＳＶＧを作成する。・・・(SVG to SVG) 既存のＳＶＧをコピーして、ＳＶＧのノードに追加させる。・・・(SVG to SVG) ＳＶＧの EventListener を利用する。・・・(SVG to SVG) ＳＶＧ Ａnimationを利用する。・・・(Ａnimation) XSLT ツールを利用する。・・・(XSL to SVG) ＳＶＧのメニュータブを利用する。・・・(XML to HTML) ＳＶＧのfilterのパラメータをscrollbarで変更させる。・・・(Ａnimation) feGaussianBlur, feOffset, feSpecularLight
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
