Keeping rotated content clipped
Every container in Flex by default clips its content, when that exceeds the boundaries of the container. Clipping appears to be a computational behaviour that kicks in once a display object exceeds the container boundaries either due to its position coordinates (x,y) or its size (width, height) . Missing something? Well yes; a display object might also exceed the boundaries due to its rotation status. When that happens clipping fails and the display object leaks out of its container to the dismay of everyone that tried to build an graphical editor allowing users to rotate display objects on the screen.
This is demonstrated in the below flex swf. Rotate the rectangle clockwise slightly, by grabbing the orange handle, and then move it to the lower edge of the black container. You will see the corner leaking out. Watch how clipping kicks in, once the rectangle exceeds the container’s boundaries by its original dimensions.
Note, this is a known issue with the current Flex framework, that actually applies to any kind of programmatic visual transformation, and intended to solve with Gumbo (Flex 4), as explained here:
“Respecting transformations: While a Halo container generally respects the scale of a component defined by the user, the rotation of the component is completely ignored. Any transformation set explicitly on a component (through the component’s matrixproperty available on every DisplayObject) is ignored as well. “
So what can we do till next version of Flex? One solution (and do mention in the comments any other suggested work around), is to employ masking and mask the container by a rectangle equal to itself, enforcing this way visual clipping. This what is done in the above app to correct the problem in the bottom container.
For your reference the code of the app follows. We ‘ve been using the nice Object Handles component, from rogue development, to get the move/resize/rotate effect.
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
xmlns:objecthandles="com.roguedevelopment.objecthandles.*"
creationComplete="init()">
<mx:Canvas left="50" right="50" top="50" backgroundColor="#000000"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
height="161">
<objecthandles:ObjectHandles allowRotate="true" width="100"
height="100" x="24" y="27"
rotateHandleImage="{rotateHandle}">
<mx:Canvas backgroundColor="#F72323" left="0" right="0"
bottom="0" top="0"/>
</objecthandles:ObjectHandles>
</mx:Canvas> <mx:Canvas id="container" left="50" right="50" top="273"
backgroundColor="#000000"
horizontalScrollPolicy="off" verticalScrollPolicy="off"
height="161">
<objecthandles:ObjectHandles allowRotate="true" width="100"
height="100" x="24" y="27"
rotateHandleImage="{rotateHandle}">
<mx:Canvas backgroundColor="#F72323" left="0" right="0"
bottom="0" top="0"/>
</objecthandles:ObjectHandles>
<mx:Container id="maskc" backgroundColor="#E6EC3B" left="0"
right="0" top="0" bottom="0"/>
</mx:Canvas>
<mx:Label text="Content leaks when rectangle rotated" color="#E8F7FA"
fontWeight="bold" fontSize="12" top="213" left="50"/>
<mx:Label text="Problem solved!" color="#E8F7FA" fontWeight="bold"
fontSize="12" top="434" left="50"/>
<mx:Script>
<![CDATA[
[Embed(source='rotate_handle.png')]
[Bindable]
public var rotateHandle:Class;
private function init():void {
container.mask = maskc;
}
]]>
</mx:Script>
</mx:Application>
Leave a Comment
If you would like to make a comment, please fill out the form below.
Nice example!
What happens if the rotated object, the canvas or the app has some kind of transparency? Does the mask property cover this?
Cheers
Thomas, that should be no problem. Let me know if you find otherwise