Capturing BitmapData of a Single Blurred Display Object is Annoying
I feel like I'm going crazy here. I have a circle inside a MovieClip. The (x,y) position of the circle inside the MovieClip is (0,0). I'm applying a BlurFilter to the MovieClip the circle is in. I'd like to create some BitmapData based on the filtered MovieClip. Here's my code.
var blur:BlurFilter = new BlurFilter( 20, 20 ); circle2.filters = [blur]; var bd:BitmapData = new BitmapData( circle2.width + blur.blurX, circle2.height + blur.blurY, true, 0x00FFFFFF ); var clipRect:Rectangle = bd.generateFilterRect( circle2.getRect( null ), blur ); trace( clipRect ); // (x=-10, y=-10, w=70, h=70) bd.draw( circle2, null, null, null, clipRect ); var bm:Bitmap = new Bitmap( bd ); bm.x = 385; bm.y = 31; addChild( bm );
And here's the result:
I'd like to think that using the clipRect that's returned from the bd.generateFilterRect() method in the bd.draw() method would properly define the capture area of the MovieClip, but it always gets cropped wrong. Am I crazy? I really feel like this should work. I've fiddle around with the values and I still can't seem to get it to work.
The only work around I was able to come up with was to put the circle MovieClip in a container and adjust the X and Y position of the container based on the blurX and blurY values, but that just seems annoying to have to do!
Any suggestions?
Update!
Thanks to Dan (see comment below) to letting me know whats up. I was a total moron. I tend to shy away from Matrix objects because I'm scared of them (only becase I don't know how to use them). Works like a charm now. Check it:
April 7th, 2010 - 05:17
Hi,
How about using a matrix instead:
var blur:BlurFilter = new BlurFilter( 20, 20 );
circle2.filters = [blur];
var bd:BitmapData = new BitmapData( circle2.width + blur.blurX,
circle2.height + blur.blurY, true, 0x00FFFFFF );
// translate by half of the blur’s size:
var matrix :Matrix = new Matrix( 1 , 0 , 0 , 1 , blur.blurX * 0.5 , blur.blurY * 0.5 );
bd.draw( circle2 , matrix );
var bm:Bitmap = new Bitmap( bd );
bm.x = 385;
bm.y = 31;
addChild( bm );
Best, Dan
April 7th, 2010 - 11:36
I guess flash.geom.Matrix is the answer
package {
import flash.display.Sprite;
import flash.events.Event;
import flash.filters.BlurFilter
import flash.display.BitmapData
import flash.display.Bitmap
import flash.geom.Matrix;
import flash.geom.Rectangle
//
public class Main extends Sprite {
private var circleIstance:Sprite = new Sprite()
private var blur:BlurFilter = new BlurFilter( 10, 10 );
public function Main():void {
if (stage) init();
else addEventListener(Event.ADDED_TO_STAGE, init);
}
private function init(e:Event = null):void {
removeEventListener(Event.ADDED_TO_STAGE, init);
//
circleIstance.graphics.beginFill(0xAACCFF)
circleIstance.graphics.drawCircle(20, 20, 20)
circleIstance.x = 50; circleIstance.y = 50
circleIstance.filters = [blur];
//
addChild(circleIstance)
//
var bd:BitmapData = new BitmapData( circleIstance.x+circleIstance.width + blur.blurX, circleIstance.y + circleIstance.height + blur.blurY, true,0);
var circleBlurRect:Rectangle = bd.generateFilterRect( circleIstance.getRect( null ) , blur );
trace( circleBlurRect );
circleBlurRect.width -= circleBlurRect.x
circleBlurRect.height -= circleBlurRect.y
bd.draw( circleIstance, new Matrix(1,0,0,1,-circleBlurRect.x, -circleBlurRect.y),null, null, circleBlurRect );
//
var circleBitmap:Bitmap = new Bitmap( bd );
circleBitmap.x = 150 + circleBlurRect.x;
circleBitmap.y = 50 + circleBlurRect.y;
//
addChild( circleBitmap );
}
}
}
you need to tweak the code if the centre of the clip isn’t in top left corner.
April 8th, 2010 - 09:01
Dan, that did the trick. Thanks a lot. I’m a total idiot!