JavaScript
- ステージのインスタンスを作成
- ビットマップのインスタンスを作成
- ステージにビットマップを配置
- ビットマップにフィルターに配列を渡す(配列の要素はフィルターのインスタンス)
という感じです。
(function(win, doc) { "use strict"; var brightness = 0, contrast = 0, saturation = 0, hue = 0, blur = 0, filter; loadImage(); function loadImage() { var queue = new createjs.LoadQueue(false), manifest = [ { id : "img", src : "http://jsrun.it/assets/S/d/o/2/Sdo2p.jpeg" } ]; // 第2引数はロードを始めるか否か queue.loadManifest(manifest, true); // すべて読み込みが終わったタイミングで発火 queue.on("complete", handleComplete); function handleLoad(evt) { // 読み込みが完了した画像 // console.log(evt.item); } function handleComplete(evt) { var canvas = doc.getElementById("canvas"), // ステージを作成 stage = new createjs.Stage(canvas), // ビットマップを作成 bitmap = new createjs.Bitmap(queue.getResult("img")); // ステージのサイズを設定 stage.canvas.width = window.innerWidth; stage.canvas.height = window.innerHeight; // bitmap.scaleX = bitmap.scaleY = 0.5; bitmap.filters = [ new createjs.ColorMatrixFilter(new createjs.ColorMatrix(brightness, contrast, saturation, hue)) // new createjs.BlurFilter(15, 15, 2) ]; bitmap.cache(0, 0, bitmap.getBounds().width, bitmap.getBounds().width); // ステージにビットマップを配置 stage.addChild(bitmap); // FPSを設定 createjs.Ticker.setFPS(5); createjs.Ticker.addEventListener("tick", function() { brightness = doc.getElementById("brightness").value; contrast = doc.getElementById("contrast").value; saturation = doc.getElementById("saturation").value; hue = doc.getElementById("hue").value; blur = doc.getElementById("blur").value; filter = [new createjs.ColorMatrixFilter(new createjs.ColorMatrix(brightness, contrast, saturation, hue))]; if (blur) { filter.push(new createjs.BlurFilter(blur, blur, 1)); } bitmap.filters = filter; bitmap.cache(0, 0, bitmap.getBounds().width, bitmap.getBounds().width); // ステージにビットマップを配置 stage.addChild(bitmap); stage.update(); }); } } })(this, document);