3 Replies Latest reply on Jan 11, 2008 6:37 PM by David Havrda

    Help with rotated text labels

    HouserDesign
      I'm trying to create a simple grid data visualization. I'm using the Grid object to layout the elements. For the top row of labels, I want them rotated -90 degrees. I've accomplished this in a quick prototype and learned that I need to embed the font in order to have the text appear. Yet somehow, the containing element needs to be updated with the new size. So I've done this by placing the Text control inside a custom MXML component based on a Canvas object. The only problem is once I reset the size of the Canvas object, the text disappears.

      I have a live version with srcview at: http://www.houserdesign.com/matrix/

      Much thanks to anyone who might be able to help with this one. It seems like something that should be so simple, you know?
        • 1. Help with rotated text labels
          VarioPegged Level 2
          Whenever you use Canvas, you have to explicitly set the x and y coordinates of any of its children. Try setting the y coordinate for "textControl" within the RotatedLabel component to y="185" or so. It should be fine to leave the x coordinate value out, since the default value is x="0", but I put it in below just for grins. Also, you want the width of the RotatedLabel component to be equal to the height of textControl, so try this for RotatedLabel.mxml:


          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" creationComplete="init()" borderColor="#FFcccc" borderStyle="solid" borderThickness="1">
          <mx:Script>
          <![CDATA[
          import mx.controls.Alert;

          [Bindable]
          public var rotationAmt:Number;

          [Bindable]
          public var labelText:String;

          private function init():void{
          var w:Number = this.width;
          var h:Number = this.height;

          this.width = textControl.height; //plus whatever padding values you're using
          this.percentHeight = 100;

          textControl.validateDisplayList();
          textControl.validateSize();
          this.updateDisplayList(this.width, this.height);

          //Alert.show(this.width.toString() +" :: "+ this.height.toString());
          }
          ]]>
          </mx:Script>

          <mx:Text id="textControl" text="{labelText}" x="0" y="185" rotation="{rotationAmt}" textAlign="left" selectable="false" />
          </mx:Canvas>

          See if that works for you.

          TS
          • 2. Re: Help with rotated text labels
            HouserDesign Level 1
            That's it exactly!! Thank you very much for help. I really appreciate it!
            • 3. Re: Help with rotated text labels
              David Havrda
              I cant seem to get this to work. All I get is a vertical box with my text still in the horizontal position. Should I be doing something else?