Question

对于非盈利（慈善）网站，我需要一个简单的草图（绘图）组件。

它应该能够：

让用户在白色草图上绘制一个简单的黑色。
保存到服务器的完整绘图步骤。
将最终图像保存到服务器。
重新播放未来用户的绘图步骤。

http://www.sketchswap.com/有一个类似的组件。

您知道在哪里可以找到要在此项目中使用的开源组件吗？

谢谢，

Answer 1

这不会捕获绘图步骤，也不会将最终图像保存到服务器;但是，可能会帮助你开始。

（为可怕的草图道歉） sketch

MXML代码：

<?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>

您可以捕获mouseMoveHandler上的步骤并将它们推送到数组。这将捕获绘图序列的每个起点和终点对以进行重放。

要保存到服务器，您可以通过创建canvas并将画布的BitmapData绘制到BitmapData以保存在服务器上来跟踪任意数量的教程以捕获IBitmapDrawable。< / p>

开源flash或ajax sketchpad？

1 个答案: