5 Replies Latest reply on Jan 12, 2011 10:36 PM by Jenn1ngs

    implementing "Left" and "Right" with a Custom GraphicElement


      Hi, I extended the GraphicElement class to create a dynamic spark star ( actually I extended the "FilledElement" which subclasses GraphicElement ).


      I got the draw functionality to work fine, It is implemented in much the same way one would implement a rect or ellipse spark primitive, with the exception of using an inner and outer radius rather than width and height. And therein lies the problem:


      when i set the left, right, top, bottom, width, or height properties, they are ignored. I assume that there are more functions i need to override to create this functionality, and was hoping to gather a little insight.


      Both Ellipse and Rect override the following protected functions


      transformWidthForLayout( width:Number, height:Number, postLayoutTransform:Boolean = true ):Number

      transformHeightForLayout( width:Number, height:Number, postLayoutTransform:Boolean = true ):Number


      getBoundsXAtSize( width:Number, height:Number, postLayoutTransform:Boolean = true ):Number

      getBoundsYAtSize( width:Number, height:Number, postLayoutTransform:Boolean = true ):Number


      getLayoutBoundsX( postLayoutTransform:Boolean = true ):Number

      getLayoutBoundsY( postLayoutTransform:Boolean = true ):Number


      in addition to draw( g:Graphics ):void.


      Is this what my element is missing to enable traditional relative layout functionality?

      and if so, could someone please offer a little insight on the objectives of these functions? the reference library was fairly vague.


      thanks in advanced,


        • 1. Re: implementing "Left" and "Right" with a Custom GraphicElement
          Flex harUI Adobe Employee

          What does your override of draw() look like and what are the drawX/Y and

          width/height properties when it gets called?

          • 2. Re: implementing "Left" and "Right" with a Custom GraphicElement
            Jenn1ngs Level 1

            override protected function draw( g:Graphics ):void
                    var start:Number = ( Math.PI / 2 );

                    var step:Number = Math.PI * 2 / _points;

                    var rad:Number = outerRadius;        

                    var inRad:Number = innerRadius;

                    var angle:Number = start;            

                    var stepAngle:Number = angle - step / 2;

                    var x:Number = rad * Math.cos( stepAngle ) + rad;
                    var y:Number = rad * Math.sin( stepAngle ) + rad;

                    g.moveTo( x,y );
                    x = inRad * Math.cos( angle ) + rad;
                    y = inRad * Math.sin( angle ) + rad;
                    g.lineTo( x, y );
                    for( var i:int = 1; i < points; i++ )
                         angle = start + ( i * step );
                         stepAngle = angle - step / 2;
                         g.lineTo( rad  *  Math.cos( stepAngle )  + rad,
                         rad  *  Math.sin( stepAngle )  + rad );
                         g.lineTo( inRad *  Math.cos( angle )  + rad,
                         inRad *  Math.sin( angle )  + rad );


            Theres my draw override, i am not touching drawX, drawY, width, or height.


            Is there a "best practices" document on extending the GraphicElement somewhere, because I think I am kinda missing the point. It would seem that in order to utilize the built in dynamic layout functionality that I cant bypass using height and width in my draw routine. ( or this drawX and drawY you mentioned )

            • 3. Re: implementing "Left" and "Right" with a Custom GraphicElement
              Jenn1ngs Level 1

              So, I experimented making a new GraphicElement, just drawing a rectangle:


              override protected function draw(g:Graphics):void
                 g.drawRect( drawX, drawY, width, height );


              and all the layout functionality worked out ( i.e. it responded to right, left, width...etc ). So thank you for putting me on that track.


              The question is, how would one draw radial based shapes using this same approach, and maintain functionality... i guess you would just have to modify your radius variables to be functions of width, height, drawX, and drawY.

              • 4. Re: implementing "Left" and "Right" with a Custom GraphicElement
                Flex harUI Adobe Employee

                Yeah, I think you find the center, do the math to determine the distance to

                the edges of the bounding box and go from there.

                • 5. Re: implementing "Left" and "Right" with a Custom GraphicElement
                  Jenn1ngs Level 1

                  Thanks for your help, working like a charm.


                  Take Care