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": 格子状(?)の３つを指定できる(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オブジェクト１つずつに対して指定するだけでなく、グループ化してからまとめて指定できる。グループ化するには、まず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) |
３次ベジェ曲線を引く |
| s |
smoothCurveTo(300, 300, 100, 100) |
滑らかな３次ベジェ曲線を引く |
| q |
qCurveTo(300, 300, 100, 100) |
２次ベジェ曲線を引く |
| t |
qSmoothCurveTo(100, 100) |
滑らかな２次ベジェ曲線を引く |
| 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に反応する。
