4 Replies Latest reply on Apr 12, 2011 12:36 AM by Ranhiru

    Which event to use to draw a grid inside a Flex UI Component

    Ranhiru

      I am in need to provide a Snap To Grid functionality inside a BorderContainer. All the functionality is done but I am stuck with one issue which is drawing the grid.

      1. Tried using the Creation_Complete event, works fine but as soon as a child is added, the grid vanishes.

      2. Overrode the updateDisplayList - This was the best option so far (everything works fine), but the issue is whenever I move (or rather when moving) a control inside (I use ObjectHandles library) the updateDisplayList method is called which redraws the grid -> makes the moving process VERY laggy.

      This is how I fill the grid.

       

      numRows = Math.ceil(this.unscaledHeight/gridSize);
      numCols = Math.ceil(this.unscaledWidth/gridSize);
      
      this.graphics.beginFill(0x000000, 1.0);
      
      for (var i:int= 0; i < numRows; i++)
      {               
          for (var j:int = 0; j < numCols; j++)
          {       
      
              this.graphics.drawCircle(j * gridSize, i * gridSize, 1);
          }
      }
      
      this.graphics.endFill();
      
      

      I only want to draw it once, and draw it only when the container is resized. Is there any event that will help me achieve this? Or is there any efficient method of that will help me draw a grid? Any comments and suggestions are welcome. Thanx a lot in advance