Improved the filters example.

Signed-off-by: Grant Skinner <info@gskinner.com>
dahabit · Nov 26, 2011 · 78fec9f · 78fec9f
1 parent 8879b0d
commit 78fec9f
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 27 deletions.
diff --git a/examples/filters.html b/examples/filters.html
@@ -12,11 +12,10 @@
 <script src="../src/easeljs/geom/Rectangle.js"></script>
 <script src="../src/easeljs/events/MouseEvent.js"></script>
 <script src="../src/easeljs/utils/SpriteSheetUtils.js"></script>
-<script src="../src/easeljs/display/Graphics.js"></script>
 <script src="../src/easeljs/display/DisplayObject.js"></script>
 <script src="../src/easeljs/display/Container.js"></script>
 <script src="../src/easeljs/display/Stage.js"></script>
-<script src="../src/easeljs/display/Shape.js"></script>
+<script src="../src/easeljs/display/Bitmap.js"></script>
 <script src="../src/easeljs/utils/Ticker.js"></script>
 <script src="../src/easeljs/filters/Filter.js"></script>
 <script src="../src/easeljs/filters/ColorFilter.js"></script>
@@ -26,39 +25,56 @@
 
 <script>
 
-	/**
-	 * TODO: This file will be converted to a proper demo before v0.4 release.
-	 */
-
+var img;
 function init() {
+	//wait for the image to load
+	img = new Image();
+	img.onload = handleImageLoad;
+	img.src = "img/photo.jpg";
+}
+
+function handleImageLoad() {
 	//find canvas and load images, wait for last image to load
 	var canvas = document.getElementById("testCanvas");
 
 	// create a new stage and point it at our canvas:
 	stage = new Stage(canvas);
 
-	var blurFilter = new BoxBlurFilter(16, 8, 2);
+
+	var bmp = new Bitmap(img);
+	bmp.x = (canvas.width-2*img.width)/3;
+	bmp.y = (canvas.height-2*img.height)/3;
+	stage.addChild(bmp);
+
+
+	var blurFilter = new BoxBlurFilter(32, 2, 2);
 	var margins = blurFilter.getBounds();
+	bmp = bmp.clone();
+	bmp.filters = [blurFilter];
+	bmp.cache(margins.x,margins.y,img.width+margins.width,img.height+margins.height);
+	bmp.x += bmp.x+img.width;
+	stage.addChild(bmp);
 
-	var shape = new Shape();
-	shape.graphics.setStrokeStyle(4).beginStroke("#FFFFFF").beginFill("#666").drawRect(0,0,100,100);
-	shape.x = shape.y = 50;
-	shape.filters = [new ColorFilter(0,1,1,1,0,0,0,0),blurFilter];
-	shape.cache(margins.x,margins.y,100+margins.width,100+margins.height);
-	stage.addChild(shape);
-
-	var a = 0.33;
-	var mtx = [a,a,a,0,0,
-			   a,a,a,0,0,
-			   a,a,a,0,0,
-			   0,0,0,1,0];
-	shape = new Shape();
-	shape.graphics.beginStroke("#FF0").beginFill("#0F0").drawRect(0,0,100,100);
-	shape.x = 200;
-	shape.y = 50;
-	shape.filters = [new ColorMatrixFilter(mtx)];
-	shape.cache(-2,-2,104,104);
-	stage.addChild(shape);
+
+	var greyScaleFilter = new ColorMatrixFilter([
+		0.33,0.33,0.33,0,0, // red
+		0.33,0.33,0.33,0,0, // green
+		0.33,0.33,0.33,0,0, // blue
+		0,0,0,1,0  // alpha
+	]);
+	bmp = bmp.clone();
+	bmp.filters = [greyScaleFilter];
+	bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
+	bmp.y += bmp.y+img.height;
+	stage.addChild(bmp);
+
+
+	var removeRedFilter = new ColorFilter(0,1,1,1); // red, green, blue, alpha
+	bmp = bmp.clone();
+	bmp.filters = [removeRedFilter];
+	bmp.cache(0,0,img.width,img.height); // color filters don't change the bounds.
+	bmp.x = (canvas.width-2*img.width)/3;
+	stage.addChild(bmp);
 
 	// we want to do some work before we update the canvas,
 	// otherwise we could use Ticker.addListener(stage);
@@ -70,7 +86,7 @@
 
 <body onload="init();">
 	<div class="description">
-	Demonstrates using filters.
+	Demonstrates using filters. Top-left: original. Top-right: BoxBlurFilter. Bottom-left: ColorFilter. Bottom-right: ColorMatrixFilter.
 	</div>
 	<div class="canvasHolder">
 		<canvas id="testCanvas" width="980" height="580"></canvas>

diff --git a/examples/img/photo.jpg b/examples/img/photo.jpg