Draw cubic bezier curves in Actionscript?

Question

What's the best way to draw cubic bezier curves programmatically in AS3? The Graphics class only seems to support quadratic curves. :( I want to be able to do something like:

var startPoint:Point = new Point(0, 0);
var endPoint:Point = new Point(5, 5);
var control1:Point = new Point(5, 0);
var control2:Point = new Point(0, 5);

var myBezier:Sprite = getBezier(startPoint, control1, control2, endPoint);

For a performance target, I'm planning on having ~50 of these on the stage at once.

Answer 1

Note: Flash Player 11 onwards includes a native method to draw cubic curves, cubicCurveTo() which should be the fastest method if you are targeting FP11.

Just last week I wrote a class to draw Bezier curves of arbitrary order.

The code is not optimized but works fine in my tests. Performance is acceptable event for doing animations (although I don't think it's a good idea to abuse it, since as I said it's not optimized; it doesn't make sense to use these for quadratic curves, of course, since the player can do that natively).

The code is here if you want to use it or take a look:

The BezierCurve class

Sample code

I think that with the sample code you will be able to figure out how to use it without trouble (it's quite straight forward and somewhat commented); but if you run into problems, ask away!

Feel free to use it as you see fit.

Answer 2

If quadratic are built into that API call, you'll have to understand Bezier well enough to write your own cubic implementation.

Like this .

Answer 3

This site lists and explains various ways of approximating cubic Bezier curves :
http://timotheegroleau.com/Flash/articles/cubic_bezier_in_flash.htm

At the very bottom he gives a method with the heading Fixed MidPoint approach which uses four quadratic curves as an approximation and seems to be the best in terms of accuracy and performance out of all the methods.