2 Replies Latest reply on Sep 3, 2009 1:27 PM by Flex_

    canvas with background squares

    Flex_

      I have a requirement to create a canvas with squares as background (see attached image1).  When the user resizes the canvas , the squares size should get resize automatically.

       

      When the user double clicks on this canvas I need to create the bigger square. This bigger square should align to the nearest background squares(see the Image2)

       

      Is there shortcut in implementing this requirement ? Please help me to implement this requirement.

       

        • 1. Re: canvas with background squares
          Andrew Rosewarn Level 3

          Hi

           

          You'll need to do something like below, create a custom comp and draw what you want on it.

           

          <?xml version="1.0" encoding="utf-8"?>

          <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="300" >

          <mx:Script>

          <![CDATA[

          override protected function updateDisplayList(uw:Number, uh:Number):void {

          super.updateDisplayList(uw,uh);

          var xpos:int = 0;

          // Divide width by no of lines you want will cause resize as comp redraws

          var xGap:Number = uw/10; 

          var ypos:int = 0;

          var yGap:Number = uh/10;

           

          graphics.beginFill(0xffffff,1)

          graphics.drawRect(0,0,uw,uh);

          graphics.endFill();

           

          while (xpos<uw) {

          graphics.lineStyle(1,0xcccccc);

          graphics.moveTo(xpos,0);

          graphics.lineTo(xpos,uh);

          xpos += xGap;

          }

           

          while (ypos<uh) {

          graphics.lineStyle(1,0xcccccc);

          graphics.moveTo(0,ypos);

          graphics.lineTo(uw,ypos);

          ypos += yGap;

          }

          }

          ]]>

          </mx:Script>

          </mx:Canvas>

           

          Hope this helps you make a start

           

          Andrew

          1 person found this helpful
          • 2. Re: canvas with background squares
            Flex_ Level 1

            Thanks for the quick reply and the code.

            I can able to create the background squares. There are two issues.
            I created a Flex component canvas and calling in flex application like this.


            <pa:PACanvas

            id="editorCanvas"

            x="0" y="0"

            width="100%"

            height="100%"

            borderStyle="solid"

            borderThickness="5"

            creationComplete="updateDisplayList(100,100)"

            backgroundColor="#FFFFFF"

            />

             

            Its creating the canvas as shown in the attachment.

            I have two issues

            1) I have to get rid of the small white canvas

            2) When I resize te canvas becoming blank and if i refresh again the background squares getting resized.


            Please help me to resolve these two issues.