I’m currently working in FlexSDK/AS3 and have a canvas containing many objects. The canvas is large – around 4K x 4K pixels, and I do a lot of scaling/zooming/scrolling about. The viewport is only around 800×450.
I’m trying to apply a blur filter to the canvas – which I have figured out and it works fine, except for this one little bug:
A filter is not applied if the resulting image exceeds the maximum dimensions. In AIR 1.5 and Flash Player 10, the maximum is 8,191 pixels in width or height, and the total number of pixels cannot exceed 16,777,215 pixels. (So, if an image is 8,191 pixels wide, it can only be 2,048 pixels high.) In Flash Player 9 and earlier and AIR 1.1 and earlier, the limitation is 2,880 pixels in height and 2,880 pixels in width. If, for example, you zoom in on a large movie clip with a filter applied, the filter is turned off if the resulting image exceeds the maximum dimensions. — AS3 docs
When I zoom out my filter works fine. But while zoomed in, the pixel limitation is broken and the filter fails to work.
Since I only need the currently visible section of the screen to blur – the 800×450 slice – is there any way to selectively blur only that portion of the screen?
I don’t think you can assign a region of a DisplayObject to apply a filter to. It is all or nothing.
How complex are the contents of the canvas? Are the elements interactive? Can you split them into smaller rectangles and place them into a grid?
If it is just an image or group of images, you could copy the viewable portion into a BitmapData object. You would hide the large canvas and only display the bitmap data using a Bitmap Object. You could add a listener onto zoom and scroll events and then update the BitmapData and Bitmap when necessary.
If it is a group of interactive controls I think your best option is to compose them into a grid. You could then apply a blur to all of the cells in the grid (each being a smaller size).
Be aware that blurring that many pixels will be a real performance hog!