1 Reply Latest reply on Dec 17, 2010 7:28 AM by textlayers

    Calculate TextFlow width

    asagohan

      Is it possible to make a TextFlow on a single line and then calculate the width of a TextFlow?

      Or is it possible to calculate how long a TextFlow will be if it was on a single line?

      I want to be able to resize a selection box to the size of the text, and the the text will always be on a single line.

        • 1. Re: Calculate TextFlow width
          textlayers

          Yes, you can use the multiline attribute (false) of the richtext container to make it the textflow one line.

          Then, after the "CREATION_COMPLETE" event, you can find the size of the text flow and resize your container.

          My code works and can push you in the right direction.  I have found that the resizing code is quite difficult to get right for all of the cases.

          My textflow is NOT a single line.

           

          (I use a similar approach to resize a container to the size of the textflow:

           

          This is the code that creates  everything

           

                      scroller = new SxScroller();
                      scroller.dx = dxScroller;
                      scroller.dy = dyScroller;
                      scroller.addEventListener(FlexEvent.CREATION_COMPLETE,creationComplete);

           

                      richText = scroller.richText;
                     
                      richText.editable = false; // textCharacter.enableEdit; // probably false.  TODO:  support true???
                      richText.selectable = true; // required
                     
                      richText.width = dxRichText;
                      richText.height = dyRichText;    

          ...

          richText.textFlow = TextFlowUtil.importFromString(textFlow, flashx.textLayout.formats.WhiteSpaceCollapse.PRESERVE);

                Then I use my "get" size methods to discover the content size (see below)

           

          And resize like this:

                                      richText.width = dxNew;
                                      richText.height = dyNew;

           

           

                  public function get dxContent():int {
                      var mN:String = cN+".get dxContent ";
                      return scroller ? (richText ? richText.contentWidth : 0) : 0;
                  }
                  public function get dyContent():int {
                      var mN:String = cN+".get dyContent ";
                      return scroller ? (richText ? richText.contentHeight : 0) : 0;            
                  }

           

           

           

          My custom scroller class:

           

          <?xml version="1.0" encoding="utf-8"?>
          <s:Scroller
              width="100%" height="100%"
              xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:mx="library://ns.adobe.com/flex/mx"
              skinClass="components.skins.SxScrollerSkin"
              >
             
              <!---
              Purpose: 
              Usage:
              Details:
              -->
             
              <fx:Script>
                  <![CDATA[
                      private var cN:String="SxScroller(MXML)"
                     
                      public function set dx(value:int):void {
                          width = value;
                      }
                      public function get dx():int {
                          return width;
                      }
                     
                      public function set dy(value:int):void {
                          height = value;
                      }
                      public function get dy():int {
                          return height;
                      }
                     
                      public function get richText():RichEditableText{
                          return myRichText;
                      }
                  ]]>
                 
              </fx:Script>
             
              <s:Group id="myGroup" width="100%" height="100%">
                  <s:RichEditableText id="myRichText" selectable="true">
                  </s:RichEditableText>
              </s:Group>
          </s:Scroller>