Flash Player Bug - Stroking a Corner

Author: Thomas Gonzalez



It appears there is a known bug in the Flash Player that creates rendering artifacts and uneven results when trying to apply strokes to a corner radius.  Let me outline the situation by having you look at the attached image with three separate rectangles and the associated code for each.

So for the left rectangle we used the code below, and one would expect a nice pretty red rectangle with a smooth black stroke and 6 pixel corner radius, but what we get is a rectangle with 4 uneven corner and these weird rendering artifacts which extend beyond the boundary of the shape.

//Left Rectangle
graphics.lineStyle(1,0,1,false);
graphics.beginFill(0xFF0000,1);
graphics.drawRoundRectComplex(10,10,100,30,6,6,6,6);

For the middle rectangle we set the "pixelHinting" property of the lineStyle to true, and this seems to remove the funky artifacts, but still leaves the different radius on the corners.

//Middle Rectangle
graphics.lineStyle(1,0,1,true);
graphics.drawRoundRectComplex(150,10,100,30,6,6,6,6);
graphics.endFill();

For the right most rectangle it appears we have it drawn correctly, but we were only able to do this by NOT using any line style at all, and instead having to create two rectangles with one nested inside the other.

//Right Rectangle Outer
graphics.lineStyle(0,0,0,false);
graphics.beginFill(0,1);
graphics.drawRoundRectComplex(300,10,100,30,6,6,6,6);
graphics.endFill();
//Right Rectangle Inner
graphics.beginFill(0xFFFFFF,1);
graphics.drawRoundRectComplex(301,11,98,28,5,5,5,5);
graphics.endFill();

So it is obvious to me that the Player is capable of rending this correctly, but it does NOT.  I am not sure if the cause is in some type of sub-pixel interpolation algorithm, or it lies within the "curveTo" code for line strokes where the player might be using some type of cubicBezier algorithm and the control points are too close together to get an accurate curve.

It appears that the Flex team is aware of this issue and thus renders all of its "cornerRadius" borders by applying the same technique I am using above by doing two separate compexRectangle fills.

So apparently Adobe is well aware of this issue, and from what I understand, through unnamed sources, this isn't even on the radar for the next major release (Flash Player 10.)  I think is a real shame since I believe it really undermines the quality of what can be produced with Flash when you want a high level of detail and your are forced to take a bunch of unnecessary hacks to work around it.

 

0 Response to “Flash Player Bug - Stroking a Corner”

Leave a Reply