Ah, ok, the answer is that a box's layout algorithm does not honor child positions.
Now that i see your example. The Canvas measures itself reletive to it's children. The Box measures itself AND THEN lays out it's children. This is when you see the difference. The reason the canvas is messing up is it's measuring it's children wrong with the rotation. It's actually calculating x and y in the wrong place. This is why it grows as you rotate to 180 degrees. Peace, Mike Peace, Mike On 1/29/07, Piotrowski, John <[EMAIL PROTECTED]> wrote:
Michael, Thanks for the response but I think you may be misunderstanding the question and I should mention I am using Flex 2 which has the Rotate effect unlike 1.5. The question is around the fact that it does work using a Box container but doesn't work with a Canvas. The answer may be what you are saying about the measuring aspect, but the other thing is that if you look at the example at http://flex-dev.wharton.upenn.edu/users/johnrp/Misc/bin/Miscellaneous.html, specifically the seat to the far right, you will see that the rotate happens above the outermost container when using a VBox and it happens below the outermost container when using a Canvas and this is when the resizing occurs. John ************************************************** John R. Piotrowski Programmer Analyst Wharton Computing Email: [EMAIL PROTECTED] ************************************************** ------------------------------ *From:* [email protected] [mailto:[EMAIL PROTECTED] *On Behalf Of *Michael Schmalle *Sent:* Monday, January 29, 2007 8:58 AM *To:* [email protected] *Subject:* Re: [flexcoders] Rotating an object inside a HBox compared to a Canvas Hi, Without looking at your code, I can say the framework is not designed to measure rotated components. They would have to use trig in the measure and update algorithms to do this. You 'could' code this but, let me tell you , it would be complicated. You can't even rotate a component in a canvas and expect the scroll bars to measure it correctly let alone a Box container. Peace, Mike On 1/25/07, *Johnrp23* <[EMAIL PROTECTED]> wrote: I have been working on a seating layout application for a set of rooms in a building. The current perspective is from the presenter's point of view (looking towards the back of the room). I have been asked to provide an inverted view (standing in the back and looking forward). Each seat contains an image and text so just flipping the entire canvas would result in the images and text being upside down and difficult to read. What I decided to do was move each seat to its inverse location and rotate it 180 degrees from its original orientation. I was able to this, but I still had the problem of the inverted image and text within the seat. I thought I could just rotate the contents of the seat 180 degrees so the orientation would be correct, but I ran into a sizing problem. I found that the mouseOver event on the seat was firing even though the mouse was not over the seat image. After some debugging I found that the second rotation of the image was essentially making the seat twice as wide and twice as tall, which was really causing problems since my seats were already close to each other to begin with. And even move confusing was if I flipped the layout again the seats went back to their original size. My seat component was a Canvas with a VBox representing the frame of the seat (an image inside this frame) and then another Canvas for performing actions on the seat like moving, rotating and deleting. I started to try different things to see what would happen and found that the sizing problem went away if I rotated the image directly rather than the frame itself (however this was not ideal for other drag and drop problems with the 0,0 coordinate.) Eventually I found that if I wrap the VBox frame inside another VBox or made the Seat component a HBox, I could rotate the frame without the sizing problem and things seemed to behave as I expected. My question is why does the surrounding canvas of a rotating object change size? It seems dumb to add another VBox layer or define the object as a HBox when I do not need the extra features the HBox provides. You can see a crude example at http://flex- dev.wharton.upenn.edu/users/johnrp/Misc/bin/Miscellaneous.html and the source code is below. Thanks, John index.mxml <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="absolute" xmlns="*" creationComplete="onCreationComplete()"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.rpc.events.AbstractEvent; import Seat; import SeatHBox; private function onCreationComplete():void { seat1.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat2.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat3.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat1.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat2.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat3.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat4.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat5.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat6.addEventListener (MouseEvent.MOUSE_OVER,onMouseOver); seat4.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat5.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); seat6.addEventListener (MouseEvent.MOUSE_OUT,onMouseOut); } private function onMouseOver (event:MouseEvent):void { event.currentTarget.vwOptions.visible=true; } private function onMouseOut (event:MouseEvent):void { event.currentTarget.vwOptions.visible=false; } private function btnFlipClick():void { seat1.rotateSeat(); seat4.rotateSeat(); seat3.rotateStudentCanvas(); seat2.rotateStudentCanvasImage(); seat6.rotateStudentCanvas(); seat5.rotateStudentCanvasImage(); } ]]> </mx:Script> <mx:Canvas id="classroomCanvas" width="100%" height="100%" y="100"> <mx:Label text="Seat as a VBox" y="450" x="0" /> <mx:Label text="Seat as a Canvas" y="100" x="0" /> <mx:Label text="Flip the outter most object (Seat)" y="0" x="150" height="30" /> <mx:Label text="Flip the inner most object (Gray Box)" y="0" x="300" height="30" /> <mx:Label text="Flip the middle object (Gray Box with White Frame)" y="0" x="450" height="30" width="200" /> <SeatHBox id="seat4" y="400" x="150" /> <SeatHBox id="seat5" y="400" x="300" /> <SeatHBox id="seat6" y="400" x="450" /> <Seat id="seat1" y="50" x="150" /> <Seat id="seat2" y="50" x="300" /> <Seat id="seat3" y="50" x="450" /> </mx:Canvas> <mx:Button x="300" y="400" id="btnFlip" click="btnFlipClick ()" > <mx:label>Flip</mx:label> </mx:Button> </mx:Application> Seat.mxml <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns="*" borderStyle="solid" borderColor="#000000" > <mx:Script> <![CDATA[ [Bindable] public var studentAngle:int; [Bindable] public var txtRightSideUP:String = "RightSide UP"; public function rotateSeat():void { rotate.end(); studentAngle += 180; rotate.duration=2500; rotate.play(); } public function rotateStudentCanvas():void{ rotateStudent.end(); studentAngle += 180; rotateStudent.duration = 7500; rotateStudent.play(); } public function rotateStudentCanvasImage():void{ rotateStudentImage.end(); studentAngle += 180; rotateStudentImage.duration = 5000; rotateStudentImage.play(); } ]]> </mx:Script> <mx:Rotate id="rotate" originX="{this.width/2}" originY="{this.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{this}"/> <mx:Rotate id="rotateStudent" originX="{student.width/2}" originY="{student.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{student}"/> <mx:Rotate id="rotateStudentImage" originX="{studentImage.width/2}" originY="{studentImage.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{studentImage}"/> <mx:VBox id="student" width="100" height="125" borderColor="#DDDDDD" borderStyle="solid" horizontalAlign="center" verticalAlign="middle" > <mx:Canvas id="studentImage" width="95" height="120" backgroundColor="#BBBBBB"> </mx:Canvas> </mx:VBox> <mx:Canvas x="98" id="vwOptions" width="25" height="122" backgroundColor="#dddddd" visible="false"> </mx:Canvas> </mx:Canvas> SeatHBox.mxml <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"; xmlns="*" borderStyle="solid" borderColor="#000000" > <mx:Script> <![CDATA[ [Bindable] public var studentAngle:int; [Bindable] public var txtRightSideUP:String = "RightSide UP"; public function rotateSeat():void { rotate.end(); studentAngle += 180; rotate.duration=2500; rotate.play(); } public function rotateStudentCanvas():void{ rotateStudent.end(); studentAngle += 180; rotateStudent.duration = 7500; rotateStudent.play(); } public function rotateStudentCanvasImage():void{ rotateStudentImage.end(); studentAngle += 180; rotateStudentImage.duration = 5000; rotateStudentImage.play(); } ]]> </mx:Script> <mx:Rotate id="rotate" originX="{this.width/2}" originY="{this.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{this}"/> <mx:Rotate id="rotateStudent" originX="{student.width/2}" originY="{student.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{student}"/> <mx:Rotate id="rotateStudentImage" originX="{studentImage.width/2}" originY="{studentImage.height/2}" angleFrom="{studentAngle-180}" angleTo="{studentAngle}" target="{studentImage}"/> <mx:VBox id="student" width="100" height="125" borderColor="#DDDDDD" borderStyle="solid" horizontalAlign="center" verticalAlign="middle" > <mx:Canvas id="studentImage" width="95" height="120" backgroundColor="#BBBBBB"> </mx:Canvas> </mx:VBox> <mx:Canvas x="98" id="vwOptions" width="25" height="122" backgroundColor="#dddddd" visible="false"> </mx:Canvas> </mx:HBox> -- Teoti Graphix http://www.teotigraphix.com Blog - Flex2Components http://www.flex2components.com You can find more by solving the problem then by 'asking the question'.
-- Teoti Graphix http://www.teotigraphix.com Blog - Flex2Components http://www.flex2components.com You can find more by solving the problem then by 'asking the question'.
