« Collection | トップページ | Cookieへのデータ保存 »

2007年4月13日 (金)

ドローイングAPI

dojo.gfxはクロスブラウザのドローイングAPIを提供する。ブラウザはFireFox 1.5+、Internet Explorer 6+、Opera 9をサポートしており、IEではVML、FireFoxとOperaではSVGを用いて実現している。

dojo.gfxを使うときは、dojo.gfx.*をrequireする。

dojo.require("dojo.gfx.*");

最初にcreateSurfaceを使って描画する領域となるdojo.gfx.Surfaceを作る。createSurfaceの引数として、描画領域を作成するHTML要素、幅、高さを指定する。

var node = dojo.byId('test');
var surfaceWidth = 150;
var surfaceHeight = 150;
var surface = dojo.gfx.createSurface(node, surfaceWidth, surfaceHeight);

このSurfaceに対して、図形(shapeオブジェクト)を追加する。以下の例では、Surfaceに対して、長方形(Rectオブジェクト)を追加している。 Rectオブジェクトに対してsetFillで色を指定している。最初の4つの引数でRGBを指定し、4つ目の引数で透明度を指定する。

var rect = { x: 50, y: 50, width: 100, height: 70 };
surface.createRect(rect).setFill([0, 0, 255, 0.5])

Shapeオブジェクトの種類

Surfaceオブジェクトに対して、craeteXXXメソッドを使うことで、Shapeオブジェクトを作ることができる。以下の7つのShapeオブジェクトを作ることができる。

createメソッド作成されるオブジェクトcreateメソッドの引数の例
createPath ベジェ曲線 "m100 100 100 0 0 100c0 50-50 50-100 0s-50-100 0-100z"
createRect 長方形 { x: 150, y: 50, width: 100, height: 70, r:15}
createCircle {cx: 250, cy: 160, r: 35}
createEllipse 楕円 {cx: 250, cy: 50, rx: 80, ry: 30}
createLine 直線 {x1: 20, y1: 180, x2: 380, y2: 130}
createPolyline 折れ線 [{x: 350, y: 200}, {x: 100, y: 100}, {x: 100, y: 200}, {x: 20, y: 50}]
createImage 画像 {width: 225, height: 96, src: "http://dojotoolkit.org/sites/all/themes/dojotoolkit.org/logo.png"}

各種Shapeオブジェクトのサンプル

塗りつぶし

setFillメソッドを使うことで、Shapeオブジェクトの内側の色/画像を指定できる (LineとImageは設定できなかった)。同じ色で塗りつぶすだけでなく、グラデーションをかけることができる。以下に例を示す。

var radial = {type: "radial", cx: 0, cy: 100, r: 50,
colors: [{offset: 0, color: "red"}, {offset: 0.5, color: "green"}, {offset: 1, color: "blue"}]}
rectShape.setFill(radial);

var linear = {type: "linear", x1: 0, y1: 0, x2: 75, y2: 50,
colors: [{offset: 0, color: "#F60"}, {offset: 1, color: "#FF6"}]};
rectShape2.setFill(linear);

var pattern = {type: "pattern", x: 0, y: 0, width: 96, height: 96,
src: "http://dojotoolkit.org/img/viewcvs.png"}
rectShape3.setFill(pattern);

同じ色で塗りつぶすときは、文字列としてRGBまたは色名で色を指定する方法と、配列またはdojo.gfx.color.Colorオブジェクトで指定する方法とがある。配列またはdojo.gfx.color.Colorでは、RGBと透過率を指定する。

  • "#ddd"
  • "green"
  • [255, 0, 0, 0.5]
  • new dojo.gfx.color.Color([255, 0, 0, 0.5])

グラデーションをかけるときは、連想配列で設定値を指定する。連想配列のキー: "type"により、グラデーションの掛け方を指定できる。typeには、"radial": 放射状、"linear": 線形、"pattern": 格子状(?)の3つを指定できる(patternはうまく動作しなかった)。

