開源Flash或AJAX畫板？

Question

對於非營利（慈善機構）的網站，我需要一個簡單的畫板（圖）組件。

應該能夠：

• 讓用戶畫上白色的素描一個簡單的黑色。
• 保存到服務器的全部圖紙的步驟。
• 保存到服務器上的最終圖像。
• 重新上場繪圖步驟，未來的用戶。

http://www.sketchswap.com/具有類似的組分。

你知道我在哪裏可以找到一個開源的組件在這個項目中使用？

感謝，

Answer 1

這並不捕捉繪圖步驟，也沒有保存到服務器的最終圖像;但是，可能會幫助您開始。

（道歉可怕的草圖）

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的步驟和他們推到一個數組。這將捕獲繪圖序列的每個開始和結束點對以進行重放。

要保存到服務器，你可以按照任何的教程通過創建BitmapData捕捉canvas並繪製在畫布的IBitmapDrawable到BitmapData保存在服務器上。