JavaScript グラフィックライブラリの開発

JavaScript で動的な画像を表示したい場合、JavaScript 自身にはグラフィックライブラリがないので困ります。 しかし Firefox, Internet Explorer それぞれがそれぞれ別の方法でベクターグラフィックスをサポートしていますので、 ここではそれらの共通インターフェイスとなる、JavaScript グラフィックライブラリを作ることを試みました。 便宜上それを Tiki グラフィックライブラリと呼んでいます。ダウンロードはこちら 。 現在はバージョン 1.0 です。

Tiki は私がハワイのときに住んでいたアパートの名前です。

デモは次のようになります。

うまく図形が表示できているでしょうか？私は Internet Explorer 6 以降、 Firefox の 2 以降、及び Google Chrome で動作を確認しています。

概要

詳しくは Tiki グラフィックライブラリのコードそのものを見ていただくことにして、この資料では私が作成したグラフィックライブラリの概要を説明します。 不具合を見つけましたら直して、パッチを私に送ってください :-)

上記のデモ用の描画コードは座標を決めるだけで面倒なので、もっとシンプルな例として次の矩形を考えます。

こちらの描画用コードは次のようになります。

var g = new TKGraphics('mycanvas2'); // 描画用クラスを準備
g.setOpacity(0.5); // 透明度の設定
g.setLineColor('#0000f0'); // 線の色を設定
g.setLineWidth(2); // 線の太さを設定
g.setFillColor('#909090'); // 塗りつぶし色を設定
g.fillRect(10, 10, 80, 80); // 矩形の座標 (top, left, width, height) を指定
g.flush(); // 描画

このライブラリでは、このように描画時にブラウザの違いを意識しなくて良いようにしています。 Firefox ではグラフィック・レンダリング用には CANVAS が使え、一方 Internet Explorer では VML が利用できます。 本ライブラリは、その違いを隠します。

描画関数は TKGraphics クラスに実装しています。TKGraphics クラスは、描画の情報を __shapes 配列に溜め込みます。 __shapes 配列は TKShape オブジェクトの配列を保持します。flush メソッド呼び出し時に、__shapes 配列内の情報を 用いて、それを Firefox 上なら Canvas、IE 上なら VML 形式の HTML 要素として出力します。

Tiki グラフィックライブラリ リファレンス

現時点で下記のメソッドが実装されています。

Tiki JavaScript グラフィックライブラリのダウンロード

• 1.0 (9/2/2008) [Minified] (20kb) | [Debug] (27kb)