I’ve recently encountered drawing glitches in MovieClip.curveTo() when using a thick pen.
In the following demo, drag the little circle handle left and right. The text box updates to display the “X” value of the handle.
The black line is a curve drawn with a one-pixel thick
lineStyle. The green line is the same curve drawn with a 30-pixel thick line (the bug shows up with thinner line widths, too, but I used a very wide line for illustration purposes).
When the handle is close to the left (values of around 20 or less), look at what happens to the apex of the curve. It goes all wacky!
For additional fun, click the “toggle full screen redraw” button. This hides or shows a rectangle with an alpha of 10% covering the whole stage. When it’s visible, it forces the Flash player to redraw the entire stage every frame. When it’s hidden, you’ll see that the Flash player incorrectly calculates the redraw area, and you’ll get weird cruft left behind as you drag the handle around (actually, I’ll bet that the Flash player calculates the redraw area “correctly,” i.e. what the damaged area would be were it not for the wacky curve apex drawing).
I wish there was a way to work around this. It looks like I’m going to have to break out the algorithm books and draw thick bezier curves myself.
Source FLA file available here.
PS. So far I’ve only tested this on Windows. Let me know if you get the same thing happening on other platforms?
PPS. Note to self: I’ll also put up a Flash 7 and/or 6 version to test with the Wii and the PlayStation 3.
UPDATE: Just tried it on Mac OS X. Same results. I imagine this doesn’t vary by platform.
[…] project, I am drawing Bézier curves in code rather than using MovieClip.curveTo(), thanks to the bug I wrote about back in May. Since I’m doing it in code myself, I thought I might as well use cubic Béziers (four […]