深入剖析Flex字体旋转方法

开发 后端
本文和大家重点讨论一个很有意思的问题,那就是Flex字体旋转,但是必须要明确一点Flex中的字体如果不嵌入的话,是不支持旋转的。

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

Flex字体旋转研究

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

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

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

code:

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

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

2.指定字体为[Verdana]

改一行代码:

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

结果:

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

3、先做个旋转看看

旋转前:


旋转后:


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

code:

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

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

 

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

嵌入前swf大小:294310bytes

嵌入后swf大小:351562bytes

code:

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

【编辑推荐】

  1. 实例解析Flex字体的使用
  2. FlexBuilder4十大新特性闪亮登场
  3. 学习总结 在Flex中如何嵌入Flex字体
  4. 揭开Flex正则表达式的神秘面纱
  5. FlexBuilder开发方法及特点解析 

 

 


 

责任编辑:佚名 来源: 163.com
相关推荐

2010-08-13 09:54:23

Flex字体

2010-08-04 13:52:53

Flex事件机制

2010-08-03 16:21:54

FlexFlash

2010-08-04 08:42:28

Flex和Flash

2010-08-06 15:20:25

Flex Builde

2010-08-10 13:58:00

Flex性能测试

2010-08-12 11:29:01

Flex组件

2010-08-03 11:35:19

Flex全屏

2010-07-30 15:35:11

Flex结合

2010-08-03 13:47:26

Flex程序员

2010-08-11 09:01:41

Flex4布局

2010-08-12 16:10:44

Flex应用程序

2010-06-04 18:29:02

Hadoop单机模式

2010-08-13 10:01:46

Flex样式定义

2010-08-10 10:10:34

Flex内存泄露

2010-08-13 09:30:37

Flex样式

2010-08-12 11:12:27

Flex误区

2010-08-12 13:25:46

Flex验证方式

2010-08-12 11:34:15

Flex数据绑定

2010-08-12 09:25:35

Flex控件
点赞
收藏

51CTO技术栈公众号