深入剖析Flex字体旋转方法-flex字体居中

你对Flex字体旋转地概念是否了解，这里和大家简单分享一下，Flex中的字体如果不嵌入的话，是不支持旋转的。官方后来提供的TextLayout包倒是支持，但是那个引擎比较弱，旋转后字体很丑，不能像嵌入的一样，边缘平滑。

Flex字体旋转研究

目的：能够用最方便的方法实现中文字体旋转后可见。

明确一点：Flex中的字体如果不嵌入的话，是不支持旋转的。官方后来提供的TextLayout包倒是支持，但是那个引擎比较弱，旋转后字体很丑，不能像嵌入的一样，边缘平滑。

1、先来看下默认状态下的Flex字体：

code:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute"backgroundGradientAlphas="[1.0,1.0]"  
backgroundGradientColors="[#FFFFFF,#FFFFFF]"> 
 
<mx:Script> 
 
<![CDATA[  
 
privatefunctiongetInfo():void{  
 
lblInfo.text="字体："+txaTest.getStyle("fontFamily");  
 
}  
 
]]> 
 
</mx:Script> 
 
<mx:TextAreaidmx:TextAreaid="txaTest"x="210"y="132"/> 
 
<mx:Buttonxmx:Buttonx="401"y="131"label="trace"click="getInfo()"/> 
 
<mx:Labelidmx:Labelid="lblInfo"x="401"y="161"/> 
 
</mx:Application> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.

如代码所示，TextArea默认的字体是[Verdana]，Verdana是英文字体，不知此时显示的中文是由什么支持的。#p#

2.指定字体为[Verdana]

改一行代码：

<mx:TextAreaidmx:TextAreaid="txaTest"x="210"y="132" 
fontFamily="Verdana"/> 
1.
2.

结果：

中文依然可以显示，换成Arial也可以

3、先做个旋转看看

旋转前：

旋转后：

意料之中，一片空白，不过再转回去后又可以显示出来，这点能利用起来也不错。

code:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute"backgroundGradientAlphas="[1.0,1.0]"  
backgroundGradientColors="[#FFFFFF,#FFFFFF]"> 
 
<mx:Script> 
 
<![CDATA[  
 
privatefunctiondoRotation():void{  
 
txaTest.rotation+=15;  
 
getInfo();  
 
}  
 
privatefunctiongetInfo():void{  
 
lblInfo.text="字体："+txaTest.getStyle("fontFamily");  
 
}  
 
]]> 
 
</mx:Script> 
 
<mx:TextAreaidmx:TextAreaid="txaTest"x="210"y="132"fontFamily="Arial"/> 
 
<mx:Buttonxmx:Buttonx="401"y="131"label="trace"click="doRotation()"/> 
 
<mx:Labelidmx:Labelid="lblInfo"x="401"y="161"/> 
 
</mx:Application> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

#p#4、现在试试嵌入的[Verdana]字体

旋转后可以显示了，不过这个时候就不支持中文了，中文无法输入，嵌入字体会将整个字体文件嵌入到swf中，这无疑会增加swf的体积，英文字体还好，一般也就几百K，中文字体就庞大得多了，一般在10MB左右，显然嵌入中文字体很不现实。

嵌入前swf大小：294310bytes

嵌入后swf大小：351562bytes

code:

<?xmlversionxmlversion="1.0"encoding="utf-8"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
layout="absolute"backgroundGradientAlphas="[1.0,1.0]"  
backgroundGradientColors="[#FFFFFF,#FFFFFF]"> 
 
<mx:Style> 
 
@font-face{  
 
src:local("Verdana");  
 
font-family:myFont;  
 
}  
 
</mx:Style> 
 
<mx:Script> 
 
<![CDATA[  
 
privatefunctiondoRotation():void{  
 
txaTest.rotation+=15;  
 
getInfo();  
 
}  
 
privatefunctiongetInfo():void{  
 
lblInfo.text="字体："+txaTest.getStyle("fontFamily");  
 
}  
 
]]> 
 
</mx:Script> 
 
<mx:TextAreaidmx:TextAreaid="txaTest"x="210"y="132"fontFamily="myFont"/> 
 
<mx:Buttonxmx:Buttonx="401"y="131"label="trace"click="doRotation()"/> 
 
<mx:Labelidmx:Labelid="lblInfo"x="401"y="161"/> 
 
</mx:Application> 
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

【编辑推荐】