页游聊天模块图文混排解决方案
找了很长时间的聊天模块添加表情的解决方案。综合比较一下，最终选择闪刀浪子的TalkField。
选择它的理由：代码量小，简单易懂，使用方便。可以满足项目需求。
网上提供的其它几种方案，如果不能够熟知其原理，项目出什么问题了，维护起来时比较麻烦的。
预览：
主文档代码：
package { import flash.display.Loader; import flash.display.LoaderInfo; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.events.TextEvent; import flash.net.URLRequest; import flash.system.ApplicationDomain; public class Main extends Sprite { private var _loader:Loader; private var _outputText:TalkField; private var _inputText:TalkField; private var _sendBtn:Button;//发送按钮 private var _faceBar:MovieClip; private var _app:ApplicationDomain; [Embed(source="face.swf",mimeType="application/octet-stream")] public var swfClass:Class; public function Main() { _loader = new Loader(); _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,onComplete); //_loader.load(new URLRequest('face.swf')); _loader.loadBytes(new swfClass()); } private function onComplete(evt:Event):void { _app = (evt.currentTarget as LoaderInfo).applicationDomain; var _faceBarClass:Class = _app.getDefinition('faceBar') as Class; _faceBar = new _faceBarClass(); initText(); } private function initText():void { _outputText = new TalkField(300,200,_app); _outputText.tf.selectable = false; this.addChild(_outputText); _outputText.x = stage.stageWidth-_outputText.width >> 1; _outputText.y = 30; _outputText.tf.addEventListener(TextEvent.LINK,onLink); _inputText = new TalkField(300,26,_app,'input'); this.addChild(_inputText); _inputText.x = stage.stageWidth-_inputText.width >> 1; _inputText.y = 280; _inputText.setText('输入聊天信息'); _inputText.tf.restrict = '^/[\u3000]/g';//限制不许输入全角空格 this.addChild(_faceBar); _faceBar.x = 220; _faceBar.y = _inputText.y - 30; _faceBar.addEventListener(MouseEvent.CLICK,onBarClick); _sendBtn = new Button('发送'); this.addChild(_sendBtn); _sendBtn.x = _inputText.x + _inputText.width + 5; _sendBtn.y = _inputText.y; _sendBtn.addEventListener(MouseEvent.CLICK,sendMsg); } private function onBarClick(evt:MouseEvent):void { var str:String = evt.target.name.replace(/f/g,'/'); _inputText.tf.appendText(str); } private function onLink(evt:TextEvent):void { _inputText.setText(evt.text); } private var arr:Array = new Array(); private function sendMsg(event:MouseEvent):void { arr.push("/07<a href='event:这是我的姓名'><u>[鬼精灵]</u></a>说：" + _inputText.tf.text + '<br />'); _outputText.setMultiText(arr); _inputText.tf.text = ''; } } }
闪刀浪子开源类TalkField：
package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.MouseEvent; import flash.filters.GlowFilter; import flash.geom.Rectangle; import flash.system.ApplicationDomain; import flash.text.TextField; import flash.text.TextFieldType; import flash.text.TextFormat; /** * 图文显示框 * @author 闪刀浪子 * 使用方法： */ public class TalkField extends Sprite { private var _tf:TextField; private var _type:String; private var _tfMask:Sprite; private var _faceContainer:Sprite; private var _maskWidth:Number; private var _maskHeight:Number; private var _textFormat:TextFormat; private var _leading:Number private var _textColor:uint; private var _appDomain:ApplicationDomain; /** * 构造函数 * @param width 图文宽度 * @param height 图文框高度 * @param leading 显示的文本行的行间距 * @param appDomain 包含"facexx"的程序域 * @param textColor 默认文本的颜色，如果没有用<font>标签定义颜色，则使用此颜色 * @param alpha 图文框的背景透明度 */ public function TalkField(width:Number, height:Number, appDomain:ApplicationDomain = null,textType:String = 'dynamic', leading:Number=2,textColor:uint=0xffffff) { trace(TextFieldType.DYNAMIC); _maskWidth = width; _maskHeight = height; _leading = leading; _textColor = textColor _type = textType; _appDomain = appDomain==null?ApplicationDomain.currentDomain:appDomain; initView() initEvent(); } private function initView():void { createBK(); createMask(); createTF(); createFaceContainer(); } private function initEvent():void { addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheelHandler); } private function onMouseWheelHandler(e:MouseEvent):void { maskY -= (e.delta * 4.0); dispatchEvent(new Event("scroll")); } private function createBK():void { graphics.beginFill(0, 0.3); graphics.drawRect( 0, 0, _maskWidth + 10, _maskHeight + 14); graphics.endFill(); } private function createMask():void { _tfMask = new Sprite(); _tfMask.graphics.beginFill(0x000000); _tfMask.graphics.drawRect(0, 0, _maskWidth, _maskHeight); _tfMask.graphics.endFill(); addChild(_tfMask); } private function createTF():void { _textFormat = new TextFormat; _textFormat.color=_textColor; _textFormat.size = 12; _textFormat.letterSpacing = 0.75; _textFormat.leading = _leading; _tf = new TextField(); _tf.textColor = 0xffffff; _tf.width = _maskWidth; _tf.defaultTextFormat = _textFormat; // _tf.selectable = false; _tf.multiline = true; _tf.wordWrap = true; _tf.autoSize = "left"; _tf.type = _type; _tf.filters = [new GlowFilter(0x000000, 0.95, 2, 2, 10)]; _tf.mouseWheelEnabled = false; addChild(_tf); _tf.mask = _tfMask; } private function createFaceContainer():void { _faceContainer = new Sprite(); _faceContainer.scrollRect = new Rectangle(0, 0, _maskWidth, _maskHeight); addChild(_faceContainer); } private function clearFaceContain():void { while (_faceContainer.numChildren > 0) { _faceContainer.removeChildAt(0); } } /** * 聊天显示框 * @param str 必须为htmlText格式 */ public function setText(str:String):void { _tf.text = ""; _tf.defaultTextFormat = _textFormat; var faceArr:Array = []; clearFaceContain(); //保存表情符的编号并替换为空格,此处可以根据你的表情数量来修改正则表达式 //表情素材的导出类名规则为——face01-face05 var face:Array = str.match(/\/(0[1-7])/g); if (face != null) { faceArr = faceArr.concat(face); } //注意这里是将表情编号替换为全角的空格，所以记住你的输入框要禁止玩家输入全角空格 //需要替换的内容是：*01 - *09 str = str.replace(/\/(0[1-7])/g, "<font size='24'> </font>"); _tf.htmlText = str; _tf.height; //记录空格的索引号 var text:String = _tf.text; var indexArr:Array = []; for (var index:int = 0; index < text.length; index++) { if (text.charAt(index) == " ") { indexArr.push(index); } } _tf.height; for (var j:uint = 0; j < indexArr.length; j++) { var tempPos:Rectangle = _tf.getCharBoundaries(indexArr[j]); var linkClass:Class = _appDomain.getDefinition("face" + faceArr[j].substr(1, 2)) as Class; if (linkClass != null&&tempPos!=null) { var mc:MovieClip = new linkClass as MovieClip; _faceContainer.addChild(mc); mc.x = tempPos.x; mc.y = tempPos.y+3; } } dispatchEvent(new Event(Event.CHANGE)); } /** * 设置文本 * @param arr 频道数组 */ public function setMultiText(arr:Array):void { if (arr == null) return; _tf.text = ""; _tf.defaultTextFormat = _textFormat; var faceArr:Array = []; clearFaceContain(); var allStr:String="" for (var i:uint = 0; i < arr.length; i++) { var str:String = arr[i]; var face:Array = str.match(/\/(0[1-7])/g); if (face != null) { faceArr = faceArr.concat(face); } str = str.replace(/\/(0[1-7])/g, "<font size='24'> </font>"); allStr += str; } _tf.htmlText = allStr; _tf.height; //记录空格的索引号 var text:String = _tf.text; var indexArr:Array = []; for (var index:int = 0; index < text.length; index++) { if (text.charAt(index) == " ") { indexArr.push(index); } } _tf.height; for (var j:uint = 0; j < indexArr.length; j++) { var tempPos:Rectangle = _tf.getCharBoundaries(indexArr[j]); var linkClass:Class = _appDomain.getDefinition("face" + faceArr[j].substr(1, 2)) as Class; if (linkClass != null&&tempPos!=null) { var mc:MovieClip = new linkClass as MovieClip; _faceContainer.addChild(mc); mc.x = tempPos.x; mc.y = tempPos.y+3; } } dispatchEvent(new Event(Event.CHANGE)); } /* INTERFACE game.ui.list.IScrollElement */ public function get maskX():Number { return _faceContainer.scrollRect.x; } public function set maskX(val:Number):void { var rec:Rectangle = _faceContainer.scrollRect; rec.x = val; _tf.x = -val; _faceContainer.scrollRect = rec; } public function get maskY():Number { return _faceContainer.scrollRect.y; } public function set maskY(val:Number):void { var rec:Rectangle = _faceContainer.scrollRect; if (val < 0) val = 0; else if (val > maxScroll) val = maxScroll; _tf.y = -val; rec.y = val; _faceContainer.scrollRect = rec; } public function get minScroll():Number { return 0; } public function get maxScroll():Number { if (_tf.height <= _tfMask.height) return 0; else return _tf.height - _tfMask.height; } public function get tf():TextField { return _tf; } } }
