6 Replies Latest reply on Feb 29, 2008 10:31 AM by aprildavid

    the canvas background color disappeared when using updateDisplayList

    aprildavid Level 1
      If I put code in the updateDisplayList for canvas. The background color is disappeared. if I called super.updateDsplayList(), all the drawing is not show.

      What 's wrong with my code or Canvas class?

      <?xml version="1.0"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:cmp="PlanUI.*" creationComplete="init()">
      <mx:Style source="2dStyle.css"/>
      <mx:Script>
      <![CDATA[
      import PlanUI.TestCanvas;

      public function init():void
      {
      var dc:TestCanvas=new TestCanvas();
      dc.percentWidth=100;
      dc.percentHeight=100;
      dc.setStyle("backgroundColor",0xFF0000);
      this.addChild(dc);


      }
      ]]>
      </mx:Script>

      </mx:Application>

      package PlanUI
      {
      import mx.containers.Canvas;

      public class TestCanvas extends Canvas
      {
      public function TestCanvas()
      {
      super();
      this.percentHeight=100;
      this.percentWidth=100;
      }

      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
      this.graphics.clear();
      // super.updateDisplayList(unscaledWidth, unscaledHeight);

      this.graphics.lineStyle(1,0xFF0000,0.3);
      this.graphics.drawRect(0,0,200,200);
      }
      }
      }


        • 1. the canvas background color disappeared when using updateDisplayList
          VarioPegged Level 2
          The red background color of the canvas is probably obscuring the rectangle's lineStyle (also red). If you set the lineStyle of the rectangle to color white and 10 pixels or so, you'll see it.

          You could also try this:
          1. Remove the backgroundColor style from the dc instance in your application.
          2. Then use the following in your updateDisplayList function to display a blue rectangle with white outline...

          super.updateDisplayList(unscaledWidth, unscaledHeight);
          this.graphics.clear();
          this.graphics.beginFill(0x0000FF, 1.0);
          this.graphics.lineStyle(1, 0xFFFFFF, 1.0);
          this.graphics.drawRect(0,0,unscaledWidth,unscaledHeight);
          this.graphics.endFill();

          If you don't want the blue background to show, set the alpha value of the fill to 0:
          this.graphics.beginFill(0x0000FF, 0);
          Only the white outline will show, indicating the size of the canvas (which is the size of the rectangle)

          What is it you're looking to do? Is this the same application where you're doing drag and drop?

          TS
          • 2. Re: the canvas background color disappeared when using updateDisplayList
            aprildavid Level 1
            Yes, it is the same drag and drop project.

            I changed color of draw rectangle The rectangle showed up. If I called super.updateDisplayList(unscaledWidth, unscaledHeight) in updateDisplayList function, the background will show up, however, show in front of the rectangle.
            There are 2 problems:
            1> background color is show in front of rectangle,
            2> I set rectangle.x=0, rectangle.y=0, but the begin point is out side of the the canvas.

            package PlanUI
            {
            import mx.containers.Canvas;

            public class TestCanvas extends Canvas
            {
            public function TestCanvas()
            {
            super();
            this.percentHeight=100;
            this.percentWidth=100;
            this.setStyle("borderThickness", 0);
            }

            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
            {

            // super.updateDisplayList(unscaledWidth, unscaledHeight);
            this.graphics.clear();
            this.graphics.lineStyle(33,0x00FF00,1.0);
            this.graphics.drawRect(0,0,unscaledWidth/2,unscaledHeight/2);
            // super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            }
            }

            <?xml version="1.0"?>
            <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" xmlns:cmp="PlanUI.*" creationComplete="init()">
            <mx:Style source="2dStyle.css"/>
            <mx:Script>
            <![CDATA[
            import PlanUI.TestCanvas;

            public function init():void
            {
            var dc:TestCanvas=new TestCanvas();
            dc.percentWidth=100;
            dc.percentHeight=100;
            dc.alpha=1.0;
            dc.setStyle("backgroundColor",0xFFEE00);
            this.addChild(dc);


            }
            ]]>
            </mx:Script>

            </mx:Application>

            • 3. Re: the canvas background color disappeared when using updateDisplayList
              VarioPegged Level 2
              I'll start with the second question...
              quote:

              2> I set rectangle.x=0, rectangle.y=0, but the begin point is out side of the the canvas.

              What you're seeing is the outline of the rectangle, since you have the weight of the stroke set pretty wide. Flash (Flex) renders the stroke of a graphic wider than the bounding rectangle of the fill if the stroke is anything more than a hairline stroke, so it appears like it doesn't "fit" inside the bounding rectangle of the fill. This is how graphics in Flash have always behaved.

              quote:

              1> background color is show in front of rectangle,

              Honestly, I don't know why the canvas' background color is rendered on top of the rectangle that is drawn via its own graphics object. Maybe someone else has the answer.

              I'm still curious just how you want to use your custom canvas class. Can you provide a brief description of the drop and drag functionality you're looking to use? Maybe I can provide a solution for you that involves a slightly different method.

              TS
              • 4. Re: the canvas background color disappeared when using updateDisplayList
                aprildavid Level 1
                thanks!

                I am doing a vector based drawing. They are some vector UI component on the left side, such as sofa, bed. User will drag and drop them into 2-d plan to do floor plan. Resize /move/ rotate them.

                Your support is highly apprecated!!
                Thanks again,
                • 6. Re: the canvas background color disappeared when using updateDisplayList
                  aprildavid Level 1
                  my solution:

                  It seems Canvas backgorund color is really wired. What I did is setting it to a close to transparent color 0xFFFFFE. SO it can do drag and drop. Even it is show in front of the other object, you can not see :)