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:fill>
                      <s:SolidColor color="0xFFFFFF" />
                  </s:fill>
                  <s:stroke>
                      <s:....
                  </s:stroke>
              </s:Rect>
          </s:Group>

       

      And NOT this way:

       

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

      </Group>

       

      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

           

          myGridSkin.mxml

          <?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">

           

          <fx:Metadata>

          <![CDATA[

            [HostComponent("spark.components.SkinnableContainer")]

          ]]>

          </fx:Metadata>

           

          <s:states>

            <s:State name="normal" />

            <s:State name="disabled" />

          </s:states>

           

               

               <fx:Script>

                    <![CDATA[               

                         protected function drawGrid(): void

                         {

            var i:int=0;

            var j:int=0;

            var s:int=15;

            grid.graphics.clear();

            grid.graphics.lineStyle(1,0x777777);

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

            {

              i +=s;

              grid.graphics.moveTo(i,0);

              grid.graphics.lineTo(i,hostComponent.height);

            }

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

            {

              j += s;

              grid.graphics.moveTo(0,j);

              grid.graphics.lineTo(hostComponent.width,j);

                              }     

                         }     

                    ]]>

               </fx:Script>

           

               <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()">

            <s:layout>

              <s:BasicLayout/>

                  </s:layout>

          </s:Group>

          </s:Skin>