2 Replies Latest reply on Apr 12, 2007 12:12 PM by antony_r

    Clipping in a container

    AppDevelopper
      Hi all,

      I tried to draw in a canvas using Graphics and I realised that I could not clip the content.
      Any suggestion?

      thanks
        • 1. Re: Clipping in a container
          peterent Level 2
          You need a clipping mask on the Canvas. When you using the drawing API you are using Flash, not Flex objects; the Canvas will clip Flex objects, but not things drawn.

          Assume I have: <mx:Canvas id="surface" width="200" height="200" ... />

          This function will draw a clipped rectangle into it:

          private function drawInCanvas() : void
          {
          var mask:UIComponent = new UIComponent();
          mask.graphics.beginFill(0,1);
          mask.graphics.drawRect(0,0,201,201);
          mask.graphics.endFill();

          surface.mask = mask;
          surface.addChild(mask);

          var g:Graphics = surface.graphics;
          g.clear();

          g.lineStyle(1,0xFF0000);
          g.drawRect(0,0,200,200);

          g.beginFill(0x00FF00,0.65);
          g.drawRect( 100, 100, 300, 300 );
          g.endFill();
          }

          I created the mask as a UIComponent because I need to add it as a child of the Canvas in addition to telling the Canvas that this child is the mask.
          • 2. Clipping in a container
            antony_r
            Hello,

            I am trying to use the Canvas' clipContent attribute, inside which I have a background image. Somehow, the overflow remains visible near the rounded corners of my Canvas. When I remove the cornerRadius attribute, the clipping is just fine. Why is that?

            Here's my code.

            <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="762" height="84" cornerRadius="10" backgroundColor="#333333" borderStyle="solid" borderColor="#666666" horizontalScrollPolicy="off" verticalScrollPolicy="off">

            <mx:Image source="@Embed(source='../images/bg_topBanner.jpg')"
            horizontalCenter="0" verticalCenter="0"
            scaleContent="true" />
            </mx:Canvas>


            Thanks a lot,


            - Antony R.