Feb 01

pencil Eye candy is an important, if often over looked, part of any Flex application.  Unfortunately for me, I am much more of a developer than a designer and this has often left me with the short end of the eye candy stick.

The strength of being a developer however is in the custom functionality we can add.  Recently I have put together a DrawableOverlay Flex component which can be used to allow the user to annotate/draw on any part of the application.

The example application below shows how this component works in practice.  The DrawableOverlay component can be placed over any other components in the application (in this case a Image and a Container) and the user is then able to annotate anywhere within the DrawableOverlay area.

Try it Out:

The full source code is available here.  Feel free to take it and use it in any way which us useful to you.  Come back soon to see me extend this simple example to show off some of the things which are possible.

4 Responses to “How to Draw in Flex”

  1. Gastón says:

    Hey there,
    this component is great and i actually saw it on your OLD flex blog. Over there i asked a question and i guess it wasn’t answered since you had moved to this one. My question would be, how can I save what I’ve drawn on the component?
    I’m quite new at flex and haven’t been able to find anything about saving a canvas as an image.
    I would really appreciate if you could clear this up for me. Thnx.

    Gaston

    • Tony Fendall says:

      Hi Gaston – Sorry for not getting back to you sooner.

      In the past I have always used this technique to save images from my flex applications. This works fine, but it does require you to be able to run PHP on your server.

      I found another technique which works entirely within javascript (ie. without a server), but it doesn’t work in all browsers.

      Hope that helps :)

  2. Arnon says:

    Hey Tony,

    I saw the component on your old blog.
    I use it to draw lines on , like this:

    myImage.addChild(new DrawableCanvas());

    I didn’t believe my eyes when I saved my image with some lines to server.

    Great component.
    Thanks,
    Arnon

  3. Arnon says:

    I meant to say:

    I use it to draw lines on mx:Image…

Leave a Reply

preload preload preload