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>