[转] Flash文本引擎, 第二部分: 交互
FTE交互
在前一篇文章中, 我介绍了如何渲染TextLine, 本文将介绍如何和已经创建的TextLine交互.
TextLine是一个InteractiveObjects对象, 你可以直接增加event listener以侦听哪些交互事件。
FTE也能让你为每一个ContentElement指定EventDispatcher. 当用户和ContentElement的数据交互时, 会clone到用户指定的EventDispatcher. 我在下面的讨论中, 你会发现每种方法都有其长处和短处.
方法一: 将TextLine看作InteractiveObject
因为TextLine是InteractiveObject, 你可以监听每个TextLine实例的键盘和鼠标事件. 这种方式, 你能知道是在和哪个TextLine在交互, 但主要缺点是对其所正在渲染的ContextElement却一无所知. 一个TextLine可以渲染多个ContentElement, 多个TextLine又可以渲染同一个ContentElement.
看下面的Demo:
package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.engine.*; import flash.utils.Dictionary; [SWF(width="235", height="100")] public class SimpleDemo2 extends Sprite { public function SimpleDemo2() { super(); setup(); } private var lineNumbers:Dictionary = new Dictionary(false); private function setup():void { addChild(lineHolder); lineHolder.y = 40; lineHolder.x = 130; var elements:Vector.<ContentElement> = new Vector.<ContentElement>(); elements.push( createTextElement('Be careless ', 26), createTextElement('in your dress if you will, ', 16), createTextElement('but keep a ', 20), createTextElement('tidy soul.', 26), createTextElement('\n - Mark Twain', 20) ); var i:int = 0; var block:TextBlock = new TextBlock(new GroupElement(elements)); var line:TextLine = block.createTextLine(null, 125); var _y:Number = 0; while(line) { addChild(line); _y += line.height; line.y = _y; line.addEventListener(MouseEvent.ROLL_OVER, onMouseEvent); line.addEventListener(MouseEvent.ROLL_OUT, onMouseEvent); line.addEventListener(MouseEvent.CLICK, onMouseEvent); line.addEventListener(MouseEvent.MOUSE_DOWN, onMouseEvent); line.addEventListener(MouseEvent.MOUSE_UP, onMouseEvent); lineNumbers[line] = ++i; line = block.createTextLine(line, 125); } } private function createTextElement(text:String, size:int):TextElement { return new TextElement(text, new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), size) ); } private function onMouseEvent(event:MouseEvent):void { var target:TextLine = TextLine(event.target); renderNotification(lineNumbers[target] + ': ' + event.type); } private var lineHolder:Sprite = new Sprite(); private function renderNotification(text:String):void { while(lineHolder.numChildren) lineHolder.removeChildAt(0); var block:TextBlock = new TextBlock( new TextElement(text, new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18) ) ); var line:TextLine = block.createTextLine(null, 200); while(line) { lineHolder.addChild(line); line.y = line.height; line = block.createTextLine(line, 200); } } [Embed(source="assets/Times New Roman.ttf", embedAsCFF="true", fontFamily="Times")] private var times:Class; } }
实际上, 有的情况, 你也没有必要知道是哪些ContentElement, 比如, 你不关心TextLine的修饰: 下划线, 删除线, 是否被选中.
下面的Demo是可以选择文字的:
package { import flash.display.Sprite; import flash.events.MouseEvent; import flash.geom.Point; import flash.geom.Rectangle; import flash.text.engine.*; import flash.ui.Mouse; import flash.ui.MouseCursor; [SWF(width="400", height="125")] public class FTEDemo7 extends Sprite { private var beginIndex:int = -1; private var endIndex:int = -1; private var lines:Array = []; public function FTEDemo7() { var elements:Vector.<ContentElement> = new Vector.<ContentElement>(); elements.push( createTextElement('He ', 20), createTextElement('who loves ', 16), createTextElement('practice ', 26), createTextElement('without ', 16), createTextElement('theory ', 26), createTextElement('is like the ', 16), createTextElement('sailor ', 20), createTextElement('who boards his ship without a ', 16), createTextElement('rudder ', 26), createTextElement('and ', 16), createTextElement('compass ', 26), createTextElement('and ', 16), createTextElement('never knows where he may cast.', 24), createTextElement('\n - Leonardo da Vinci', 22) ); var i:int = 0; var block:TextBlock = new TextBlock(new GroupElement(elements)); var line:TextLine = block.createTextLine(null, 400); var _y:Number = 0; while(line) { lines.push(addChild(line)); _y += line.height; line.y = _y; line.addEventListener(MouseEvent.MOUSE_DOWN, onMouseDown); line.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove); line.addEventListener(MouseEvent.ROLL_OVER, onRoll); line.addEventListener(MouseEvent.ROLL_OUT, onRoll); line = block.createTextLine(line, 400); } } private function createTextElement(text:String, size:int):TextElement { return new TextElement(text, new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), size) ); } private function onMouseDown(event:MouseEvent):void { stage.addEventListener(MouseEvent.MOUSE_UP, onMouseUp); graphics.clear(); var line:TextLine = TextLine(event.target); beginIndex = line.textBlockBeginIndex + line.getAtomIndexAtPoint(event.stageX, event.stageY); } private function onMouseMove(event:MouseEvent):void { if(!event.buttonDown) return; var line:TextLine = TextLine(event.target); endIndex = line.textBlockBeginIndex + line.getAtomIndexAtPoint(event.stageX, event.stageY); drawBackground(beginIndex, endIndex); } private function onMouseUp(event:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_UP, onMouseUp); var objs:Array = getObjectsUnderPoint(new Point(event.stageX, event.stageY)); var obj:Object; var found:Boolean = false; while(objs.length) { if(objs.pop() is TextLine) { found = true; break; } } Mouse.cursor = found ? MouseCursor.IBEAM : MouseCursor.ARROW; } private function drawBackground(begin:int, end:int):void { graphics.clear(); if(begin > end) { var begin2:int = begin; begin = end; end = begin2; } var line:TextLine; for(var i:int = 0; i < lines.length; i++) { line = lines[i]; if(line.textBlockBeginIndex <= begin && (line.textBlockBeginIndex + line.rawTextLength) >= begin) break; } var startLine:TextLine = line; for(i = 0; i < lines.length; i++) { line = lines[i]; if(line.textBlockBeginIndex <= end && (line.textBlockBeginIndex + line.rawTextLength) >= end) break; } var endLine:TextLine = line; line = startLine; var bounds:Rectangle; // Don't ever do this! // I'm only doing this because I don't want errors // and I didn't have time to vet this math 100%. try { while(true) { if(line == null) break; if(line == startLine) { if(startLine == endLine) bounds = line.getAtomBounds(Math.min(Math.max(begin - line.textBlockBeginIndex, 0), line.rawTextLength - 1)).union(line.getAtomBounds(Math.min(Math.max(end - line.textBlockBeginIndex, 0), line.rawTextLength - 1))); else bounds = line.getAtomBounds(Math.min(Math.max(begin - line.textBlockBeginIndex, 0), line.rawTextLength - 1)).union(line.getAtomBounds(line.rawTextLength - 1)); bounds.x += line.x; bounds.y += line.y; } else if(line == endLine) { bounds = line.getAtomBounds(Math.min(Math.max(end - line.textBlockBeginIndex, 0), line.rawTextLength - 1)).union(line.getAtomBounds(0)); bounds.x += line.x; bounds.y += line.y; } else bounds = line.getBounds(line.parent); graphics.beginFill(0x003399, 0.25); graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height); if(line == endLine) break; line = line.nextLine; } } catch(e:Error) { // Do noooothing } } private function onRoll(event:MouseEvent):void { Mouse.cursor = (event.type == MouseEvent.ROLL_OVER || event.buttonDown) ? MouseCursor.IBEAM : MouseCursor.ARROW; } [Embed(source="assets/Times New Roman.ttf", embedAsCFF="true", fontFamily="Times")] private var times:Class; } }
方法二: 用TextLineMirrorRegions (以面简写成TLMRs)
FTE交互的首选方式还是用 TextLineMirrorRegions, 上篇文章说过: 你必须用 TextElement, GraphicElement, or GroupElement 之一来创建文本实例. 创建后你可以设置ContentElement.eventMirror属性为你所指定的EventDispatcher. 这种方式能让你和特定的ContentElement交互.
在下面的demo代码中, 我创建了一个EventDispather对象, 并且设置给TextElement.eventMirror属性, 然后监听这个EventDispather对象的 mouseMove 事件, 每当Mouse over这个TextElement时, 就会trace下来.
var dispatcher:EventDispatcher = new EventDispatcher(); new TextElement('Inspiring quote here.', new ElementFormat( new FontDescription()), dispatcher); var onMouseMove:Function = function(e:MouseEvent):void{ trace('Mouse move on ' + e.target.toString()); } dispatcher.addEventListener(MouseEvent.MOUSE_MOVE, onMouseMove);
下面Demo中的两行文字是同一个TextElement的两个不同的部分:
package { import flash.display.Graphics; import flash.display.Sprite; import flash.events.EventDispatcher; import flash.events.MouseEvent; import flash.text.engine.*; [SWF(width="190", height="40")] public class SimpleDemo3 extends Sprite { public function SimpleDemo3() { super(); addChild(lineHolder); lineHolder.x = 100; var dispatcher:EventDispatcher = new EventDispatcher(); dispatcher.addEventListener(MouseEvent.MOUSE_MOVE, onMouseEvent); dispatcher.addEventListener(MouseEvent.MOUSE_OUT, onMouseEvent); dispatcher.addEventListener(MouseEvent.MOUSE_OVER, onMouseEvent); dispatcher.addEventListener(MouseEvent.MOUSE_DOWN, onMouseEvent); dispatcher.addEventListener(MouseEvent.MOUSE_UP, onMouseEvent); dispatcher.addEventListener(MouseEvent.CLICK, onMouseEvent); var block:TextBlock = new TextBlock(new TextElement('The quick brown fox...', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18), dispatcher)); var line:TextLine = block.createTextLine(null, 100); var _y:Number = 0; while(line) { addChild(line); _y += line.height; line.y = _y; line = block.createTextLine(line, 100); } } private function onMouseEvent(event:MouseEvent):void { var target:TextLine = TextLine(event.target); renderNotification(event.type); } private var lineHolder:Sprite = new Sprite(); private function renderNotification(text:String):void { while(lineHolder.numChildren) lineHolder.removeChildAt(0); var block:TextBlock = new TextBlock( new TextElement(text, new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18) ) ); var line:TextLine = block.createTextLine(null, 200); while(line) { lineHolder.addChild(line); line.y = line.height; line = block.createTextLine(line, 200); } } [Embed(source="assets/Times New Roman.ttf", embedAsCFF="true", fontFamily="Times")] private var times:Class; } }
和之前的Demo有什么不同之处? TextLine有一个mirrorRegions 属性, 保存了TextLineMirrorRegion数组(Vector). 由于多个ContentElement能被同一个TextLine所渲染, TextLine会为每个ContentElement创建TLMR实例, 并且分别赋给各个ContentElement.eventMirror属性.
TextLine会监听自己的交互事件, 当事件和任何一个TLMR的事件重叠时, TextLine会通知相应的TLMR. 在所有TextLine的正常事件处理结束后. 每个TLMR会用其eventMirror属性所指的EventDispather实例再次dispatch事件一次.
这个例子中, 我为TextLine和其ContentElement的eventMirror都监听了 "MouseDown" 事件. 注意eventMirror的事件触发的时间:
package { import flash.display.Sprite; import flash.events.EventDispatcher; import flash.events.MouseEvent; import flash.text.engine.*; import flash.utils.getTimer; [SWF(width="285", height="55")] public class SimpleDemo4 extends Sprite { public function SimpleDemo4() { addChild(lineHolder); lineHolder.x = 80; lineHolder.y = 5; addChild(lineHolder2); lineHolder2.x = 80; lineHolder2.y = 25; var dispatcher:EventDispatcher = new EventDispatcher(); dispatcher.addEventListener(MouseEvent.MOUSE_DOWN, onMouseMirrorEvent); var block:TextBlock = new TextBlock(new TextElement('Click Me.', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18), dispatcher)); var line:TextLine = block.createTextLine(null, 75); var _y:Number = 0; while(line) { addChild(line); _y += line.height; line.y = _y; line.addEventListener(MouseEvent.MOUSE_DOWN, onMouseLineEvent); line = block.createTextLine(line, 75); } } private var lineHolder:Sprite = new Sprite(); private var lineTime:Number = 0; private function onMouseLineEvent(event:MouseEvent):void { lineTime = getTimer(); var block:TextBlock = new TextBlock( new TextElement(event.type + ' from line', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 14) ) ); while(lineHolder.numChildren) lineHolder.removeChildAt(0); var line:TextLine = block.createTextLine(null, 200); var _y:Number = 0; while(line) { lineHolder.addChild(line); _y += line.height; line.y = _y; line = block.createTextLine(line, 200); } } private var lineHolder2:Sprite = new Sprite(); private function onMouseMirrorEvent(event:MouseEvent):void { var block:TextBlock = new TextBlock( new TextElement(event.type + ' from mirror, time between dispatches: ' + (getTimer() - lineTime) + 'ms', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 14) ) ); while(lineHolder2.numChildren) lineHolder2.removeChildAt(0); var line:TextLine = block.createTextLine(null, 200); var _y:Number = 0; while(line) { lineHolder2.addChild(line); _y += line.height; line.y = _y; line = block.createTextLine(line, 200); } } [Embed(source="assets/Times New Roman.ttf", embedAsCFF="true", fontFamily="Times")] private var times:Class; } }
下面的Demo, 我用TextLineMirrorRegion为每个Element设置了不同的样式
package { import flash.display.Sprite; import flash.events.EventDispatcher; import flash.events.MouseEvent; import flash.geom.Rectangle; import flash.text.engine.*; import flash.utils.Dictionary; [SWF(width="250", height="110")] public class FTEDemo5 extends Sprite { public function FTEDemo5() { super(); // Only two things are infinite, the universe and human stupidity, and I'm not sure about the former. -Albert Einstein var e1:TextElement = new TextElement('"Only ', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 16)); var e2:TextElement = new TextElement('two things', new ElementFormat( new FontDescription("Times", FontWeight.BOLD, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 24), new EventDispatcher()); var e3:TextElement = new TextElement(' are infinite, ', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 16)); var e4:TextElement = new TextElement('the universe', new ElementFormat( new FontDescription("Times", FontWeight.BOLD, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 26)); var e5:TextElement = new TextElement(' and ', new ElementFormat( new FontDescription("Times", FontWeight.BOLD, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 16)); var e6:TextElement = new TextElement('human stupidity', new ElementFormat( new FontDescription("Times", FontWeight.BOLD, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 26)); var e7:TextElement = new TextElement(', and ', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 16)); var e8:TextElement = new TextElement('I\'m not sure about the former.', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.ITALIC, FontLookup.EMBEDDED_CFF), 26), new EventDispatcher()); var e9:TextElement = new TextElement('" -', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.ITALIC, FontLookup.EMBEDDED_CFF), 16)); var e10:TextElement = new TextElement('Albert Einstein', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.ITALIC, FontLookup.EMBEDDED_CFF), 16), new EventDispatcher()); var colors:Array = [0x00FF00, 0xFF6600, 0x0066FF]; var mirrors:Dictionary = new Dictionary(); var color:uint; var regions:Vector.<TextLineMirrorRegion>; var region:TextLineMirrorRegion; var bounds:Rectangle; var vec:Vector.<ContentElement> = new Vector.<ContentElement>(); vec.push(e1, e2, e3, e4, e5, e6, e7, e8, e9, e10); var block:TextBlock = new TextBlock(new GroupElement(vec)); var line:TextLine = block.createTextLine(null, 250); var _y:Number = 0; while(line) { addChild(line); _y += line.height; line.y = _y; regions = line.mirrorRegions; while(regions && regions.length) { region = regions.pop(); if(region.mirror in mirrors) color = mirrors[region.mirror]; else color = colors.pop(); mirrors[region.mirror] = color; bounds = region.bounds; graphics.beginFill(color, 0.3); graphics.drawRect(bounds.x, bounds.y + line.y, bounds.width, bounds.height); } line = block.createTextLine(line, 250); } } [Embed(source="assets/Times New Roman.ttf", embedAsCFF="true", fontFamily="Times")] private var times:Class; } }
注意事项:
如果没有<注意事项>, 那就不是flash player的功能了 :)
TLMR只是模拟了事件, 它不会re-dispatch它从TextLine所接受到的实例, 因为TLMR不是一个InteractiveObject.
如果你用eventMirror来监听 MouseEvent, 你要意识到那是一个伪造的事件 -- 就算是target是TextLine, 也是这样,
这些事件不是源自TextLine, 这点和player原生的事件不一样.
Rollover/rollout事件
这种模拟机制, 也意味着我们受到Adobe选择这样做的摆布(或是限制), 他们觉得没有必要模拟rollover/rollout事件. 你会发现eventMirror并没有roll相关的事件. 由于ContentElement并没有display-list children, roll event的行为就和mouseover, mouseout的行为完全一样, 相必Adobe是基于这一点认为没有必要实现roll事件的.
然而, Roll事件还是非常有必要的,
尽管 ContentElement没有 display-list children, 然而它还是有 ContentElement children的, 相当于 ContentElement的层次结构代替了 disply 的层次结构, 所以 roll 事件还是必须的.
举个例子, 看下面的xml model的渲染:
<p> Outside the group. <group> <text color="#44AA00"> First group child. </text> <text color="#AA0044"> Second group child. </text> </group> Outside the group. </p>
上面这种case, 你可能想让group这个node作为一个整体来看待, （就像一个带children的DisplayObjectContainer 那样）.
下面就上这个xml model的例子, 你将鼠标在 First group child和 Second group child之间划动时, 你会发现你紧接着会看到来自group的 "mouseout", "mouseover"两个事件, 如果是roll 事件, 应该只会收到从child来的mouseover和mouseout, 应该没有group的相关mouseover和mouseout事件. 下面的这个demo, 按Mouse, 会清空 trace.
package { import flash.display.*; import flash.events.*; import flash.geom.Rectangle; import flash.text.engine.*; import flash.utils.Dictionary; import flashx.textLayout.formats.BaselineOffset; [SWF(width="400", height="110")] public class FTEDemo6 extends Sprite { public function FTEDemo6() { var e1:TextElement = new TextElement('Outside the group. ', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18)); var d2:EventDispatcher = new EventDispatcher(); d2.addEventListener(MouseEvent.MOUSE_OVER, function(e:Event):void{print("1: " + e.type);}); d2.addEventListener(MouseEvent.MOUSE_OUT, function(e:Event):void{print("1: " + e.type);}); var e2:TextElement = new TextElement('First group child. ', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18, 0x44AA00), d2); var d3:EventDispatcher = new EventDispatcher(); d3.addEventListener(MouseEvent.MOUSE_OVER, function(e:Event):void{print("2: " + e.type);}); d3.addEventListener(MouseEvent.MOUSE_OUT, function(e:Event):void{print("2: " + e.type);}); var e3:TextElement = new TextElement('Second group child. ', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18, 0xAA0044), d3); var e4:TextElement = new TextElement('Outside the group.', new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 18)); var vec:Vector.<ContentElement> = new Vector.<ContentElement>(); vec.push(e2, e3); var groupDispatcher:EventDispatcher = new EventDispatcher(); groupDispatcher.addEventListener(MouseEvent.MOUSE_OVER, function(e:Event):void{print("group: " + e.type);}); groupDispatcher.addEventListener(MouseEvent.MOUSE_OUT, function(e:Event):void{print("group: " + e.type);}); var group:GroupElement = new GroupElement(vec, null, groupDispatcher); var vec2:Vector.<ContentElement> = new Vector.<ContentElement>(); vec2.push(e1, group, e4); var block:TextBlock = new TextBlock(new GroupElement(vec2)); var line:TextLine = block.createTextLine(null, 200); var _y:Number = 0; while(line) { addChild(line); _y += line.height; line.y = _y; line = block.createTextLine(line, 200); } addChild(lineHolder); lineHolder.x = 200; addEventListener(MouseEvent.MOUSE_DOWN, clearLines); } private function clearLines(event:MouseEvent):void { while(lineHolder.numChildren) lineHolder.removeChildAt(0); } private var lineHolder:Sprite = new Sprite(); private function print(str:String):void { while(lineHolder.numChildren > 6) lineHolder.removeChildAt(0); var block:TextBlock = new TextBlock( new TextElement(str, new ElementFormat( new FontDescription("Times", FontWeight.NORMAL, FontPosture.NORMAL, FontLookup.EMBEDDED_CFF), 16) ) ); var line:TextLine = block.createTextLine(null, 200); while(line) { lineHolder.addChild(line); line = block.createTextLine(line, 200); } var child:DisplayObject; for(var i:int = 0; i < lineHolder.numChildren; i++) { child = lineHolder.getChildAt(i); child.y = (i+1) * child.height; } } [Embed(source="assets/Times New Roman.ttf", embedAsCFF="true", fontFamily="Times")] private var times:Class; } }
比较:
那, 怎么搭配这两种方法呢? 简而言之, 就是: 看情况. 如果你只是需要基本的交互功能, 而并不关心上下文(比如 selection你就需要关心上下文), 那就直接在TextLine上加listener. 如果你需要关心上下文, 需要知道是在和哪个ContentElement交互, 那你只能选择 event mirroring 的方式.
P.S.
也许我有点强迫症, 每次悬停在FTE文字上时, 我非常希望能看到 I 型的光标, 我最喜欢的Demo, 还是第二个, 因为我实现了 I 型的光标 :) , 总之, 希望你也喜欢! 祝你好运!
