0 Replies Latest reply on Nov 4, 2010 9:05 AM by SiHoop

    Cannot draw graphics on a Canvas

    SiHoop Level 1

      I want to draw graphics on a canvas and I want the dimensions of the graphics to be dependent on the size of the Canvas. However, as soon as I enter a canvas.width, the graphics no longer appear. In the ColorBlock.as file, if I uncomment lines 10 and 11, and comment out line 12, the graphics fail to draw. Why does this happen?

       

       

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"  applicationComplete="init()">
          <mx:Script>
              <![CDATA[
                  import mx.events.FlexEvent;
                  private var chart:ColorBlock;
                  private function init():void{
                      chart=new ColorBlock();
                      comp.addChild(chart);
                          hBox.x=stage.stageWidth/2-hBox.width/2;
                          hBox.y=stage.stageHeight/2-hBox.height/2;
                          button.x=hBox.x+hBox.width +20
                          button.y=hBox.y+hBox.height +20
                  }
                  private function button1_clickHandler(event:MouseEvent):void{
                      trace("here")
                      hBox.x-=50
                  }
              ]]>
          </mx:Script>
          <mx:HBox  id="hBox" width="200" height="200" backgroundColor="0xffff00" >
              <mx:UIComponent id="comp"   />
          </mx:HBox>
          <mx:Button  id="button" click="button1_clickHandler(event)"  />
      </mx:Application>

       

      ColorBlock.as

       

      package{
          import flash.display.Sprite;
          import mx.containers.Canvas;
          public class ColorBlock extends Canvas{
              private var canvas:Canvas;
              public function ColorBlock(){
                  super();
                  canvas = new Canvas();       
                  canvas.graphics.beginFill(0xff0000,1)
      //            canvas.width=200;
      //            canvas.graphics.drawRect(10,0,canvas.width-20,10);
                  canvas.graphics.drawRect(10,0,180,10);
                  canvas.graphics.endFill();
                  addChild(canvas);
              }
          }
      }