Web/DB プログラミング徹底解説

ホーム > JavaScript プログラミング > JavaScript グラフィックライブラリの開発

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 描画関数の利用
common-version.js (TKGraphics を含む)
注: common-xx.js は prototype.js を利用しています
Firefox
CANVAS
Internet Explorer
VML
Tiki Graphics ライブラリアーキテクチャ

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

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

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

TKGraphics
TKGraphics(id)TKGraphics のコンストラクタ。id に描画キャンバスとなる div 要素の id を指定します。div 要素の CSS position 属性は 'absolute' とします。
setFillColorRGB(r,g,b)塗りつぶし色を RGB で指定します。
setFillColor(col)塗りつぶし色を文字列で指定します。
setLineColorRGB(r,g,b)線の色を RGB で指定します。
setLineColor(col)線の色を文字列で指定します。
setLineWidth(w)線の太さを指定します。
setOpacity(v)透明度を指定します。(0 から 1)
setEndCap(s)図形の角の形状を指定します。butt, round, square のいずれかを指定します
drawCircle(x,y,r)円を描画します。
fillCircle(x,y,r,fillcolor)円を塗りつぶします。
drawLine(x1, y1, x2, y2)線を描画します。
drawRect(left,top,width,height)矩形を描画します。
fillRect(left,top,width,height,fillcolor)矩形を塗りつぶします。
drawTriangle(pt1, pt2, pt3)三角形を描画します。
頂点の座標は pt オブジェクトで指定します。
fillTriangle(pt1, pt2, pt3, fillcolor)三角形を塗りつぶします。
頂点の座標は pt オブジェクトで指定します。
flush()図形を描画します。
pt
pt(x,y)pt のコンストラクタ。x, y に座標を指定します。
xx 座標
yy 座標

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

 

スポンサーリンク