2010/10/21

画像にテキストを描画する

NILScriptのImageユニットでは、下記のようにdrawText()メソッドを使用することで、画像上に文字列を書き込むことも出来ます。
var {Image}=require('Image');
var img=Image.create(256,256,"white");

m=img.measureText("NILScript");
img.strokeRect(15,15,m.width+2,m.height+2,"black");
img.drawText("NILScript",16,16);
img.drawText("NILScript",0,64,{name:"Impact",size:48,color:"red",bold:true});
img.drawText('NILScript',0,160,{file :'D:\\myfonts\\AoyagiKouzanFont2.ttf' , size:48});

img.save("drawText.jpg",{quality:90});
単に文字列を表示したいだけなら、文字列と描画開始位置のx,y座標を指定するだけです。この場合、デフォルトのフォント、サイズ、色で描画されます。

第4引数には、様々なオプションを格納したオブジェクトを指定できます。
「name」でフォント名、「size」でピクセル数、colorで塗りつぶし色が指定できます。
また、「file」でフォントファイル名を指定すれば、システムにインストールされていないフォントも使用できます。

実際に描画される文字列の大きさを知りたい場合には、measureText()メソッドを使用します。このメソッドは、第1引数に文字列、第2引数にオプションを指定します。drawText()と違い、x,y座標は指定しません。
このメソッドの返り値は、widthやheightなどのプロパティを持つオブジェクトになります。これは単なるオブジェクトなので、解放処理は不要です。
この情報を利用すれば、テキストの周りにstrokeRect()などで枠を描画したりすることも可能です。

上記の例を実行すると、以下のような画像が出来上がります。

0 件のコメント:

コメントを投稿