7 Replies Latest reply on Nov 10, 2010 2:52 PM by Flex harUI

    Drawing in a container

    SiHoop Level 1

      I want to use graphics to draw in a container but I don't want the graphics to 'spill' out of the container. How can I make the container scrollable to access the part of the image the spills out of the container?

       

      Her's the code to illustrate what I mean:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   creationComplete="init()">
          <mx:Script>
              <![CDATA[
                  private function init():void{
                      canvas.graphics.beginFill(0xffff00);
                      canvas.graphics.drawRect(0,0,300,20);
                      canvas.graphics.endFill()
                  }
              ]]>
          </mx:Script>
      <mx:Canvas id="canvas"  x=" 500" y="500" width="100" height="50"  borderColor="0x000000"   borderThickness="5" borderStyle="solid"/>
      </mx:Application>

        • 1. Re: Drawing in a container
          Deepanjan Das Level 3

          Draw it on a Sprite and add it to the canvas. It will scroll automatically when the sprite width increases due to drawing.

           

          Warm Regards
          Deepanjan Das
          http://deepanjandas.wordpress.com

          • 2. Re: Drawing in a container
            SiHoop Level 1

            Thanks for your idea. I tried it as in the following code, but it failed.Can you tell me what I've done wrong?

             

            <?xml version="1.0" encoding="utf-8"?>
            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   creationComplete="init()">
                <mx:Script>
                    <![CDATA[
                        private function init():void{
                            var sprite:Sprite=new Sprite
                            sprite.graphics.beginFill(0xffff00);
                            sprite.graphics.drawRect(0,0,300,20);
                            sprite.graphics.endFill()
                            canvas.addChild(sprite)
                        }
                    ]]>
                </mx:Script>
            <mx:Canvas id="canvas"  x=" 500" y="500" width="100" height="50"  />
            </mx:Application>

            • 3. Re: Drawing in a container
              Flex harUI Adobe Employee

              Canvas children must be IUIComponents

              • 4. Re: Drawing in a container
                SiHoop Level 1

                Flex harUI,

                Does that mean the above response from Deepanjan Das is wrong?

                • 5. Re: Drawing in a container
                  Flex harUI Adobe Employee

                  Not in principle, but in the details, you can't just add a Sprite to a

                  Canvas.  What error did you get?

                   

                  If you swap the Sprite for a UIComponent and set percentWidth/Height=100 it

                  might work.

                   

                  There was another recent post where someone wanted to draw in a canvas.  You

                  might find that useful.

                  • 6. Re: Drawing in a container
                    SiHoop Level 1

                    Do you recall how long ago you saw the post about drawing in a canvas or how I might find it?

                     

                    Here's my error:

                    TypeError: Error #1034: Type Coercion failed: cannot convert flash.display::Sprite@7131df1 to mx.core.IUIComponent.

                     

                    I understand the error: I can't put a sprite into a canvas. If I use a UIComponent the sprite will show, but I cannot make the UIComponent scrollable, even if I put the height/ width to 100%. I also tried putting the UICompontnt into an HBOX with a width set to 100, but that made not difference:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"   creationComplete="init()">
                        <mx:Script>
                            <![CDATA[
                                import flash.display.Sprite;
                                import mx.core.UIComponent;
                                private function init():void{
                                    var sprite:Sprite=new Sprite();
                                    sprite.graphics.beginFill(0xffff00);
                                    sprite.graphics.drawRect(0,100,300,20);
                                    sprite.graphics.endFill()
                                    canvas.addChild(sprite)
                                }
                            ]]>
                        </mx:Script>
                    <mx:HBox width="100" height="10" x="100" y="100">
                        <mx:UIComponent id="canvas" x="1000"  height="100%" width="100%"  />
                    </mx:HBox>   
                    </mx:Application>

                    • 7. Re: Drawing in a container
                      Flex harUI Adobe Employee

                      If you want scrolling, you'll probably need to build a custom component.

                      See the doc on building custom components.  I answered the other post in the

                      last week or two.