EaselJSに新たに加えられたマスク機能 [Edit]
投稿者：野中 文雄 | 投稿日：2012.09.10 | [CreateJS][HTML5][野中ゼミ]CreateJS Suiteの新バージョンが、先月公開されました。EaselJS 0.5.0にはマスク機能が加わっています。新しいプロパティは、Flashと同じ名前のDisplayObject.maskです。もっとも、Flashとは勝手の違うところもあります。ポイントを簡単にご紹介しましょう。
DisplayObject.maskプロパティにはShapeオブジェクトを定める
EaselJSのDisplayObject.maskプロパティに設定できるのはShapeオブジェクトだけです。マスクするShapeオブジェクトのクリッピングパスで、DisplayObjectインスタンスが抜かれます。
DisplayObjectオブジェクト.mask = Shapeオブジェクト
マスクするShapeオブジェクトはそのままでは消えない
DisplayObject.maskプロパティに定めたShapeオブジェクトは、Flashと違って自動的に消えません。したがって、オブジェクトはつぎのようにして隠します。
- 表示リストに加えない。
- 非表示(DisplayObject.visibleプロパティをfalse)にする。
- アルファ(DisplayObject.alphaプロパティ)を0にする。
サンプルコード
「EaselJSでインスタンスにマスクをかける」サンプルコードの解説を書きました。画像のBitmapインスタンスにかけたマスクをアニメーションさせる例です。詳しくはこのノートをお読みください。
