7 Replies Latest reply on Jan 29, 2009 8:09 AM by Newsgroup_User

    Flex canvas clipping problem

    chuyler1
      Pretty simple problem here, which might have a simple solution. I have a canvas on which I am drawing lines. Some of the lines are going to go off the sides of the canvas and I want them clipped. Flex is drawing them over the rest of my application instead of keeping them contained within the visible scope of the canvas. How do I get the canvas to clip the content? I tried clipContent="true" but it does nothing.

      Please compile the example program below, The line extends outside my panel but I want it to stop at the edge of the canvas instead.

        • 1. Re: Flex canvas clipping problem
          Level 7

          "chuyler1" <webforumsuser@macromedia.com> wrote in message
          news:glqph8$483$1@forums.macromedia.com...
          > Pretty simple problem here, which might have a simple solution. I have a
          > canvas on which I am drawing lines. Some of the lines are going to go off
          > the
          > sides of the canvas and I want them clipped. Flex is drawing them over
          > the
          > rest of my application instead of keeping them contained within the
          > visible
          > scope of the canvas. How do I get the canvas to clip the content? I
          > tried
          > clipContent="true" but it does nothing.
          >
          > Please compile the example program below, The line extends outside my
          > panel
          > but I want it to stop at the edge of the canvas instead.

          Try adding a UIComponent to the Canvas and draw with _its_ graphics object.

          HTH;

          Amy


          • 2. Re: Flex canvas clipping problem
            chuyler1 Level 1
            Nope, that doesn't work either. Here's what I tried...
            • 3. Re: Flex canvas clipping problem
              Level 7

              "chuyler1" <webforumsuser@macromedia.com> wrote in message
              news:glr5sd$i55$1@forums.macromedia.com...
              > Nope, that doesn't work either. Here's what I tried...
              >
              > <?xml version="1.0" encoding="utf-8"?>
              > <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml"
              > layout="absolute">
              > <mx:Script>
              > <![CDATA[
              > private function onCanvasCreationComplete():void
              > {
              > var g:Graphics = myCanvas.graphics;
              >
              > g.lineStyle(3,0x000000);
              > g.moveTo(myCanvas.width/2,myCanvas.height/2);
              > g.lineTo(myCanvas.width+100,myCanvas.height+100);
              > }
              > ]]>
              > </mx:Script>
              > <mx:Panel x="20" y="20" width="400" height="300" title="Canvas Test" >
              > <mx:Canvas width="100%" height="100%" clipContent="true">
              > <mx:UIComponent id="myCanvas" width="100%" height="100%"
              > creationComplete="onCanvasCreationComplete()"/>
              > </mx:Canvas>
              > </mx:Panel>
              > </mx:Application>

              You're still drawing with the canvas graphics object, and the UIComponent is
              not even inside the canvas.


              • 4. Re: Flex canvas clipping problem
                chuyler1 Level 1
                Take a closer look. The UIComponent is inside the Canvas and I just swapped the id tag from the Canvas to the UIComponent. If that is not what you intended, give me some pseudo code to better explain.
                • 5. Re: Flex canvas clipping problem
                  Level 7

                  "chuyler1" <webforumsuser@macromedia.com> wrote in message
                  news:glscbk$3il$1@forums.macromedia.com...
                  > Take a closer look. The UIComponent is inside the Canvas and I just
                  > swapped
                  > the id tag from the Canvas to the UIComponent. If that is not what you
                  > intended, give me some pseudo code to better explain.

                  You're right.

                  Try this instead:
                  <?xml version="1.0" encoding="utf-8"?>

                  <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">

                  <mx:Script>

                  <![CDATA[

                  private function onCanvasCreationComplete():void

                  {

                  var g:Graphics = myCanvas.graphics;


                  g.lineStyle(3,0x000000);

                  g.moveTo(myCanvas.width/2,myCanvas.height/2);

                  g.lineTo(myCanvas.width+100,myCanvas.height+100);

                  }

                  ]]>

                  </mx:Script>

                  <mx:Panel x="20" y="20" width="400" height="300" title="Canvas Test"
                  layout="absolute" >

                  <mx:Canvas width="100%" height="100%" clipContent="true">

                  <mx:UIComponent id="myCanvas" width="100%" height="100%"

                  creationComplete="onCanvasCreationComplete()" />

                  <mx:UIComponent id="dummy" x="-1" y="-1" width="1" height="1" />

                  </mx:Canvas>

                  </mx:Panel>

                  </mx:Application>

                  HTH;



                  Amy


                  • 6. Re: Flex canvas clipping problem
                    chuyler1 Level 1
                    Thanks! The work-around solved my problem. Is this a Flex bug? Should i report it?
                    • 7. Re: Flex canvas clipping problem
                      Level 7

                      "chuyler1" <webforumsuser@macromedia.com> wrote in message
                      news:glsjga$cb5$1@forums.macromedia.com...
                      > Thanks! The work-around solved my problem. Is this a Flex bug? Should i
                      > report it?

                      It's a known issue...not sure if it's in the bugbase. You could also
                      probably just set your UIComponent's width and height to be the container's
                      width and height +1 and then position it at -1, -1, rather than using a
                      separate UIComponent.