0 Replies Latest reply on Sep 14, 2010 9:50 PM by CrimsonBruin

    Centering a Text Element within a Spark Group Container




      I am creating components dynamically using a class that I'm extending from FilledElement. I need to capture mouse events on these components, but Filled Elements cannot detect mouse events. I added a Group and then added my component to the group.  Now I can detect whether my component was clicked.


      My FilledElement shape is created by using drawPath in the overriden draw() function:




      if (_bitmap != null)


      _bitmap.scaleX = _scale;









      g.drawPath(_commands, _coordinates);






      When I click, the shape is filled with the selected bitmap.  I have a group of continguous components.  I also want to put a number on each component, so I did that by creating a Text element and adding it to the Group using addElement.  If I add a Text and set its x,y values such that they are in the top left hand corner of the component, everything is fine.  However, I would like the Text to be in the middle of the component.  When I do that, the fillling of the components goes awry.  When I click on component 2, for example, component 6 is filled.


      I looked at the size of the group using transform.pixelBounds.  It appears the group is the size of the text element.  Before I add the text element, the size of the group is 0, even though I've added a component.  I tried giving the component a height and width and it seams the text element is "pushed" out of the way, in the lower right hand corner.  I tried setting the size of the group to that of the component but that didn't work either.  It obviously has something to do with the group and size, but I'm not sure what.  When I say doesn't work, I mean I get the problem with the wrong components being filled.


      Any help would be appreciated.  Thanks!


      In the code below, pieceContainer is a Group, piece is a FilledElement and text is a Text.




      //1. clicking a piece fills a different piece
      text.width = piece.myWidth;
      text.height = piece.myHeight;


      //2. clicking a piece and filling it works; places text element top left hand corner

      //i don't want this, though, I want text to be centered.

      text.x = piece.coordinates[0];  //where coordinates[0], coordinates[1] is the x,y of the top left corner
      text.y = piece.coordinates[1];

      //3. this pushes the text element to the bottom right hand corner  
      //clicking a piece fills a different piece
      pieceContainer.x = piece.x;
      pieceContainer.y = piece.y;
      //4. this puts the element in the center of the piece, but the wrong shapes get filled upon click
      //clicking a piece fills a different piece
      text.x = piece.sequenceNumberPoint.x;

      text.y = piece.sequenceNumberPoint.y;
      text.horizontalCenter = text.x; text.verticalCenter = text.y;