1 Reply Latest reply on Jan 29, 2010 11:48 AM by Jason Szeto

    Losing one graphical element after drawing another.


      I am trying to draw a circle, and then inside of that, another circle.  I had this working with the code below, but once I tried to add a blur effect on the inner circle, it blurred both circles so the outline basically disappeared.  I am trying to create a LED effect.  Does anyone have any suggestions for accomplishing this?




      override protected function updateDisplayList(uw:Number, uh:Number):void




      var c1:Graphics = graphics;


      var c2:Graphics = graphics;




      c1.drawCircle(uw/2, uh/4, uw/5.5);




      var blur:BlurFilter = new BlurFilter();

      blur.blurX = 10;

      blur.blurY = 10;

      blur.quality = BitmapFilterQuality.HIGH;





      if( this._state == LEDIndicator.green)





      if( this._state == LEDIndicator.yellow)





      if( this._state == LEDIndicator.red)


      // this.filters = [blur];

      c2.drawCircle( uw/2, uh/4, uw/7);




        • 1. Re: Losing one graphical element after drawing another.
          Jason Szeto Level 3

          Your code is drawing into the same graphics object.


          var c1:Graphics = graphics;


          var c2:Graphics = graphics;


          This just points two variables to the same graphics reference. If you want to draw in different graphics objects, you need to create a DisplayObject (Shape or Sprite) for each. You would then attach each of those DisplayObjects to your class using addChild. Since filters apply to everything drawn in a graphics object, you'll need to create seperate DisplayObjects if you want to apply a blur to just one.


          Btw, doing this in Flex4 is much easier. With Spark, you have access to graphic primitives such as Ellipses, Rects, and Paths. And you can easily apply filters to each of them.



          1 person found this helpful