3 Replies Latest reply on Dec 17, 2010 4:37 AM by pur4forlyphe

    Autosizing a mask

    pur4forlyphe

      Hi, i am fixing a bug in an flex painting/drawing app where you can drag drawn elements (symbols and lines/arrows which are drawn in the app) off the custom image canvas (custom being the fact you can upload your own image onto the canvas and it will autosize to the correct width and height) and over the toolbar,

       

      The way i have managed to fix this is by adding a mask to the canvas

       

      <mx:Panel layout="absolute" title="Picture" x="150" y="10">
                <canvas:DrawingCanvas id="canvas" x="0" y="0" mask="{maskCanvas}">
                </canvas:DrawingCanvas>
           </mx:Panel>
           <mx:Canvas x="160" y="40" height="600" width ="800" id="maskCanvas" borderStyle="solid"/>
      

       

      This method works (on images with a height = "600", width = "800") However as i do not know the size of the images being uploaded to the painter app is their a simple way of telling the mask to autoscale to the width and height of the canvas, or how can i create a function to find the width and height of the image inside the canvas and tell the mask to be that size?

       

      Thanks

       

      Pur3forlyphe

        • 1. Re: Autosizing a mask
          Xung

          Hi pur4forlvphe,

           

          Please try this code:

           

          <mx:Panel layout="absolute" title="Picture" x="150" y="10">
                    <canvas:DrawingCanvas id="canvas" width="{maskCanvas.width}" height="{maskCanvas.height}" x="0" y="0" mask="{maskCanvas}">
                    </canvas:DrawingCanvas>
               </mx:Panel>
               <mx:Canvas x="160" y="40" id="maskCanvas" borderStyle="solid"/>

           

          Don't specify width and height of the canvas which contains image control, and the image control don't specify width and height too.

           

          Rgds.

           

          Andy

          • 2. Re: Autosizing a mask
            pur4forlyphe Level 1

            I have tried adding this code and it does not work (the image just sticks a white line about 10 pixels in length and 1 pixel in height)- i think it's probably due to the fact this code generates the length and width of the canvas

             

            // Render the canvas
            var bitmapData:BitmapData = null;
            bitmapData = new BitmapData(canvas.width, canvas.height, true, 0x0);
            bitmapData.draw(canvas);
            

             

            Does this help?

             

            Thanks

             

            Art

             

            This is from the DrawingCanvas.as

             

            public class DrawingCanvas extends UIComponent {
                      
                      private var backgroundImage:DisplayObject = null;
                      private var canvasSprite:Sprite = new Sprite();
                      private var _canvasWidth:int = -1;
                      private var _canvasHeight:int = -1;
                      private var _canvasRotation:int = 0;
                      //private var _canvasMaskWidth:int = -1;
                      //private var _canvasMaskHeight:int = -1;
                      
                      // For drawing operations
                      private var currentOperationId:int = 0;
                      private var operationStartX:int = 0;
                      private var operationStartY:int = 0;
                      private var currentDrawingOperation:DrawingOperation = null;
                      private var currentOperationState:String = DrawingConstants.STATE_IDLE;
                      private var _currentOperation:String = DrawingConstants.OPERATION_POINTER;
                      private var _currentDrawingColour:uint = 0;
                      private var _currentDrawingSize:int = 1;
                      private var _currentTextFormat:TextFormat = new TextFormat();
                      private var _currentTextOpaque:Boolean = false;
                      private var _currentTextString:String = "Ding ****";
                      private var _currentStamp:int = 0;
                      
                      // For pointer/erase operations
                      private var currentPointerTarget:DisplayObject = null;
                      private var currentPointerTargetOldX:int = 0;
                      private var currentPointerTargetOldY:int = 0;
            
                      // Created operations
                      private var operations:Array = new Array();
                      
                      // Grid
                      private var grid:Boolean = false;
                      private var gridSprite:Sprite = new Sprite();
                      
                      public function DrawingCanvas () {              
                          addEventListener(Event.ADDED, childAdded); 
                          
                           // Add the event listener
                           addEventListener(MouseEvent.MOUSE_DOWN, mouseDownListener);
                           addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveListener);
                           addEventListener(MouseEvent.MOUSE_UP, mouseUpListener);
            
                           // Load the background
                           _canvasRotation = 0;
                           _canvasWidth = 0;
                           _canvasHeight = 0;
                           //_canvasMaskWidth = 0;
                           //_canvasMaskHeight = 0;
                           explicitWidth = 0;
                           explicitHeight = 0;
                           
                           // Add sprite
                           addChild(canvasSprite);
                      }
            
                      public function save():Object {
                           var savedOperations:Array = [];
                           for (var i:int = 0; i < operations.length; i++) {
                                savedOperations.push({"type": operations[i].getType(), "x": operations[i].x, "y": operations[i].y, "data": operations[i].save()});
                           }
                           
                           return {"width": this._canvasWidth, "height": this._canvasHeight, "rotation": this._canvasRotation, /*"maskwidth": this._canvasMaskWidth, "masheight": this._canvasMaskHeight,*/ "operations": savedOperations};
                      }
                      
                      public function load(annotations:Object):void {     
                           if ("rotation" in annotations) {
                                setCanvasRotation(int(annotations.rotation));
                           }
            
            • 3. Re: Autosizing a mask
              pur4forlyphe Level 1

              I have got a little further

               

              With

                   <mx:Panel layout="absolute" title="Picture" x="150" y="10">
                        <canvas:DrawingCanvas id="canvas" x="0" y="0" mask="{maskCanvas}">
                        </canvas:DrawingCanvas>
                   </mx:Panel>
                   <mx:Canvas x="160" y="40" id="maskCanvas" width="{canvas.width}" height="{canvas.height}" borderStyle="solid"/>
              

              Now the mask covers the canvas but for some reason negates the other menus on the page - colour selector tool selector, also the image is now just a large white box