6章 グラフィックス機能
著者:梅谷 武
語句:FormedText, グラフィックス機能
FormedTextのグラフィックス機能について
作成:2006-06-27
更新:2013-09-19
 FormedTextにはHTML5で規定されているSVGを使ったグラフィックス機能が実装されている。
 グラフィックス記述は、¥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: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:X,Y,width,height;
 描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形を描く。
¥graphics[200,200]{
Pen:1,#0000ff; drawRect:50,50,100,100;
}
fillRect:X,Y,width,height;
 描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形を描き、その内部を塗りつぶす。
¥graphics[200,200]{
Pen:1,#0000ff; fillRect:50,50,100,100;
}
drawEllipse:X,Y,width,height;
 描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形に内接する楕円を描く。
¥graphics[200,200]{
Pen:1,#00ff00; drawEllipse:50,75,100,50;
}
fillEllipse:X,Y,width,height;
 描画領域の座標(X,Y)から幅がwidth、高さがheightの長方形に内接する楕円を描き、その内部を塗りつぶす。
¥graphics[200,200]{
Pen:1,#00ff00; fillEllipse:50,75,100,50;
}
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: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: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: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-family,size,style;
 フォントを指定する。font-familyとsizeはCSSでの指定と同じ。styleはFont.PLAIN/Font.BOLD/Font.ITALIC/Font.ITALIC_BOLDのいずれかを指定する。
drawString:text,X,Y;
 描画領域の座標(X,Y)からtextで指定した文字列を描画する。
¥graphics[200,50]{
Font:verdana,16px,Font.PLAIN; 
drawString:drawStringによる描画,10,10;
}
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:0;
 描画領域をクリアする。アニメーションで使用する。
 アニメーションは一コマの絵を描画するグラフィック命令列を"@"で区切ることによって行なう。
グラフィック命令列 @
グラフィック命令列 @
グラフィック命令列
という構文で記述します。描画する時間間隔は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 非移植 ライセンスで利用できます。