伊人久久综合影院首页,日韩精品国产一区,成人午夜无人区一区二区

最近有客戶提到如何讓Network上網(wǎng)元的標(biāo)簽垂直顯示，首先想到的就是每個(gè)字符之間插入一個(gè)回車(chē)。這個(gè)用Network#labelFunction就能達(dá)到目的：

來(lái)段代碼測(cè)試看看：

<?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>

運(yùn)行效果如下：

上面的方法很容易讓文字垂直顯示，但效果不是很理想，中英文混合時(shí)，英文也被一個(gè)字母一個(gè)字母地分開(kāi)了。有沒(méi)有更好的方案？答案是肯定的，借助于Flex的Flash Text Engine (FTE)和Text Layout Framework (TLF)，可以很容易的讓文字從上到下顯示。
先來(lái)看看一個(gè)小例子，設(shè)置TextLayoutFormat的blockProgression屬性為BlockProgression.RL即可：

運(yùn)行效果如下：

的確這樣效果就好多了，英文不會(huì)被一個(gè)字母一個(gè)字母地打斷，然后我們自定義一個(gè)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，使用這個(gè)Attachment代替TWaver自帶的LabelAttachment：
自定義Node：

自定義NodeUI：

最后，寫(xiě)個(gè)例子看看效果：

private var box:ElementBox = new ElementBox();

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>

恩，這就是我想要的效果：

更多關(guān)于FTE和TLF的信息，請(qǐng)參考Adobe官方文檔：
TextLayoutFormat
TextFlow
Textlayout
本文完整代碼見(jiàn)附件： FTELabelAttachment

在TWaver Flex中實(shí)現(xiàn)垂直文字布局

更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主

微信掃碼或搜索：z360901061

微信掃一掃加我為好友

QQ號(hào)聯(lián)系： 360901061

您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。

【本文對(duì)您有幫助就好】元

2元

5元

10元

20元

自定義

亚洲免费在线-亚洲免费在线播放-亚洲免费在线观看-亚洲免费在线观看视频-亚洲免费在线看-亚洲免费在线视频