4 Replies Latest reply on Aug 10, 2006 1:57 PM by Starlover_jacob

    Function to change proportions of canvas

    Starlover_jacob Level 1
      hello,
      I hope someone can help me with this.
      I have an canvas that is representing a piece of paper.

      By chosing an option in the radiobuttongroup i wanna change the proportions and position of my canvas.
      chosing landscape or normal to rotate the canvas (paper).

      i have no idea to let the canvas change live, Please some help here.
        • 1. Re: Function to change proportions of canvas
          peterent Level 2
          Given what you say, I think you have 2 ways to go: either change the shape (eg, from 640x480 to 480x640) or rotate the Canvas.

          To change the shape:

          paperCanvas.setSize( 480, 640 ); // first number is width, second number is height

          What I would recommend is to use States instead of this brute force method. When you use states you can then use transitions and the Resize effect giving the user a smooth transition from portrait to landcape and back again.

          Assuming you define your Canvas like this (I threw in a DropShadowEffect for extra coolness):

          <mx:Canvas width="160" height="200" horizontalCenter="0" top="55" backgroundColor="#ffff80" id="paperCanvas">
          <mx:filters>
          <f:DropShadowFilter alpha=".7" distance="8" xmlns:f="flash.filters.*" />
          </mx:filters>
          </mx:Canvas>

          You can add a state for the landscape view:

          <mx:states>
          <mx:State name="landscapeState">
          <mx:SetProperty target="{paperCanvas}" name="width" value="200"/>
          <mx:SetProperty target="{paperCanvas}" name="height" value="160"/>
          </mx:State>
          </mx:states>

          and your RadioButtons to change to the states:

          <mx:RadioButton y="280" selected="true" label="Portrait" click="currentState=''" horizontalCenter="-61"/>
          <mx:RadioButton y="280" label="Landscape" click="currentState='landscapeState'" horizontalCenter="58.5"/>

          You can then add a transition to go from one to the other using the Resize effect:

          <mx:transitions>
          <mx:Transition fromState="*" toState="*">
          <mx:Resize target="{paperCanvas}" />
          </mx:Transition>
          </mx:transitions>

          To rotate:

          paperCanvas.rotation = 90;

          If you want to rotate the Canvas you will need to embed the fonts you are using; you can also use RotateEffect and visually spin the canvas.
          • 2. Re: Function to change proportions of canvas
            Starlover_jacob Level 1
            thanx for your quick answer, i have just one question;

            How do i write this in flex 2 becouse i get errors about the lines;
            paperCanvas.setSize( 480, 640 ); // first number is width, second number is height
            and
            paperCanvas.rotation = 90;
            • 3. Re: Function to change proportions of canvas
              peterent Level 2
              If you'll send me an email (pent@adobe.com) I'll send you a working Flex 2 example.
              • 4. Re: Function to change proportions of canvas
                Starlover_jacob Level 1
                solution:
                ------------------------------- one canvas ---------------------
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                <mx:states>
                <mx:State name="landscapeState">
                <mx:SetProperty target="{paperCanvas}" name="width" value="250"/>
                <mx:SetProperty target="{paperCanvas}" name="height" value="193"/>
                </mx:State>
                </mx:states>
                <mx:transitions>
                <mx:Transition fromState="*" toState="*">
                <mx:Resize targets="{paperCanvas}" />
                </mx:Transition>
                </mx:transitions>
                <mx:Canvas width="193" height="250" horizontalCenter="0.5" top="55" backgroundColor="#ffff80" id="paperCanvas">
                <mx:filters>
                <f:DropShadowFilter alpha=".7" distance="8" xmlns:f="flash.filters.*" />
                </mx:filters>
                <mx:Text text="Click the RadioButtons below to change the shape of this &quot;paper&quot; canvas." left="10" right="10" top="101" bottom="10"/>
                <mx:Label text="Paper" fontWeight="bold" fontSize="16" left="10" top="10"/>
                </mx:Canvas>
                <mx:RadioButton selected="true" y="330" label="Portrait" click="currentState=''" horizontalCenter="-61"/>
                <mx:RadioButton y="330" label="Landscape" click="currentState='landscapeState'" horizontalCenter="58.5"/>
                </mx:Application>

                ----------------------------------------------------------------------------------
                ------------------ two canvases ontop of eachother (rotate at the same time) ------------------

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                <mx:states>
                <mx:State name="landscapeState">
                <mx:SetProperty target="{paperCanvas}" name="width" value="250"/>
                <mx:SetProperty target="{paperCanvas}" name="height" value="193"/>
                <mx:SetProperty target="{paperCanvas2}" name="width" value="250"/>
                <mx:SetProperty target="{paperCanvas2}" name="height" value="193"/>
                </mx:State>
                </mx:states>
                <mx:transitions>
                <mx:Transition fromState="*" toState="*">
                <mx:Resize targets="{[paperCanvas,paperCanvas2]}" />
                </mx:Transition>
                </mx:transitions>
                <mx:Canvas width="193" height="250" horizontalCenter="0.5" top="55" backgroundColor="#ffff80" id="paperCanvas">
                <mx:filters>
                <f:DropShadowFilter alpha=".7" distance="8" xmlns:f="flash.filters.*" />
                </mx:filters>
                <mx:Text text="Click the RadioButtons below to change the shape of this &quot;paper&quot; canvas." left="10" right="10" top="101" bottom="10"/>
                <mx:Label text="Paper" fontWeight="bold" fontSize="16" left="10" top="10"/>
                </mx:Canvas>

                <mx:Canvas width="193" height="250" horizontalCenter="0.5" top="55" backgroundColor="#ffffff" id="paperCanvas2">
                </mx:Canvas>

                <mx:RadioButton selected="true" y="330" label="Portrait" click="currentState=''" horizontalCenter="-61"/>
                <mx:RadioButton y="330" label="Landscape" click="currentState='landscapeState'" horizontalCenter="58.5"/>
                </mx:Application>