CODEWITHSUNDEEP
actionscript-3
justin
justin

Reputation: 312

AS3 Render Shape to Bitmap with Antialias

I have a drawn a Circle Shape in AS3. I want to render the Circle into a Bitmap with nice/antialiased Edges. Because I want it to work on Mobile Devices (Air Apps are limited to stagequality = low) I need a workaround. Any custom shape to bitmap renderer available?

Upvotes: 1

Views: 6810

Answers (5)

dpcao
dpcao

Reputation: 21

Have you consider using the drawWithQuality method?

The drawWithQuality() method works exactly like the draw() method, but instead of using the Stage.quality property to determine the quality of vector rendering, you specify the quality parameter to the drawWithQuality() method.

Upvotes: 2

chamberlainpi
chamberlainpi

Reputation: 5251

Not sure this solution would work for Air Mobile Apps, but worth looking into.

Didier Brun @ ByteArray.org posted an API used to draw primitive shapes (as BitmapData, not from Vector draw calls either), which might help you get your circles to draw the way you want.

http://www.bytearray.org/?p=67

Code Snippet (from that URL):

// create the BitmapData to work on
var pixels:Raster = new Raster(320, 240, true);

// draw stuff
pixels.drawRoundRect( new Rectangle ( 20, 20, 200, 100), 18, 0xFF00FFFF );
pixels.drawRect( new Rectangle ( 70, 70, 100, 100 ), 0xFF009900 );
pixels.filledTri( 40, 40, 80, 110, 50, 30, 0xFF998811 );
pixels.aaCircle(100, 100, 40, 0x77AA88 );
pixels.circle(40, 40, 30, 0xFF000000);
pixels.line(10, 10, 60, 80, 0xFF000000 );

// show it
addChild ( new Bitmap ( pixels ) );

Hopefully the library / source code is compatible for your project! :)

Upvotes: 2

alxx
alxx

Reputation: 9897

If it is only something simple as circle, you can synthesize smooth image pixel by pixel. Create BitmapData of sufficient size and loop on pixels. On every pixel, compute distance from center - if it less than circle radius - half of pixel diagonal, set pixel to circle color. If it greater than circle radius + half of pixel diagonal, call setPixel32(x, y, 0).
Pixels that won't pass both conditions are near the edge - to do exact antialiasing, you must compute how much of pixel is covered by circle. Maybe you can find some convincing simple approximation. Good luck!

Update: OK, I think I can remember simpler approach... You can draw your circle or any shapes two times bigger than they should be, then draw that bitmap into another with scale 0.5 (set through matrix) and smoothing on. That would be supersampling 4x. If stage quality doesn't affect bitmap smoothing, it should work.

Upvotes: 1

nukie
nukie

Reputation: 9

In ActionScript 3 bitmap is created from BitmapData, so you need to create if first with

_bitmapData = new BitmapData(..

BitmapData has method draw, passing DisplayObject instance (Sprite, MovieClip or other) to it as parameter, will draw it's content into BitmapData. Example:

var c:Sprite = new Sprite();
c.graphics.clear();
c.graphics.beginFill(0x00FF00, 0.5);
c.graphics.lineStyle(2.0);
c.graphics.drawRectangle(0, 0, 100, 100);
c.graphics.endFill();
var bd:BitmapData = new BitmapData(100, 100);
bd.draw(c);
var bitmap:Bitmap = new Bitmap(bd);

Upvotes: 0

Marty
Marty

Reputation: 39466

StageQuality.LOW is going to make your bitmap quality low if you're using draw() because the source will be of low quality whether it's on the DisplayList or not.

I don't think there's a way around this.. You'll have to load in circle graphics or import images to use.

Upvotes: 1

Related Questions