Friday, January 29, 2010

Drawing Dashed Lines, Arcs, and Cubic Curves

The ActionScript Graphics class supports drawing solid lines and quadratic curves. But there isn't native support for dashed lines or cubic (Bezier) curves.

I've created a sample application that shows the three line types: straight, quadratic curve and cubic curve. It also lets you choose between showing a solid line, a dashed line, or both. The line thickness can also be adjusted.



I also got a little carried away and added the quadratic and cubic control points as buttons that you can drag around the canvas to change the curve.

Most of the drawing functionality for these examples is in the GraphicsUtils.as class that contains the following static functions:
  • drawLine() - draws a straight line, either solid (using Graphics.lineTo() function) or dashed
  • drawQuadCurve() - draws a quadratic curve, either solid (using Graphics.curveTo() function) or dashed
  • drawCubicCurve() - draws a cubic curve (two control points), either solid or dashed. The curve is an approximation done by dividing the curve into many small segments and drawing straight lines
  • drawCircle() - draws a circle, either solid (using Graphics. drawCircle() function) or dashed
  • drawArc() - draws an arc, either solid or dashed
The dashed lines are drawn by dividing the line into many small segments to draw the dashes. By default a dash length of 10 pixels is used, but that is customizable.

The equations used to calculate the values at any point along the line for the three cases were found on the Wikipedia entry for B├ęzier curves.

14 comments:

Mike Reich said...

Looks like a great library, but i the link to the file doesn't seem to be working...

Chris Callendar said...

Thanks Mike, I've fixed the link to GraphicsUtils.as now.

Chris

AJIT said...

Dear Chris ,

I know you are very busy

I am new to flex and in learning phase
I invite your attention to the flexlib scheduling library.
Such a great library is broken for Flex 4 as the line drawing classes are broken

if you fix it , it will be great

Regards ,

AJIT

eggers said...

Great class. Very helpful!

Would you mind posting what kind of license you're it releasing under?

Thanks,
Jacob

Chris Callendar said...

Hi Jacob,
I thought I posted a reply yesterday, but it didn't appear.

Anyways, I've decided to release all my work under the Creative Commons License (see the box on the right hand side of my blog).

Cheers,
Chris

Frans said...

Hi Chris,

Would like to use your class, but unfortunately can't figure out where to get ColorUtils.

Cheers,
Frans

Chris Callendar said...

Hi Frans,

ColorUtils is located in the source code, if you right click on the example above and choose View Source you'll see the source code for this example. Expand out the src and flex.utils folders in the tree view on the left, and you should see the ColorUtils file class. If you download the source as a zip file (bottom left corner of the View Source page) then you'll get that file too.

Cheers,
Chris

Daniel McQuillen said...

Hi Chris,

Excellent, efficient set of classes. I'd really like to use the dashed line class in SimpleDiagrams. Can I contact you to make sure that it's cool with you, falls in line with CC license and how you'd like to be attributed?

Thanks again,

Daniel

Chris Callendar said...

Of course Daniel, please do. chriscallendar at gmail.

Anonymous said...

Thanks it helped me alot.

Nishant said...

Awesome post, just what I needed!

Anonymous said...

Superstar!

Made quick work of an ugly looking job.

Thanks!

rskk said...

I'm a novice to this.
I don't understand how I can include this file into my actionscript.

Could you help me with this?

Thanks a lot.

Chris Callendar said...

Hi rskk,

If you don't already have the files - you can right click on the adobe flash player app above, and click "View Source". From that page you can download the source zip file (bottom left corner).

Once you have the files, you copy the 2 graphics files - ColorUtils.as and GraphicsUtils.as into your project. Make sure you have the same package structure, so put those 2 files into the src/flex/utils folder (assuming you're using Flash Builder).