open source flash or ajax sketchpad? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

开发者_如何学Python

We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.

Closed 7 years ago.

Improve this question

For a non-profit (charity) site I need a simple sketchpad (drawing) component.

It should be able to:

• Let the user draw a simple black on white sketch.
• Save to server the full drawing steps.
• Save to server the final image.
• Re-play the drawing steps to future users.

http://www.sketchswap.com/ has a similar component.

Do you know where I could find an open source component to use in this project?

Thanks,

---

This does not capture the drawing steps nor save the final image to a server; however, might help get you started.

(Apologies for the horrendous sketch)

MXML code:

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               addedToStage="addedToStageHandler(event)">

    <fx:Script>
        <![CDATA[
            //------------------------------
            //  model
            //------------------------------

            protected var lastPoint:Point;


            //------------------------------
            //  lifecycle
            //------------------------------

            protected function addedToStageHandler(event:Event):void
            {
                beginDrawing();
            }

            protected function beginDrawing():void
            {
                canvas.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
            }

            protected function mouseDownHandler(event:MouseEvent):void
            {
                canvas.removeEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

                // mark mouse down location
                lastPoint = new Point(mouseX, mouseY);

                // listen for movement or up/out
                canvas.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                canvas.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
                canvas.addEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);
            }

            protected function mouseMoveHandler(event:MouseEvent):void
            {
                var g:Graphics = canvas.graphics;
                g.lineStyle(1, 0x0);

                // draw line segment
                g.moveTo(lastPoint.x, lastPoint.y);
                g.lineTo(mouseX, mouseY);

                // mark end of line segment
                lastPoint.x = mouseX;
                lastPoint.y = mouseY;
            }

            protected function mouseUpHandler(event:MouseEvent):void
            {
                canvas.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);
                canvas.removeEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
                canvas.removeEventListener(MouseEvent.MOUSE_OUT, mouseUpHandler);

                beginDrawing();
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {
                super.updateDisplayList(unscaledWidth, unscaledHeight);

                var g:Graphics = canvas.graphics;
                g.clear();
                g.beginFill(0xff0000, 0);
                g.drawRect(0, 0, unscaledWidth, unscaledHeight);
                g.endFill();
            }
        ]]>
    </fx:Script>

    <s:Label text="Sketchpad"
             fontSize="24"
             textAlign="center"
             paddingTop="12"
             width="100%" />

    <s:SpriteVisualElement id="canvas"
                           width="100%"
                           height="100%" />

</s:Application>

You could capture the steps on mouseMoveHandler and push them to an array. That would capture each start and end point pair of the drawing sequence for replay.

To save to server, you could follow any number of tutorials to capture the canvas by creating BitmapData and draw IBitmapDrawable of the canvas to the BitmapData to save on a server.