DisplayObjectインスタンスに適用するFilterオブジェクトを納めた配列。フィルタの効果を得るには、インスタンスに対してDisplayObject.cache()あるいはDisplayObject.updateCache()メソッドを呼出さなければならない。フィルタはキャッシュに定めた領域の中だけにかかる。scale)概要DisplayObjectインスタンスを新たなCanvasに描き、時系列で続く描画にもそのイメージを用いる。すると、動かない子インスタンスをたくさんもつ親インスタンスや込入ったShapeオブジェクトなど、変化の少ない複雑なコンテンツは素速く描ける。tickイベントのたびにコンテンツを描き直さなくて済むためである。キャッシュしたDisplayObjectインスタンスは、移動したり回転したり、フェードイン・アウトもできる。中身が変わったときは、DisplayObject.cache()あるいはDisplayObject.updateCache()メソッドを呼出して描き直さなければならない。キャッシュする領域は、左上角のxy座標および幅と高さで定める。この矩形領域の座標は、参照するDisplayObjectインスタンスにもとづく。キャッシュ領域の左端標値。キャッシュ領域の上端標値。キャッシュ領域の高さ。キャッシュ領域の拡大・縮小率。カラー行列変換のColorMatrixFilterインスタンスをつくる。カラー変換行列を示すColorMatrixオブジェクトまたは行列の20成分を数値エレメントとして納めた配列。カラー変換行列を示すColorMatrixインスタンスをつくる。ColorMatrixFilterオブジェクトにカラー変換を定めるために使える。明度を示す-255から255までの数値。RGBすべてに256階調のカラー値が加算(減算)される。-255は黒(0x000000)、255は白(0xFFFFFF)ですべてのピクセルを塗りつぶすことになる。コントラストを示す-100から100までの数値。正数はコントラストを高め、負数は低める。彩度を示す-100から100までの数値。正数はコントラストを高め、負数は低める。色相を示す-180から180までの角度。説明フィルタはFilterオブジェクトを、まずDisplayObjectインスタンスのDisplayObject.filtersプロパティに配列で定め、そのエレメントにFilterオブジェクトを加えます。つぎに、フィルタの効果を得るには、インスタンスに対してDisplayObject.cache()メソッドを呼出さなければなりません。引数には、xy座標と幅および高さの矩形領域の情報を与えます。高さ);DisplayObject.filtersプロパティを配列にしたのは、複数のフィルタが重ねてかけられる仕組みにするためです。フィルタの効果をなくすには、プロパティに空の配列を設定します。[];インスタンスのカラーをピクセルごとに処理するのがColorMatrixFilterオブジェクトです。コンストラクタの引数にColorMatrixオブジェクトを用いれば、明度・コントラスト・彩度・色相の4つを決めてカラーが操作できます。インスタンスのカラーをピクセルごとに処理するのがColorMatrixFilterオブジェクトです。コンストラクタの引数にはカラー変換行列を渡します。4行×5列のカラー変換行列は、20エレメントの数値が納められた行列で定めることができます。ひとつのやり方として、ColorMatrixオブジェクトを用いれば、明度・コントラスト・彩度・色相の4つの数値でカラーが決められます。ColorMatrixFilter(カラー変換行列)ColorMatrix()コンストラクタには、明度・コントラスト・彩度・色相の4つの数値を引数として渡します。明度は±255の256階調、コントラストと彩度は±100のパーセンテージ、色相は±180の度数の範囲でそれぞれ定めます。外部画像ファイルをBitmapインスタンスに読込んでCanvasに置き、そのカラーイメージをColorMatrixFilterでセピア調に変えてみます(図001)。外部画像ファイルの読込み方については、「PreloadJSで外部画像ファイルの読込みを待つ」をお読みください。→セピア調にカラー変換したイメージまず、script要素でクラスFilterとColorMatrixFilterおよびColorMatrixを読込んでおきます[*1]。行番号は後でscript要素全体を掲げるコード001にもとづきます。src="easeljs/filters/ColorMatrix.js"></script>DisplayObject.filtersプロパティに定めるフィルタの配列は、予め変数(filtersList)に入れておきます(第22行目)。初期化の関数(initialize())で、フィルタとしてColorMatrixFilterオブジェクトを加えます。引数のカラー変換行列はColorMatrixオブジェクトで与え、明度50、色相-150度とします(第30行目)。Bitmapインスタンスへのフィルタの設定は、AbstractLoader.onFileLoadイベントのハンドラで行います(第28行目)。-150)));}画像が読込み終わると呼出されるハンドラ(draw())は、フィルタ設定の関数(setFilter())を呼出します(第43行目)。引数は画像が読込まれたBitmapインスタンスとブール(論理)値です。第2引数がtrueなら、インスタンスのDisplayObject.filtersプロパティにフィルタとしてColorMatrixFilterを適用します(第48〜49行目)。この引数にfalseが渡されると、フィルタを解除します(第51行目)。DisplayObject.cache()メソッドの呼出しにより、フィルタがかかったイメージをキャッシュします(第53行目)。myImage.height);}これでBitmapインスタンスに読込まれた画像のカラーイメージが、セピア調に変わります(前掲図001参照)。でき上がったscript要素全体は、つぎのコード001のとおりです。myImage.height);}</script>ColorMatrixFilter()コンストラクタには引数のカラー変換行列を配列で渡すことができます。4行×5列の行列で表される各数値を、第1行目から順につなげて20エレメントの配列にするのです。セピア調にカラー変換する行列はつぎのとおりです。0前掲コード001でColorMatrixFilter()コンストラクタの引数にColorMatrixオブジェクトでなく、このカラー変換行列を配列で渡すように書替えると、つぎのようになります。カラーイメージも、よりセピア調の雰囲気が増します(図002)。Suiteのすべてのクラスに名前空間としてcreatejsが加わることになりました。前掲コード001では、これまでと同じスクリプトで動くように、つぎのようなscript要素に加えたJavaScriptで名前空間を省いています(第1〜3行目)。Suiteのクラスに名前空間が設定される」をお読みください。window;</script>前述のカラー変換行列を配列で定める場合について、ご参考までに名前空間createjsを加えたscript要素全体は、つぎのコード002のようになります。コンストラクタを始めとするクラスすべてに、名前空間createjsを添えます。EaselJSライブラリのコンパクト(min)版JSファイル(図003)は、ライブラリのほぼすべてのクラスがひとつのファイルに凝縮されています(「EaselJSライブラリの短縮版JSファイルについて」参照)。このJSファイルにはフィルタのクラス(filtersフォルダ)は含まれません。したがって、コンパクト版のJSファイルを読込んだ場合であっても、用いるフィルタのクラスは別にscript要素で加えてください。図003■libフォルダに納められたEaselJSライブラリのコンパクト版JavaScriptファイルコンパクト版がフィルタのクラスを含まないのは、EaselJSライブラリのファイルサイズを小さく抑えるためです。easeljs-0.5.0.min.js」参照)。数学解説カラー変換行列は、4行×5列の数学の行列で表されます。行列の中の各数値は「成分」と呼ばれ、文字で表すときは行番号と列番号を添える(aij)のが一般です。a')は行列の成分をつぎのように用いた式で求められます。a45もっとも、カラー変換行列の考え方を知るにはもう少し簡略化して、RGBカラーに関わる3行×3列の正方行列(行数と列数が等しい行列)の演算を理解すればよいでしょう。RGBカラーを3次の列ベクトルとすると、行列によるカラー変換はつぎのように、カラー変換行列と変換もとカラーの列ベクトルとの積として表されます。a33×b計算式を確かめたところで、変換行列がRGBカラーをどう変えるのか、具体的な例で考えましょう。対角成分が1であとの成分が0の行列は「単位行列」と呼ばれます。RGBカラーの列ベクトルを乗じても、変換したベクトル成分のRGBカラー値はもとのまま変わりません。bつぎに、グレースケールに変換する場合を考えてみます。もと画像のr成分からです。カラー変換行列の第1列目は、もと画像のRカラー値を変換後のRGBにどう配分するか示していると捉えることができます。グレースケールにするには、3つの比率を等しくします。仮に1/3ずつとしておきます。残るふたつのカラーも同じように考えて、9成分すべて1/3にすれば、グレースケールに変換されます。3もっとも、全成分を1/3として変換したグレースケールのイメージをもと画像と比べてみると、階調のバランスがよくありません。それは、同じカラー値でも、緑は明るめに、青は暗めに見えるからです。したがって、緑のカラー値は少し高くし、青のカラー値は抑えた方がよいのです。NTSCの規格では、つぎのような成分値になります。0.114478RGBカラーの変換行列にアルファを加えてRGBAにすると、4行×4列の正方行列になります。値を変換する計算の考え方は、これまでご説明したRGBカラーと変わりません。ColorMatrixFilterクラスで用いる4行×5列のカラー変換行列における第5列目は違います。正方行列による演算は、RGB(A)ベクトルとの乗算です。すると、もと画像のカラーが黒(0x0)のときは、0に何を掛けても0ですから、値の変えようがありません。そこで第5列を増やして、加算(あるいは減算)する成分としたのです。