1 Reply Latest reply on Sep 22, 2009 9:15 PM by David_F57

    Flex 4 drawing api

    flairjax Level 1

      Anyone know of a tut or example of drawing gridlines in a component with the new drawing api?


      I need to create a background grid for a component, but don't want to it manually, but rather using actionscript to do the drawing in a <s:Group><s:Rect)... based component.  I don't want to do it the following two ways as it is manual and the component might change its size. I need the lines drawn so they draw 20x20 squares with a width and height of a parent component.


      So NOT this way:


      <s:Group id="gridBackground">
              <s:Rect width="{stage.width}" height="{stage.height}">
                      <s:SolidColor color="0xFFFFFF" />


      And NOT this way:


        <Line x="90" yFrom="4" yTo="100">
            <SolidColorStroke color="#ccccaa" weight="2" />



      TIA, J

        • 1. Re: Flex 4 drawing api
          David_F57 Level 5

          There are several ways you could do this, I think a skin is probably a good way to do it, the code below would allow a skinnable container to have a grid



          <?xml version="1.0" encoding="utf-8"?>

          <s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" alpha.disabled="0.5">









            <s:State name="normal" />

            <s:State name="disabled" />






                         protected function drawGrid(): void


            var i:int=0;

            var j:int=0;

            var s:int=15;



            while (i < hostComponent.width-s-2)


              i +=s;




            while (j < hostComponent.height-s-2)


              j += s;








               <s:Graphic id="grid" left="0" right="0" top="0" bottom="0" />


          <s:Group id="contentGroup" left="0" right="0" top="0" bottom="0" minWidth="0" minHeight="0" resize="drawGrid()">