6章グラフィックス機能

著者:梅谷武
語句:FormedText, グラフィックス機能

FormedTextのグラフィックス機能について

作成:2006-06-27
更新:2013-09-19

6.1 グラフィックス機能

6.1.1 概要

FormedTextにはHTML5で規定されているSVGを使ったグラフィックス機能が実装されている。

6.1.2 グラフィックス命令

属性

グラフィックス記述は、¥graphicsタグ内にグラフィック命令を書くことによって行なう。¥graphicsタグにはwidth, height, timeoutという三つの属性を指定することができる。これらはそれぞれ、描画領域の幅[pixel]、高さ[pixel]、アニメーションの描画間隔[msec]を意味している。

¥graphics{width:height[:timeout]}

属性名	属性の意味
width	描画領域の幅[pixel]
height	描画領域の高さ[pixel]
timeout	描画間隔[msec](1～10000,default=1000)

構文

グラフィック命令は、

コマンド:引数1,…,引数n;

という構文で記述する。

Pen

Pen:太さ[pixel],色[=#rrggbb];

ペンの太さ[pixel]と色[RGB16進表現]を指定する。太さが0のときは点線になる。

drawLine

drawLine:X1,Y1,X2,Y2;

描画領域の座標(X1,Y1)から(X2,Y2)までの線を引く。描画領域の座標は画面左上を原点とし、右方向がX座標、下方向がY座標である。座標値はpixelを表わす。

¥graphics[200,60]{
Pen:0,#000000; drawLine:10,10,190,10;
Pen:1,#000000; drawLine:10,20,190,20;
Pen:1,#ff0000; drawLine:10,30,190,30;
Pen:2,#00ff00; drawLine:10,40,190,40;
Pen:3,#0000ff; drawLine:10,50,190,50;
}

drawRect

drawRect:X,Y,width,height;

描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形を描く。

¥graphics[200,200]{
Pen:1,#0000ff; drawRect:50,50,100,100;
}

fillRect

fillRect:X,Y,width,height;

描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形を描き、その内部を塗りつぶす。

¥graphics[200,200]{
Pen:1,#0000ff; fillRect:50,50,100,100;
}

drawEllipse

drawEllipse:X,Y,width,height;

描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形に内接する楕円を描く。

¥graphics[200,200]{
Pen:1,#00ff00; drawEllipse:50,75,100,50;
}

fillEllipse

fillEllipse:X,Y,width,height;

描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形に内接する楕円を描き、その内部を塗りつぶす。

¥graphics[200,200]{
Pen:1,#00ff00; fillEllipse:50,75,100,50;
}

drawPolyline

drawPolyline:X1,Y1,…,Xn,Yn;

描画領域の座標(X1,Y1)から(Xn,Yn)までの折れ線を引く。

¥graphics[200,100]{
Pen:1,#ff0000; drawPolyline:60,10,80,90,100,50,120,90,140,10
}

drawPolygon

drawPolygon:X1,Y1,…,Xn,Yn;

描画領域の座標(X1,Y1)から(Xn,Yn)までの多角形を描く。最初と最後の座標を線分で結ぶ。

¥graphics[200,100]{
Pen:1,#ff0000; drawPolygon:60,10,80,90,100,50,120,90,140,10
}

fillPolygon

fillPolygon:X1,Y1,…,Xn,Yn;

描画領域の座標(X1,Y1)から(Xn,Yn)までの多角形を描き、その内部を塗りつぶす。最初と最後の座標を線分で結ぶ。

¥graphics[200,100]{
Pen:1,#ff0000; fillPolygon:60,10,80,90,100,50,120,90,140,10
}

drawArc

drawArc:X,Y,R,start,end;

描画領域の中心座標(X,Y)、半径Rの円周上、開始角start[度]から終了角end[度]までの弧を描く。この命令にはペンの太さの指定は無効である。つねに太さ1[pixel]の弧を描く。他の線と区別したい場合は色指定による。

¥graphics[200,200]{
Pen:1,#000000; drawPolygon:100,43,50,130,150,130;
Pen:1,#0000ff;
drawArc:50,130,10,300,360; drawArc:50,130,13,300,360;
}

Font

Font:font-family,size,style;

フォントを指定する。font-familyとsizeはCSSでの指定と同じ。styleはFont.PLAIN/Font.BOLD/Font.ITALIC/Font.ITALIC_BOLDのいずれかを指定する。

drawString

drawString:text,X,Y;

描画領域の座標(X,Y)からtextで指定した文字列を描画する。

¥graphics[200,50]{
Font:verdana,16px,Font.PLAIN; 
drawString:drawStringによる描画,10,10;
}

drawImage

drawImage:画像URL,X,Y,width,height;

描画領域の座標(X,Y)から幅がwidth、高さがheightの領域に指定URLの画像を描画する。注意すべきことはURLの先頭に"http://"が付く場合、グラフィック命令の構文としてエラーになることである。このエラーを回避するためにURL中の"http://"の代わりに"$"を書かなければならない。

¥graphics[400,200]{
drawImage:images/20060223-test.png,10,5,379,190;
}

clear

clear:0;

描画領域をクリアする。アニメーションで使用する。

6.1.3 アニメーション

構文

アニメーションは一コマの絵を描画するグラフィック命令列を"@"で区切ることによって行なう。

グラフィック命令列 @
グラフィック命令列 @
グラフィック命令列

という構文で記述します。描画する時間間隔はtimeout属性で指定します。

描画は描画領域をマウスでクリックしたときに行なわれる。なお、アニメーション機能はそのページの大域変数であるタイマーを利用するので、1ページに一つしか書けない。

¥graphics[200,100]{
Pen:1,#ff0000; drawLine:10,10,190,10; @
Pen:2,#00ff00; drawLine:10,20,190,20; @
Pen:3,#0000ff; drawLine:10,30,190,30; @
clear:0;
Pen:1,#ff0000; drawPolyline:60,10,80,90,100,50,120,90,140,10 @
Pen:1,#ff0000; drawPolygon:60,10,80,90,100,50,120,90,140,10 @
Pen:1,#ff0000; fillPolygon:60,10,80,90,100,50,120,90,140,10
}

梅谷武『FormedText』はクリエイティブ・コモンズ表示 3.0 非移植ライセンスで利用できます。