EaselJSに新たに加えられたマスク機能 [Edit]

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インスタンスにかけたマスクをアニメーションさせる例です。詳しくはこのノートをお読みください。

コメント

この記事にコメントを書く

記事に対するテクニカルな質問はご遠慮ください(利用規約)。

その他の記事