Download DropShadowFilter for EaselJS

ソースはGitHubからダウンロードして下さい。GitHubページ右側のDownload ZIPボタンで、zipでもダウンロードできます。libフォルダに圧縮版を置いてありますが、filters-for-easeljs-x.x.x.min.jsは、すべてのフィルターを入れているので、個々のフィルターだけを使用したい場合は、フィルター名.min.jsを使用して下さい。

• GitHub
• Sample
• API Documentation

DropShadowFilterの使い方

DropShadowFilterの基本的な使い方を確認してみましょう。まず、DropShadowFilterのコンストラクタに下記の引数を指定し、インスタンスを生成します。コンストラクタの引数は、ActionScript3.0のDropShadowFilterに合わせていますが、デフォルト値が若干異なるので、ご注意下さい。

distance

シャドウのオフセット距離をピクセル単位で指定します。デフォルト値は4です。

angle

シャドウの角度を0〜360度（Degree）で指定します。デフォルト値は45度です。

color

シャドウのカラー値を0xRRGGBB形式の16進数値で指定します。デフォルト値は、0x000000です。

alpha

シャドウのアルファ透明度を0〜1の数値で指定します。デフォルト値は1です。

blurX

シャドウの水平方向のぼかし量を指定します。デフォルト値は0です。

blurY

シャドウの垂直方向のぼかし量を指定します。デフォルト値は0です。

strength

シャドウの強さを0〜255の数値で指定します。デフォルト値は1です。この値は大きいほど処理負荷が高くなるため、小さい値を推奨します。

quality

シャドウのぼかし処理の回数を指定します。デフォルト値は1です。

inner

内側のシャドウであるかをBool値で指定します。デフォルト値はfalseで外側のドロップシャドウです。

knockout

ノックアウト効果を適用するかをBool値で指定します。デフォルト値はfalseでノックアウト効果なしです。

hideObject

オブジェクトを非表示にするかをBool値で指定します。trueを指定するとオブジェクトは表示されず、シャドウだけが表示されます。デフォルト値はfalseです。

DropShadowFilterインスタンスを生成したら、DisplayObjectのfiltersプロパティに配列で指定して、cacheメソッドをコールします。これで、DisplayObjectにドロップシャドウが適用されます。下記の例では、EaselJSのTextインスタンスにDropShadowFilterを適用しています。

JavaScript

_text = new createjs.Text("DropShadowFilter", "bold 64px Arial", "#CC0000");
_text.set({x:centerX, y:centerY, textAlign:"center", textBaseline:"middle"});
var distance = 3;
var angle = 90;
var color = 0x000000;
var alpha = 0.5;
var blurX = 4;
var blurY = 4;
var strength = 1;
var quality = 2;
var inner = false;
var knockout = false;
var hideObject = false;
_dropShadowFilter = new createjs.DropShadowFilter(distance, angle, color, alpha, blurX, blurY, strength, quality, inner, knockout, hideObject);
_text.filters = [_dropShadowFilter];
var bounds = _text.getBounds();
_text.cache(bounds.x, bounds.y - 2, bounds.width, bounds.height + 2);
_stage.addChild(_text);

• Sample