Subscribe

  • Subscribe  

Keeping rotated content clipped

Posted by Harry Vikatos | July 22, 2008 .

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.


Name

Email

Website

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word

Comments

*
To prove you're a person (not a spam script), type the security word shown in the picture. Click on the picture to hear an audio file of the word.
Click to hear an audio file of the anti-spam word


Related Posts

8 Comments so far
  1. Thomas  July 22, 2008 11:44 pm

    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

  2. Harry Vikatos  July 23, 2008 6:01 am

    Thomas, that should be no problem. Let me know if you find otherwise

  3. kanu kukreja  October 13, 2008 7:17 am

    Hi,

    Can you please tell me how i can add this component in a run-time text field/image container/shape.

    Thanks,
    Kanu

  4. Marc Hughes  October 13, 2008 12:22 pm

    Nifty. Thanks for writing this up, I might add this functionality to the base Object Handles code (as soon as I get rotation working again)

  5. kanu kukreja  October 13, 2008 9:09 pm

    It doesn’t works with run time shapes and text fields only works for images :(

  6. kanu kukreja  October 13, 2008 9:15 pm

    I tried with text, images and shapes, but its working fine only with images for rest its throwing error :(

  7. coulix  November 17, 2008 2:47 pm

    Saved me a lot of troubles, i was starting to implement collision detection of all corners (A,B,C,D) hacking object handles. That would do the trick for now.

  8. Naresh  September 7, 2009 5:48 am

    hi
    This is Naresh , I would like to know that is their any function to restrict the boundaries with in canvas .
    when i move handle left side if the handle reach the left (0,y) the object will not display in full , some part of object will going to disappear.
    If any body knows this please let me know
    thanks and regrads ,
    Naresh

<

Direct TV Offers - usdirect has the best directtv deals