2010/10/23

テキストなどに影や縁取りを付けた画像を生成

Imageオブジェクトに用意されている様々な機能を組み合わせれば、以下の例のようにテキストや図形に影をつけたり縁取りをするなどのエフェクトを加えて描画することも可能です。

この例の画像を生成するスクリプトは、以下のようになります。
var {Image}=require('Image');
var base=Image.create(200,64);
base.drawText("NILScript",0,0,{name:"Impact",size:48,brush:{
    color:[0xFF0000,0x990000],
    gradient:{angle:Math.PI/2, width:60},
    gammaCorrect:true,
    focus:0.9,
    curve:true,
}});

var frame=base.clone();
frame.and(0xFF000000);
frame.matrixFilter([[1,1,1],[1,1,1],[1,1,1]]);
frame.matrixFilter([[1,1,1],[1,1,1],[1,1,1]]);
frame.replaceColor("black","yellow");

var shadow=frame.clone();
shadow.and(0xFF000000);
shadow.blur(3);

var img=Image.create(200,64,"white");
img.drawImage(shadow,{x:4,y:4});
img.drawImage(frame);
img.drawImage(base);

img.save("logo.jpg",{quality:90});
まず、最初に背景無しでImageオブジェクトを生成し、グラデーションブラシを用いてテキストを描画しています。
ブラシの定義オプションには様々なものがあるので、NILScriptのアーカイブ内のdoc/Image.txtの説明を参照してください。

次に、clone()メソッドでテキスト画像のコピーを生成し、and()メソッドでアルファチャンネル以外の値を0にします。
続いて、matrixFilter()メソッドを利用して不透明の領域を太らせます。
matrixFilter()は、各ピクセルと隣接ピクセルのRGBA各値に引数で指定した2次元配列の対応する値を掛けた値の和をそのピクセルの値にするという処理を行います。この時、0未満の値は0に、256以上の値は255になります。
「[[1,1,1],[1,1,1],[1,1,1]]」という配列では、隣接する9ピクセルに一つでも不透明度255のピクセルがあれば不透明度が255になります。

更に、replaceColor()メソッドで色の置換を行います。
この時点では、不透明度255の黒と不透明度0の黒の2つの部分がありますが、第1引数を"black"にした場合は、不透明度255の黒のみが置換されます。
単色ではなくグラデーションなどを使いたい場合は、そのスタイルで塗りつぶした画像にupdateAlpha()メソッドでアルファチャンネルをコピーすると良いでしょう。

次に、出来上がった縁取り部分のコピーを生成し、同様にして全体を黒にした後、blur()メソッドでぼかして、影っぽい画像を生成します。

最後に、白背景の画像を生成し、影を少しずらして貼り付けた後、縁取りと元のテキストを貼り付けて完成です。

0 件のコメント:

コメントを投稿