初めて学ぶCreateJS

矩形領域をぼかす ー BoxBlurFilter

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
フィルタはFilterオブジェクトを、インスタンスのDisplayObject.filtersプロパティにまず加え、DisplayObject.cache()メソッドを呼出します。
講師:
07:36

字幕

EaselJS の BoxBlurFilter を使って Bitmap にぼかしをかけてみます Bitmap が Canvas に表示されています クリックするとフィルタがかかるように 設定してあります クリックすると画像がぼけました この方法についてご説明します HTML ドキュメントを開いています フィルタを使うには まずフィルタのクラスを スクリプト要素で読み込んでおく必要があります これはすでに読み込んでありまして 使うのは BoxBlurFilter です そしてどのフィルタを使うにしても 基本的な機能 設定を含んだ filter.js というファイルも 読み込んでおく必要があります では確認した上で フィルタのかけ方についてご説明しましょう どのフィルタをかけるにしても フィルタをかける手順は2つです まずフィルタをかける オブジェクトを対象にして filters というプロパティがあります ここにフィルタのオブジェクトを設定します ただしフィルタというのは 複数組み合わせてかけられます ですからフィルタオブジェクトを 直接でなく配列に入れて 複数あればカンマ区切りで そのフィルタオブジェクトを複数指定して その配列を filters という プロパティに設定します これが第一ステップ 第二ステップは フィルタの効果を実際に そのオブジェクトに適用しなければなりません それが cache というメソッドです このメソッドの引数には フィルタをかける オブジェクト上の範囲を指定します 範囲というのは まず左上隅の xy 座標 そして幅と高さです 今回使うのは ぼかしの BoxBlurFilter です ですから BoxBlurFilter のオブジェクトを 作らなければいけません 作り方はお約束通り new 演算子で createjs.BoxBlurFilter です 引数は3つありまして ぼかしの程度ですね ぼかし幅 それを水平と垂直で定めます ぼかし品質というのは フィルタを重ねてかけることができます 1から3までの数字を指定します 数字を上げると フィルタがよりきめ細かくかかりますが その代わり負荷も上がります ですからできるだけ 低めにした方がいいでしょう HTML ドキュメントの JavaScript コードは 画像を読み込んで表示する PreloadJS を使っています まだフィルタはかけていません ざっと手順だけ確認しましょう stage を作ったら PreloadJS を使いますので そのインスタンスを作り load し終わったら onFileload のハンドラを定めます そして loadFile メソッドで 指定されたパスのファイルを読み込みます 一方で Bitmap のインスタンスを作り 位置を指定して stage の子どもとして Bitmap を加えます 読み込みが終わると ハンドラの draw 関数が 呼び出されて stage の描画が 更新されます では今現在の動作を確認しておきましょう ファイルメニューから ブラウザでプレビュー をします Canvas に画像が はっきりくっきり表示されました この後スクリプトを加えて この Bitmap インスタンスを クリックしたとき ぼかしがかかるようにします フィルタを加える JavaScript の コードを書き加えます クリックしたらフィルターをかけます ですからインスタンスに対して イベントは onClick ですね そしてハンドラはまだ書いていませんが setFilter にしましょう setFilter の function を定義します 間違いのないようにコピーを使いましょう では手順2つありましたね まずインスタンスの filters プロパティに対して― 配列でフィルタのオブジェクトを加えます 今回は BoxBlurFilter ちょっと長いですね new createjs. BoxBlurFilter そして指定するのは― ぼかし幅 まあ 2 位でいいでしょう 2 px です 水平垂直とも同じにします ではぼかしの品質は 間をとって 2 ということにします これだけではフィルタが かかりません フィルタをかけるというのが cache ですね cache メソッドです 全体にかけますので 左上隅から幅 高さこれが問題です 実は幅 高さは Bitmap に読み込まれた 画像の大きさから取ります ですからまず 画像の参照を取る必要があります myImage です Bitmap に読み込んだ画像というのは プロパティの image で参照が取れます ですからこの myImage を使って 画像全体の大きさ 具体的には幅と高さを― 調べることができます そして忘れてはいけないのが 描画の更新です 保存して確認してみましょう ファイルメニューから ブラウザでプレビュー します Canvas に画像が表示されました Bitmap のインスタンスですが これをクリックするとぼかしがかかります クリックします 無事ぼかしがかかりました フィルタの一般的な設定の仕方 2つのステップと 今回はぼかしフィルタ BoxBlurFilter を使ってみました JavaScript のコードを おさらいしておきましょう まず BoxBlurFilter のインスタンスを new 演算子で作ります 引数はぼかし幅の垂直 水平と垂直 それからぼかし品質で ぼかしの設定をします それを配列に入れて インスタンスの filters プロパティに設定します そして必ず cache でフィルタを適用します 適用の仕方は左上隅の xy 座標 それから幅と高さです そして stage の描画を更新すれば フィルタがかかります

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

3時間31分 (27 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年02月22日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。