TextLayOut研究 游戏聊天表情实现

1.拷贝Text Layout Framework 的三个swc（textLayout_conversion.swc、textLayout_core.swc、textLayout_edit.swc）到项目的libs目录中

2.更新到Flash Player10 http://www.adobe.com/support/flashplayer/downloads.html 关于flshplayer10的新特性和相关资料，请查看 http://www.5uflash.com/yejiezatan/ziyuanfenxiang/3278.html

3.设置flex项目的属性Flex Compiler的Require Flash Player version为：10.0.0

mxml代码

 <?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
     width="400"
     height="300"
     scroll="scrollListener(event)"
     creationComplete="initLoad()"
     show="onShow()">
 <mx:Script>
  <![CDATA[
   import flashx.textLayout.conversion.ConversionType;
   import flashx.textLayout.formats.TextAlign;
   import flashx.textLayout.formats.TextDecoration;
   import flashx.textLayout.elements.SpanElement;
   import flashx.textLayout.formats.ContainerFormat;
   import flash.text.engine.TextBaseline;
   import flashx.textLayout.edit.SelectionManager;
   import flashx.textLayout.conversion.TextFilter;
   import flashx.textLayout.container.DisplayObjectContainerController;
   import mx.core.UIComponent;
   import flashx.textLayout.container.IContainerController;
   import flashx.textLayout.elements.TextFlow;
   import flashx.textLayout.container.ContainerControllerBase;
   import flashx.textLayout.formats.CharacterFormat;
   import flashx.textLayout.elements.InlineGraphicElement;
   import flashx.textLayout.elements.LinkElement;
   import flashx.textLayout.elements.ParagraphElement;
   import flashx.textLayout.events.FlowElementMouseEvent;
   import flashx.textLayout.events.StatusChangeEvent;
   import flashx.textLayout.events.CompositionCompletionEvent;
   private var _textFlow:TextFlow; //文本流
   private var _textContainer:Sprite; //文本容器
   private var controller:IContainerController;
   private var _para:ParagraphElement;
   private static const _textInput:XML=<TextFlow xmlns="http://ns.adobe.com/textLayout/2008"></TextFlow>;
   [Bindable]
   public var hrefFun:Function;

   [Bindable]
   public var maxLineCount:int=50 //最大消息数

   public var isFirstLoad:Boolean=true;
   [Bindable]
   private var rect:Rectangle=new Rectangle(0, 0, 200, 500);

   private function initLoad():void
   {
    _textFlow=new TextFlow;
    _textContainer=new Sprite();
    rawChildren.addChild(_textContainer);
    controller=new DisplayObjectContainerController(_textContainer, UI.width, UI.height);
    _textFlow.flowComposer.addController(controller);
    _textFlow.addEventListener(StatusChangeEvent.INLINE_GRAPHIC_STATUS_CHANGED, picLoaded);
    _textFlow.addEventListener(CompositionCompletionEvent.COMPOSITION_COMPLETE, composeListener);
    _textFlow.addEventListener(flashx.textLayout.events.ScrollEvent.SCROLL, scrollTextFlow);
    _textFlow.dominantBaseline=TextBaseline.IDEOGRAPHIC_CENTER;
    _textFlow.breakOpportunity="none";
    _textFlow.lineHeight=22;
    _textFlow.fontSize=12;
    _textFlow.fontFamily="宋体";
    _textFlow.paddingBottom=4;
    _textFlow.paddingTop=2;
    _textFlow.paddingLeft=2;
    _textFlow.flowComposer.updateAllContainers();
   }

   private function onReszie():void
   {
    if ((controller != null) && (this.visible == true))
    {
     controller.setCompositionSize(UI.width, UI.height);
     scrollCan.height=UI.height;
     
     _textFlow.flowComposer.updateAllContainers();
    }
   }

   private function onShow():void
   {
    if (controller != null)
    {
     controller.setCompositionSize(UI.width, UI.height);
     //scrollCan.height=UI.height;
     var textHeight:int=Math.ceil(controller.calculateHeight());
     scrollCan.height=textHeight;
     _textFlow.flowComposer.updateAllContainers();
    }
   }

   private function scrollTextFlow(event:flashx.textLayout.events.ScrollEvent):void
   {
   }

   private function composeListener(event:CompositionCompletionEvent):void
   {
    var textHeight:int=Math.ceil(controller.calculateHeight());
    scrollCan.height=textHeight;
    if (textHeight >= controller.compositionHeight)
    {
     this.validateNow();
     this.verticalScrollPosition=this.maxVerticalScrollPosition + 5;
     controller.verticalScrollPosition=this.maxVerticalScrollPosition; //滚动条自动滚动到最下面，方便用户看聊天记录
    }
   }

   /**
    * 滚动侦听
    */
   private function scrollListener(event:Event):void
   {
    controller.verticalScrollPosition=this.verticalScrollPosition;
   }

   private function picLoaded(event:StatusChangeEvent):void
   {
    _textFlow.flowComposer.updateAllContainers();
   }

   /**
    *改变字体大小
    * @param value
    *
    */
   public function changeFontSize(value:int):void
   {
    var cf:CharacterFormat=new CharacterFormat(_textFlow.characterFormat);
    cf.fontSize=value;
    _textFlow.characterFormat=cf;
    _textFlow.flowComposer.updateAllContainers();
   }

   /**
    *
    * @param value
    *
    */
   public function changeNoColumns(value:int):void
   {
    var cf:ContainerFormat=new ContainerFormat(_textFlow.containerFormat);
    cf.columnCount=value;
    cf.columnGap=15;
    _textFlow.containerFormat=cf;
    _textFlow.flowComposer.updateAllContainers();
   }

   public function changeTextDirection(value:String):void
   {
    _textFlow.direction=value;
    _textFlow.flowComposer.updateAllContainers();
   }

   /**
    *添加链接文本
    * @param linktext
    * @param href
    * @param para
    *
    */
   public function addLinkText(linktext:String, href:String, para:ParagraphElement=null, color:uint=0):void
   {
    if (para == null)
     para=_para;
    var l:LinkElement=new LinkElement;
    var ls:SpanElement=new SpanElement;
    ls.textDecoration=TextDecoration.UNDERLINE
    ls.color=color;
    ls.fontSize=12;
    ls.fontFamily="宋体";
    ls.text=linktext;
    ls.dominantBaseline=TextBaseline.IDEOGRAPHIC_BOTTOM;
    l.href="event:" + href;
    l.addChild(ls);
    l.addEventListener(MouseEvent.CLICK, onHrefClick);
    para.addChild(l);
   }

   /**
    *链接文本点击事件
    * @param event
    *
    */
   private function onHrefClick(event:FlowElementMouseEvent):void
   {
    var str:String=(LinkElement(event.flowElement).href + "").replace("event:", "");
    if (hrefFun != null)
    {
     hrefFun(str);
    }
   }

   /**
    * 添加图形
    * @param graph
    * @param para
    *
    */
   public function addGraphics(url:String, para:ParagraphElement=null):void
   {
    if (para == null)
     para=_para;
    var i:InlineGraphicElement=new InlineGraphicElement;
    i.source=url;
    para.addChild(i);
   }

   /**
    * 添加文本
    * @param str
    *
    */
   public function addText(str:String, para:ParagraphElement=null, color:uint=0x000000):void
   {
    if (para == null)
     para=_para;
    var s:SpanElement=new SpanElement;
    s.text=str;
    s.fontFamily="宋体";
    s.fontWeight="normal";
    s.fontSize=12;
    s.color=color;
    para.addChild(s);
   }

   /**
    *添加段落
    *
    */
   public function addParagraph(color:uint=0):void
   {
    var para:ParagraphElement=new ParagraphElement();
    validate();
    _textFlow.addChild(para);
    para.fontFamily="宋体";
    para.color=color;
    para.fontWeight="normal";
    para.fontSize=12;
    para.textAlign=TextAlign.LEFT;
    _para=para;
    if (isFirstLoad == true)
    {
     removeFirstParagraph();
     isFirstLoad=false;
    }
   }

   public function getParagraph():ParagraphElement
   {
    return _para;
   }

   /**
    * 移除首段落
    *
    */
   public function removeFirstParagraph():void
   {
    var len:int=_textFlow.numChildren;
    if (len > 0)
    {
     _textFlow.removeChildAt(0);
    }
    //refresh();
   }

   /**
    *验证缓存数
    *
    */
   private function validate():void
   {
    var len:int=_textFlow.numChildren;
    if (len >= maxLineCount)
    {
     removeFirstParagraph();
    }
   }

   /**
    *清除全部内容
    *
    */
   public function clear():void
   {
    var len:int=_textFlow.numChildren;
    for (var i:int=0; i < len; i++)
    {
     _textFlow.removeChildAt(0);
    }
    isFirstLoad=true;
    controller.verticalScrollPosition=0;
    this.verticalScrollPosition=0;
    refresh();
   }

   /**
    *刷新数据
    *
    */
   public function refresh():void
   {
    _textFlow.flowComposer.updateAllContainers();
   }
  ]]>
 </mx:Script>
 <mx:Canvas width="100%"
      height="100"
      id="scrollCan">
 </mx:Canvas>
 <mx:Canvas id="UI"
      width="{this.width-16}"
      height="100%"
      resize="onReszie()">
 </mx:Canvas>
</mx:Canvas>