CODEWITHSUNDEEP
actionscript-3
Josh
Josh

Reputation: 8149

BitmapData.draw() on Graphics with LineStyle stroke

I have a shape drawn using Shape.graphics.drawRoundRect() with a lineStyle applied. I'm trying to capture that shape as a Bitmap using BitmapData.draw() but I am running into an issue with the stroke. See below:

enter image description here

As you can see, the stroke gets clipped when using draw() (and drawWithQuality()). The line is drawn centered on the object, so a thickness of 4 (as I used in the example) has 2 pixels outside the shape's area and 2 pixels inside it. draw() captures everything from (0,0) to (BitmapData.width,BitmapData.height), it seems, so everything to the left and top of (0,0) is lost. I tried to compensate using the clipRect option, but that just evened out the clipped border, ironically.

Any idea how to capture that remaining data?

Upvotes: 3

Views: 1532

Answers (2)

David Mear
David Mear

Reputation: 2254

As a more general solution, you can get the bounds of the object in its own coordinate space, and use that to set the size of the BitmapData and offset the draw():

import flash.geom.Matrix;
import flash.geom.Rectangle;

const thickness:int = 4;
const radius:int = 10;
const size:int = 100;

var shape:Shape = new Shape();
shape.graphics.lineStyle( thickness, 0xaaaaaa );
shape.graphics.beginFill( 0xdddddd );
shape.graphics.drawRoundRect( 0, 0, size, size, radius, radius );
shape.graphics.endFill();
addChild( shape );

var bounds:Rectangle = shape.getBounds(shape);
var m:Matrix = new Matrix();
m.translate(-bounds.left, -bounds.top);

var bmp1:Bitmap = new Bitmap();
bmp1.bitmapData = new BitmapData( bounds.width, bounds.height, true, 0 );
bmp1.x = 310;
bmp1.y = 100;
addChild( bmp1 );
bmp1.bitmapData.draw( shape, m );

Upvotes: 3

Josh
Josh

Reputation: 8149

And of course, the second I post the question, I figure out the way to do it. You have to offset your shape to match the line outside of the bounds and compensate for the additional size the line adds to the shape when using draw

const thickness:int = 4;
const radius:int = 10;
const size:int = 100;

var shape:Shape = new Shape();
shape.graphics.lineStyle( thickness, 0xaaaaaa );
shape.graphics.beginFill( 0xdddddd );
shape.graphics.drawRoundRect( thickness / 2, thickness / 2, size, size, radius, radius );
shape.graphics.endFill();
addChild( shape );

var bmp1:Bitmap = new Bitmap();
bmp1.bitmapData = new BitmapData( size + thickness, size + thickness, true, 0 );
bmp1.x = 310;
bmp1.y = 100;
addChild( bmp1 );
bmp1.bitmapData.draw( shape );

See the outcome here (you can ignore the clip rect one):

enter image description here

Upvotes: 1

Related Questions