Bezier drawing with Degrafa

22 Oct08

I’ve made a couple bitmap-based drawing programs in Flash/Flex and figured it’d be fun to make a Bezier-based drawing tool as well. Thinking it couldn’t be too hard, I set out to see what already existed of code out there. I found a couple good resources, but boy was I wrong. Bezier math is kind of complex, at least for someone with limited math skills as myself.

I read and searched and then I saw somebody commenting “Why don’t you just use Degrafa?”. I’ve always thought of Degrafa as a Flex only thing, but Flex is really just a powerful abstraction layer. It’s all Actionscript and so is Degrafa. The more I read in the Degrafa source code, the more I loved it. Degrafa has really good classes for both Cubic and Quadratic beziers that you can easily use straight from AS3. Here’s my first take on this (right click to view source):

This content requires Flash Player 9 (or a more recent version). You need to upgrade your Flash Player

I’ll eventually extend this further to a full, but basic drawing program. I’d love some comments on the way I’ve structured this, so if you got the time… thanks! If you want to do anything related to programmatic drawing, make sure you check out Degrafa. Loads of cool stuff you can do with it!

22 October 2008 at 6:33 pm

5 Responses to Bezier drawing with Degrafa

  1. avatar photo
    Andrew Westberg 22 October 2008 at 9:01 pm #

    Wow.  I never realized degrafa could be used at this low level.  I’ll have to dig into the internals a bit more.

  2. avatar photo
    Ethan Estes 22 October 2008 at 9:09 pm #

    huh, never thought about that either! Great idea, your view source option is not working-404.

  3. avatar photo
    Jensa 22 October 2008 at 9:48 pm #

    Ah! Thanks Ethan. The source-view will work fine from the front page, but not from the sub-pages that the RSS links to. Anybody know how to use a non-relative path for source code view?

    I kind of solved it by adding “../../” before the source path and then re-exporting, but it’s hardly the best way to do it?


  4. avatar photo
    Tim 15 May 2009 at 3:41 pm #

    I’m trying to achieve a similar task. I need a fairly basic bezier path creation and editor tool. I don’t have any experience with flex so I downloaded the Degrafa source however it seems I can’t just use it as a regular flash package in FDT. I’m wondering if you have got any further on creating the drawing tool?

  5. avatar photo
    Jensa 18 May 2009 at 3:10 am #

    Hi Tim,
    This was really a quick experiment I did to confirm that Degrafa suited my needs for a different project, but right click to view source if you want. Degrafa is VERY capable for vector drawing and the Degrafa code is fairly easy to understand if you just follow a couple tutorials initially.

    As for FDT - just copy the Degrafa source folders into your FDT source folder and use it from there? To download the source, just connect to the SVN via FDT and make sure you download the Origin branch, not the main trunk.