var radial = {type: "radial", cx: 0, cy: 100, r: 50,
colors: [{offset: 0, color: "red"}, {offset: 0.5, color: "green"}, {offset: 1, color: "blue"}]}

var linear = {type: "linear", x1: 0, y1: 0, x2: 75, y2: 50,
colors: [{offset: 0, color: "#F60"}, {offset: 1, color: "#FF6"}]};

var pattern = {type: "pattern", x: 0, y: 0, width: 96, height: 96,
src: "http://dojotoolkit.org/img/viewcvs.png"}

Shape塗りつぶしのサンプル

枠の指定

setStrokeメソッドによりShapeオブジェクトの枠を指定できる。setStrokeメソッドの引数の連想配列で設定値を指定する。連想配列のキーとして、color: 枠の色, width: 枠の太さ, cap: 端の処理, join: 線の継ぎ目、の4つを指定できる。

capは、"round": 丸み、"butt": バット、"square": 四角、のいずれかを指定できる。capを指定しなかったときは"butt"となる。

joinは、"miter": 留め継ぎ/角、"round": 丸み、"bevel": 面取り、または数字、のいずれかを指定できる。joinを指定しなかったときは"miter"となる。数字を指定すると、つなぎ目の太さを指定できる。

rectShape.setStroke({color: [0, 0, 255, 0.5], width: 2, cap: "butt", join: 2})  

Shape枠のサンプル

移動/変形

setTransformメソッドにより、Shapeオブジェクトを移動/変形できる。setTransformメソッドの引数には、dojo.gfx.matrix.XXX メソッドを渡して、移動/変形方法を指定する。引数に配列を渡して、複数の変形方法を組み合わせることもできる。

rectShape.setTransform(dojo.gfx.matrix.rotategAt(45, 250, 250));

rectShape2.setTransform([dojo.gfx.matrix.translate(100,0), dojo.gfx.matrix.rotateg(-45)]);

以下にsetTransformの引数として指定できるメソッド一覧を示す。メソッド名の最後にgがあるときは、角度を度(degree)ではなくラジアン/弧度(radian)で指定する。 メソッド名の最後にAtがある場合は、変形(回転、縮尺変更、斜めのゆがみ)の中心点を指定できる。通常は原点(0, 0)が中心となる。

メソッド説明
dojo.gfx.matrix.translate(100,100) 位置の移動
dojo.gfx.matrix.scale(2, 1.5) X座標, Y座標の縮尺変換。引数が一つのみのときはX/Y軸を同じ縮尺で変換する
dojo.gfx.matrix.scaleAt(2, 1.5, 100, 50)  
dojo.gfx.matrix.rotate(0.17*3.14) 回転 (角度をラジアンで指定する)
dojo.gfx.matrix.rotateAt(0.17*3.14, 250, 50)  
dojo.gfx.matrix.rotateg(30) 回転 (角度を度で指定する)
dojo.gfx.matrix.rotategAt(30, 250, 50)  
dojo.gfx.matrix.skewX(0.17*3.14) X軸に対して斜めに歪める (角度をラジアンで指定する)
dojo.gfx.matrix.skewXAt(0.17*3.14, 250, 50)  
dojo.gfx.matrix.skewXg(30) X軸に対して斜めに歪める (角度を度で指定する)
dojo.gfx.matrix.skewXgAt(30, 250, 50)  
dojo.gfx.matrix.skewY(0.17*3.14) Y軸に対して斜めに歪める (角度をラジアンで指定する)
dojo.gfx.matrix.skewYAt(0.17*3.14, 250, 50)  
dojo.gfx.matrix.skewYg(30) Y軸に対して斜めに歪める (角度を度で指定する)
dojo.gfx.matrix.skewYgAt(30, 250, 50)  

移動/変形は、Shapeオブジェクト1つずつに対して指定するだけでなく、グループ化してからまとめて指定できる。グループ化するには、まずSurfaceオブジェクトに対してcreateGroup()を実行することでGroupオブジェクトを作成する。

