flash open source ou ajax sketchpad?

Question

Pour un site à but non lucratif (charité), j'ai besoin d'un simple composant sketchpad (dessin).

Il devrait pouvoir:

• que l'utilisateur puisse dessiner un noir simple sur le croquis blanc.
• Enregistrer sur le serveur les étapes de dessin complètes.
• Enregistrer sur le serveur l'image finale.
• Relancez les étapes de dessin pour les futurs utilisateurs.

http://www.sketchswap.com/ a un composant similaire. Savez-vous où je pourrais trouver un composant open source à utiliser dans ce projet?

Merci,

Answer 1

Cela ne saisit pas les étapes de dessin, ni enregistrer l'image finale à un serveur; cependant, pourrait vous aider à démarrer.

(Toutes mes excuses pour le croquis) horrible

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

Vous pouvez saisir les étapes sur mouseMoveHandler et les pousser à un tableau. Cela permettrait de capturer chaque paire de début et de fin de la séquence de dessin pour la relecture.

Pour enregistrer au serveur, vous pourriez suivre un certain nombre de tutoriels pour capturer le canvas en créant BitmapData et d'en tirer IBitmapDrawable de la toile à la BitmapData pour enregistrer sur un serveur.