vamapaull.com

Have you ever tried to use the graphics class to draw a rectangle with a lineStyle (stroke) and then set bigger width and height values for the container that holds the graphic? If so, you probably noticed that there is a size difference between a rectangle with lineStyle and a rectangle without lineStyle.

If you trace the width and height values of the container, everything seems to be fine. Only if you run and look at the SWF you’ll notice a visual difference between those two (top image).

ActionScript Code:

import flash.display.Sprite;
 
var rectangle:Sprite = new Sprite();
var rectangleLineStyle:Sprite = new Sprite();
 
with(rectangle)
{
	graphics.beginFill(0x333333);
	graphics.drawRect(0,0,50,50);
	graphics.endFill();
}
 
with(rectangleLineStyle)
{
	graphics.beginFill(0xd5e7ed);
	graphics.lineStyle(3, 0xff0000, 1, false, LineScaleMode.NONE);
	graphics.drawRect(0,0,50,50);
	graphics.endFill();
}
 
addChild(rectangle);
addChild(rectangleLineStyle);
 
rectangle.width = rectangle.height = 200;
rectangleLineStyle.width = rectangleLineStyle.height = 200;

Both rectangles have the same width and height. Notice how the one with lineStyle is much smaller?

I’m not sure what the problem is, but there seems to be a fix (kind of).

Through some trial and error I found that if you use CapsStyle.ROUND and JointStyle.MITER like so, the problem disappears:

graphics.lineStyle(3, 0xff0000, 1, false,  LineScaleMode.NONE, 
					   CapsStyle.ROUND, 
					   JointStyle.MITER

However, it’s not perfect. If you have a much smaller rectangle, let’s say you create:
drawRect(0,0,10,10);

Instead of:
drawRect(0,0,50,50);

Then you will still notice a bit of a difference.

If you want to make a rectangle with lineStyle that can be scaled and you want to get rid of this problem completely, an easy fix wold be make the rectangle bigger and scale it down instead of making it smaller and scale it up. In this scenario, the visual rectangle seems to maintain the real width and height values.