在TWaver Flex中实现垂直文字布局
? ? ?最近有客户提到如何让Network上网元的标签垂直显示，首先想到的就是每个字符之间插入一个回车。这个用Network#labelFunction就能达到目的：
network.labelFunction = function (element:IElement):String {var name:String = element.name;if(element.getClient('vertical')) {var result:String = '';for(var i:int=0,n:int=name.length; i<n; i++) {result += name.charAt(i) + '\n';}result = result.substr(0, result.length-1);return result;} else {return name;}};? ??来段代码测试看看：
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex"layout="absolute" width="100%" height="100%"creationComplete="init()" backgroundColor="#FFFFFF" ><mx:Script><![CDATA[import twaver.Consts;import twaver.ElementBox;import twaver.IElement;import twaver.Node;import twaver.Styles;private var box:ElementBox = new ElementBox();private function init():void {network.labelFunction = function (element:IElement):String {var name:String = element.name;if(element.getClient('vertical')) {var result:String = '';for(var i:int=0,n:int=name.length; i<n; i++) {result += name.charAt(i) + '\n';}result = result.substr(0, result.length-1);return result;} else {return name;}};var node1:Node = new Node();node1.location = new Point(100, 100);node1.setStyle(Styles.LABEL_POSITION, Consts.POSITION_LEFT_LEFT);node1.setClient('vertical', true);node1.name = '竖向文字Vertical Text';box.add(node1);network.elementBox = box;}]]></mx:Script><twaver:Network id="network" width="100%" height="100%" /></mx:Application>?
? ? ? 运行效果如下：
? ? ?上面的方法很容易让文字垂直显示，但效果不是很理想，中英文混合时，英文也被一个字母一个字母地分开了。有没有更好的方案？答案是肯定的，借助于Flex的Flash Text Engine (FTE)和Text Layout Framework (TLF)，可以很容易的让文字从上到下显示。
? ? ? 先来看看一个小例子，设置TextLayoutFormat的blockProgression属性为BlockProgression.RL即可：
package {import flash.display.Sprite;import flashx.textLayout.container.ContainerController;import flashx.textLayout.conversion.TextConverter;import flashx.textLayout.elements.TextFlow;import flashx.textLayout.formats.BlockProgression;import flashx.textLayout.formats.TextLayoutFormat;public class StaticHelloWorld extends Sprite {public function StaticHelloWorld() {var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();textLayoutFormat.lineHeight = 30;textLayoutFormat.locale = 'zh';textLayoutFormat.blockProgression = BlockProgression.RL;var text:String = "测试竖向文字，再看看English如何？";var textFlow:TextFlow = TextConverter.importToFlow(text, TextConverter.PLAIN_TEXT_FORMAT);textFlow.hostFormat = textLayoutFormat;textFlow.flowComposer.addController(new ContainerController(this, 25, 200));textFlow.flowComposer.updateAllControllers();}}}?
运行效果如下：
? ? ? ?的确这样效果就好多了，英文不会被一个字母一个字母地打断，然后我们自定义一个Attachment：
package {import flash.display.Sprite;import flash.text.engine.FontPosture;import flash.text.engine.FontWeight;import flashx.textLayout.container.ContainerController;import flashx.textLayout.elements.ParagraphElement;import flashx.textLayout.elements.SpanElement;import flashx.textLayout.elements.TextFlow;import flashx.textLayout.formats.BlockProgression;import flashx.textLayout.formats.TextDecoration;import flashx.textLayout.formats.TextLayoutFormat;import twaver.Styles;import twaver.network.ui.BasicAttachment;import twaver.network.ui.ElementUI;public class FTELabelAttachment extends BasicAttachment {private var textLayoutFormat:TextLayoutFormat = new TextLayoutFormat();public function FTELabelAttachment(elementUI:ElementUI, showInAttachmentCanvas:Boolean=false) {super(elementUI, showInAttachmentCanvas);this.textLayoutFormat.locale = 'zh';this.textLayoutFormat.blockProgression = BlockProgression.RL;}override public function updateProperties():void {super.updateProperties();this.textLayoutFormat.fontFamily = element.getStyle(Styles.LABEL_FONT);this.textLayoutFormat.color = element.getStyle(Styles.LABEL_COLOR);this.textLayoutFormat.fontSize = element.getStyle(Styles.LABEL_SIZE);this.textLayoutFormat.fontStyle = element.getStyle(Styles.LABEL_ITALIC) ? FontPosture.ITALIC : FontPosture.NORMAL;this.textLayoutFormat.fontWeight = element.getStyle(Styles.LABEL_BOLD) ? FontWeight.BOLD : FontWeight.NORMAL;this.textLayoutFormat.textDecoration = element.getStyle(Styles.LABEL_UNDERLINE ? TextDecoration.UNDERLINE : TextDecoration.NONE);var textFlow:TextFlow = new TextFlow();textFlow.hostFormat = this.textLayoutFormat;var p:ParagraphElement = new ParagraphElement();textFlow.addChild(p);var span:SpanElement = new SpanElement();span.text = network.getLabel(element);p.addChild(span);var fteLabel:Sprite = new Sprite();this.content = fteLabel;var containerController:ContainerController = new ContainerController(fteLabel, this.textLayoutFormat.fontSize, 1000);textFlow.flowComposer.addController(containerController);textFlow.flowComposer.updateAllControllers();}override public function get position():String {return element.getStyle(Styles.LABEL_POSITION);}override public function get xOffset():Number {return element.getStyle(Styles.LABEL_XOFFSET);}override public function get yOffset():Number {return element.getStyle(Styles.LABEL_YOFFSET);}override public function get padding():Number {return element.getStyle(Styles.LABEL_PADDING);}override public function get paddingLeft():Number {return element.getStyle(Styles.LABEL_PADDING_LEFT);}override public function get paddingRight():Number {return element.getStyle(Styles.LABEL_PADDING_RIGHT);}override public function get paddingTop():Number {return element.getStyle(Styles.LABEL_PADDING_TOP);}override public function get paddingBottom():Number {return element.getStyle(Styles.LABEL_PADDING_BOTTOM);}override public function get cornerRadius():Number {return element.getStyle(Styles.LABEL_CORNER_RADIUS);}override public function get pointerLength():Number {return element.getStyle(Styles.LABEL_POINTER_LENGTH);}override public function get pointerWidth():Number {return element.getStyle(Styles.LABEL_POINTER_WIDTH);}override public function get direction():String {return element.getStyle(Styles.LABEL_DIRECTION);}override public function get fill():Boolean {return element.getStyle(Styles.LABEL_FILL);}override public function get fillColor():Number {return element.getStyle(Styles.LABEL_FILL_COLOR);}override public function get fillAlpha():Number {return element.getStyle(Styles.LABEL_FILL_ALPHA);}override public function get gradient():String {return element.getStyle(Styles.LABEL_GRADIENT);}override public function get gradientColor():Number {return element.getStyle(Styles.LABEL_GRADIENT_COLOR);}override public function get gradientAlpha():Number {return element.getStyle(Styles.LABEL_GRADIENT_ALPHA);}override public function get contentXScale():Number {return element.getStyle(Styles.LABEL_CONTENT_XSCALE);}override public function get contentYScale():Number {return element.getStyle(Styles.LABEL_CONTENT_YSCALE);}override public function get outlineWidth():Number {return element.getStyle(Styles.LABEL_OUTLINE_WIDTH);}override public function get outlineColor():Number {return element.getStyle(Styles.LABEL_OUTLINE_COLOR);}override public function get outlineAlpha():Number {return element.getStyle(Styles.LABEL_OUTLINE_ALPHA);}}}?
? ? ? 再自定义Node和NodeUI，使用这个Attachment代替TWaver自带的LabelAttachment：
自定义Node：
package {import twaver.Node;public class FTELabelNode extends Node {public function FTELabelNode(id:Object=null) {super(id);}public override function get elementUIClass():Class {return FTELabelNodeUI;}}}? ? ?自定义NodeUI：
package {import twaver.Node;import twaver.network.Network;import twaver.network.ui.NodeUI;public class FTELabelNodeUI extends NodeUI {private var _labelAttachment:FTELabelAttachment = null;public function FTELabelNodeUI(network:Network, node:Node) {super(network, node);}override protected function checkLabelAttachment():void{var label:String = this.network.getLabel(element);if(label != null && label != ""){if(this._labelAttachment == null){this._labelAttachment = new FTELabelAttachment(this, false);this.addAttachment(this._labelAttachment);}}else{if(this._labelAttachment != null){this.removeAttachment(this._labelAttachment);this._labelAttachment = null;}}}}}?
最后，写个例子看看效果：
<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"xmlns:twaver="http://www.servasoftware.com/2009/twaver/flex"layout="absolute" width="100%" height="100%"creationComplete="init()" backgroundColor="#FFFFFF" ><mx:Script><![CDATA[import twaver.Consts;import twaver.ElementBox;import twaver.IElement;import twaver.Node;import twaver.Styles;private var box:ElementBox = new ElementBox();private function init():void {network.labelFunction = function (element:IElement):String {var name:String = element.name;if(element.getClient('vertical')) {var result:String = '';for(var i:int=0,n:int=name.length; i<n; i++) {result += name.charAt(i) + '\n';}result = result.substr(0, result.length-1);return result;} else {return name;}};var node1:Node = new Node();node1.location = new Point(100, 100);node1.setStyle(Styles.LABEL_POSITION, Consts.POSITION_LEFT_LEFT);node1.setClient('vertical', true);node1.name = '竖向文字Vertical Text';box.add(node1);var node2:Node = new FTELabelNode();node2.location = new Point(300, 100);node2.setStyle(Styles.LABEL_POSITION, Consts.POSITION_LEFT_LEFT);node2.name = '竖向文字Vertical Text';box.add(node2);network.elementBox = box;}private function changeFontSize():void {box.forEach(function (element:IElement):void {element.setStyle(Styles.LABEL_SIZE, element.getStyle(Styles.LABEL_SIZE) + 2);});}]]></mx:Script><mx:VBox width="100%" height="100%"><mx:HBox width="100%" height="20"><mx:Button label="Change Font Size" click="changeFontSize()"/></mx:HBox><twaver:Network id="network" width="100%" height="100%" /></mx:VBox></mx:Application>?
恩，这就是我想要的效果：
更多关于FTE和TLF的信息，请参考Adobe官方文档：
TextLayoutFormat
TextFlow
Textlayout
本文完整代码见附件：FTELabelAttachment