lineStyle thickness

#1 
fd_gfx['border'] = new Sprite ();
fd_gfx['border'].graphics.lineStyle(1, 0x000000, 1, true, LineScaleMode.NORMAL, CapsStyle.SQUARE, JointStyle.MITER);
fd_gfx['border'].graphics.beginFill(0xFFFFFF, 0);
fd_gfx['border'].graphics.drawRect(0, 0, 72, 72);
fd_gfx['border'].graphics.endFill();
addChild(fd_gfx['border']);

Thickness set to 0 produces 1 pixel line that is half transparent (like about 50% alpha).
Thickness set to 1 produces 2 pixel line that is half transparent (like about 50% alpha).
Thickness set to 2 produces 2 pixel line too, but not transparent (thats what I expected).
Thickness set to 4 produces 4 pixel line that is not transparent (again what I expected).
What is going on here?
I would like to create “pixel perfect” 1 pixel non transparent line (actually border) by using lineStyle, so how to do that in simple normal way without additional code like using mask, lineTo, setPixels, or overlaying 2 or more drawings?

#2

This is related to this task:

In a nutshell, canvas rendering is sharp if you align by a half-pixel, but not always. This requires a thorough sweep of someone testing when we might want to add or subtract 0.5 from the draw positions to improve sharpness

1 Like
#3

Ok, so finally I made a function that uses setPixel32 on BitmapData.
Not sure about performance, and there are other ways to achieve that (like using rectangle mask for example), but I just wanted to make simple borders dynamically for static images and here is a code in case someone would make quick use of it (color is ARGB, so alpha is supported, and BitmapData be used for both, Bitmap and Sprite by using beginBitmapFill if needed):

function border(thickness:Int, argb:UInt, w:Int, h:Int):BitmapData
{
	var bmp = new BitmapData(w, h, true, 0x00FFFFFF);
	for (i in 0...thickness)
	{
		for (i2 in 0...w)
		{
			bmp.setPixel32(i2, i, argb);
			bmp.setPixel32(i2, (h-1-i), argb);
		}
		for (i2 in 0...h)
		{
			bmp.setPixel32(i, i2, argb);
			bmp.setPixel32((w-1-i), i2, argb);
		}
	}
	return bmp;
}