var surface = dojo.gfx.createSurface("shapes", 400, 200);
var g1 = surface.createGroup();

作成したグループに対してShapeオブジェクトを登録するには、Groupオブジェクトのaddメソッドを用いるか、Groupオブジェクトに対して、createXXXメソッドを実行してShapeオブジェクトを作成する。

var rect = { x: 50, y: 50, width: 100, height: 70 };
var rectShape = surface.createRect(rect).setFill([0, 0, 255, 0.5]);

var circle = {cx: 250, cy: 160, r: 35}
var circleShape = surface.createCircle(circle).setStroke({color: "black", width: 2});

g1.add(rect);
g1.add(circleShape);
g1.setTransform(dojo.gfx.matrix.rotateAt(-45, 250, 250));

前面/背面に移動

Shapeオブジェクトの重ね合わせの順番を変えることができる。Shapeオブジェクトに対して、moveToFront()を指定すると前面に移動する。moveToBack()を指定すると背面に移動する。

rectShape.moveToFront();
rectShape2.moveToBack();

ベジェ曲線

ベジェ曲線を描くときは、Surfaceオブジェクトに対してcreatePathメソッドを 実行する。createPathの引数において、直線/曲線の描き方を指定する。

下記の例では、MはmoveTo (座標の移動)、LはlineTo (線を引く)を示している。 大文字で指定すると絶対座標、小文字で指定すると相対座標を示す。 指定の仕方はSVGにおけるpath要素のd属性値と同じである。

var surface = dojo.gfx.createSurface("shapes", 400, 200);
var pathShape = surface.createPath("M10,10 L200 80, l30,50");
pathShape.setStroke({color: "red", cap: "butt"});

直線/曲線の描き方は、createPathの引数として指定するだけでなく、Pathオブジェクト に対するメソッドにより指定することもできる。以下に上記と同じ線を描く例を示す。 setAbsoluteModeは、絶対位置(true または "absolute")/相対位置指定(false または "relative")を指定する。

var pathShape = surface.createPath();
pathShape.setStroke({color: "red", cap: "butt"});
pathShape.moveTo(10, 10);
pathShape.lineTo(200, 80);
pathShape.setAbsoluteMode(false);
pathShape.lineTo(30, 50);

直線/曲線の指定方法を以下に示す。

コンストラクタでの指定メソッド説明
m moveTo(10, 10) 移動
l lineTo(30, 50) 直線を引く
h hLineTo(100) 水平に線を引く
v vLineTo(100) 垂直に線を引く
c curveTo(300, 300, 200, 200, 100, 100) 3次ベジェ曲線を引く
s smoothCurveTo(300, 300, 100, 100) 滑らかな3次ベジェ曲線を引く
q qCurveTo(300, 300, 100, 100) 2次ベジェ曲線を引く
t qSmoothCurveTo(100, 100) 滑らかな2次ベジェ曲線を引く
a arcTo(25, 100, 15, true, true, 150, 125) 楕円の弧を引く
z closePath() Pathを閉じる

イベント割り当て

Shapeオブジェクトに対して、クリックやドラッグなどのイベントを割り当てることができる。イベントを割り当てるには、dojo.event.connectを用いる。dojo.event.connectの最初の引数となるHTML Nodeとして、Shapeオブジェクトのノード(getEventSource()またはgetNode()メソッドで得られる)を指定する。
var circle = {cx: 250, cy: 160, r: 35}
var circleShape = surface.createCircle(circle).setStroke({color: "black", width: 2});
...

dojo.event.connect(circleShape.getEventSource(), "onclick", "func1"});
setFillで塗りつぶしてないと枠のみがonclickに反応する。

« Collection | トップページ | Cookieへのデータ保存 »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/232684/6081863

この記事へのトラックバック一覧です: ドローイングAPI:

« Collection | トップページ | Cookieへのデータ保存 »