TWaver - 專注UI技術

          http://twaver.servasoft.com/
          posts - 171, comments - 191, trackbacks - 0, articles - 2
            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理

          在3D場景中顯示漢字

          Posted on 2012-08-06 18:00 TWaver 閱讀(1123) 評論(0)  編輯  收藏
          TWaver 3D for Flex本身支持3D文字的顯示,但是用戶必須嵌入一套字庫才可以。使用傳統的方式,顯示3D文字。

           1 [Embed("extrusionfonts.swf", mimeType="application/octet-stream")]
           2 private var font:Class;
           3 ..
           4 twaver.threed.util.Util3D.checkTextFont(font);
           5 var network:Network3D = new Network3D();
           6 network.applyHoverCamera(-180,10,5,300);
           7 this.addElement(network);
           8 var n2:Node = new Node();
           9 n2.setStyle(Style3D.THREED_SHAPE_TYPE,Consts3D.THREED_SHAPE_TYPE_TEXT);
          10 n2.setStyle(Style3D.TEXT_FONT_SIZE,20);
          11 n2.setStyle(Style3D.TEXT_FONT_3D,"Arial");
          12 n2.setStyle(Style3D.TEXT_WIDTH,200);
          13 n2.setStyle(Style3D.TEXT_CONTENT,"Hello");
          14 n2.setStyle(Style3D.MAPPINGTYPE,Consts3D.MAPPINGTYPE_COLOR);
          15 n2.setStyle(Style3D.MATERIAL_COLOR,0x00FF00);
          16 n2.setStyle(Style3D.PROPERTY_SPACE_LOCATION,new Vector3D(100,0,0));
          17 n2.setStyle(Style3D.BOTH_SIDES_VISIBLE,true);
          18 network.elementBox.add(n2);
          19 network.showAxises();


          對于國內客戶來說,這一點就有些痛苦了,一個中文字庫的體積太大,嵌入發布程序中的話,會增大發布包的大小,及時是遠程加載,也會因為其恐怖的體積,讓用戶的web化設計面臨網絡情況的挑戰。當然為了用戶也可以去裁剪一個字庫,把自己會用到的文字收入其中,做個可控數量級的枚舉,但是實時系統在運行過程中,會碰到什么樣的漢字也是個未知,很難做裁剪的時候枚舉盡所需要的漢字。這個問題一直苦苦縈繞在每個人的心頭。
          ,,,,,,
          ,,,,,,
          終于,TWaver 3D支持動態貼圖了,這里的動態貼圖已經不只是說可以動態切換貼圖資源的來源,更重要的是可以動態切換上在內存中生成的BitmapData對象。大家都知道,Flex的BitmapData支持將其UIComponent繪制出來,這一下子為我們解決漢字顯示提供了一個非常便捷的方式,那就是我們把漢字寫進一個TextInput組件中去,然后再把這個組件畫到一個BitmapData對象中,然后在將這個對象變成我們一個3D對象的貼圖(例如一個Plane,一個Billboard,一個Cube等等)。ok,動手試驗
          按步就班,搭建一個3D場景,并且放入一個Plane對象。

           1 <?xml version="1.0" encoding="utf-8"?>
           2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           3                xmlns:s="library://ns.adobe.com/flex/spark"
           4                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns="http://www.servasoft.com/twaver/3D" creationComplete="init()">
           5     <fx:Declarations>
           6         <!-- Place non-visual elements (e.g., services, value objects) here -->
           7     </fx:Declarations>
           8     <fx:Script>
           9         <![CDATA[
          10             import twaver.*;
          11             import twaver.threed.event.*;
          12             import twaver.threed.util.*;
          13             private var databox:ElementBox;
          14             private var source:BitmapData;
          15             private var rect:Rectangle = new Rectangle(0,0,128,128);
          16             private var text:TextInput = new TextInput();
          17             private var n1:Node;
          18             private function init():void{
          19                 prepare();
          20                 setupNetwork();
          21                 fillData();
          22                 network.showAxises();
          23                 network.callLater(function():void{
          24                     paintTexture(n1);
          25                 });
          26             }
          27             private function fillData():void{
          28                 n1 = NodeUtils.buildPlane(new Vector3D(0,0,0),new Vector3D(32,0,32),new Vector3D(90,0,0),Consts3D.MAPPINGTYPE_COMMON,source,true);
          29                 databox.add(n1);
          30             }
          31             private function setupNetwork():void{
          32                 databox = network.elementBox;
          33                 network.applyHoverCamera(-180,10,5,200);
          34             }
          35         ]]>
          36     </fx:Script>
          37     <ns:Network3D id="network" width="100%" height="100%"/>
          38 </s:Application>

          我們會得到一個類似截圖的效果,一個只有一個plane對象的3D場景:

          現在就讓我們用點小技巧,把自己需要的漢字畫到3D場景中去吧。 我們需要針對前面的代碼做點改進,引入一個TextInput組件,用來呈現漢字;然后我們需要動態地生成一個BitmapData對象,把這個漢字畫到指定的圖片中去,最后我們再把內存里的這個畫好了漢字的圖片作為貼圖,貼到plane上去。

           1 <?xml version="1.0" encoding="utf-8"?>
           2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           3                xmlns:s="library://ns.adobe.com/flex/spark"
           4                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns="http://www.servasoft.com/twaver/3D" creationComplete="init()">
           5     <fx:Declarations>
           6         <!-- Place non-visual elements (e.g., services, value objects) here -->
           7     </fx:Declarations>
           8     <fx:Script>
           9         <![CDATA[
          10             import mx.controls.TextInput;
          11             import twaver.*;
          12             import twaver.threed.event.*;
          13             import twaver.threed.util.*;
          14             private var databox:ElementBox;
          15             private var source:BitmapData;
          16             private var rect:Rectangle = new Rectangle(0,0,128,128);
          17             private var text:TextInput = new TextInput();
          18             private var n1:Node;
          19             private function init():void{
          20                 prepare();
          21                 setupNetwork();
          22                 fillData();
          23                 network.showAxises();
          24                 network.callLater(function():void{
          25                     paintTexture(n1);
          26                 });
          27             }
          28             private function prepare():void{
          29                 text.width = 150;
          30                 text.height = 60;
          31                 text.setStyle('borderStyle','none');
          32                 text.text = "你好";
          33                 text.alpha = 1;
          34                 this.addElement(text);
          35                 text.visible = false;
          36             }
          37             private function fillData():void{
          38                 n1 = NodeUtils.buildPlane(new Vector3D(0,0,0),new Vector3D(32,0,32),new Vector3D(90,0,0),Consts3D.MAPPINGTYPE_COMMON,source,true);
          39                 databox.add(n1);
          40             }
          41             private function setupNetwork():void{
          42                 databox = network.elementBox;
          43                 network.applyHoverCamera(-180,10,5,200);
          44             }
          45             private function setTexture(n:Element,source:BitmapData):void{
          46                 var type:String = n.getStyle(Style3D.THREED_SHAPE_TYPE);
          47                 switch(type){
          48                     case Consts3D.THREED_SHAPE_TYPE_BILLBOARD:
          49                         n.setStyle(Style3D.BILLBOARD_TEXTURE,source);
          50                         break;
          51                     case Consts3D.THREED_SHAPE_TYPE_PLANE:
          52                         n.setStyle(Style3D.PLANE_MATERIAL,source);
          53                         break;
          54                     default:
          55                         n.setStyle(Style3D.MAPPING_COMMON_PATH,source);
          56                         break;
          57                 }
          58             }
          59             private function paintTexture(n:Element):void{
          60                 source = new BitmapData(32,32,true,0x00000000);
          61                 text.text = n.getClient("label");
          62                 source.fillRect(rect,0x00000000);
          63                 source.draw(text);
          64                 setTexture(n,source);
          65             }
          66         ]]>
          67     </fx:Script>
          68     <ns:Network3D id="network" width="100%" height="100%"/>
          69 </s:Application>
          70 

          再次運行,看看是不是能夠得償所愿。

          吼吼,look,出來了,漢字出來了,沒有引入任何字庫,漢字就能夠出現在我的3D場景中了。 8過,還是有些遺憾,那就是有時候如果讓這漢字的內容動態地變化的時候,可怎么辦??
          ......
          ......
          有了!我動態切換不就行了!?說干就干,抓緊驗證,重新打造代碼,添加動態變化。

           1 <?xml version="1.0" encoding="utf-8"?>
           2 <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
           3                xmlns:s="library://ns.adobe.com/flex/spark"
           4                xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" xmlns:ns="http://www.servasoft.com/twaver/3D" creationComplete="init()">
           5     <fx:Declarations>
           6         <!-- Place non-visual elements (e.g., services, value objects) here -->
           7     </fx:Declarations>
           8     <fx:Script>
           9         <![CDATA[
          10             import mx.controls.TextInput;
          11             import mx.events.PropertyChangeEvent;
          12             import twaver.*;
          13             import twaver.threed.event.*;
          14             import twaver.threed.util.*;
          15             private var databox:ElementBox;
          16             private var source:BitmapData;
          17             private var rect:Rectangle = new Rectangle(0,0,128,128);
          18             private var text:TextInput = new TextInput();
          19             private var n1:Node;
          20             private function init():void{
          21                 prepare();
          22                 setupNetwork();
          23                 fillData();
          24                 network.showAxises();
          25                 network.callLater(function():void{
          26                     paintTexture(n1);
          27                 });
          28 
          29                 var timer:Timer = new Timer(1000);
          30                 timer.addEventListener(TimerEvent.TIMER,function(evt:Event):void{
          31                     var date:Date = new Date();
          32                     n1.setClient("label",date.seconds);
          33                 });
          34                 timer.start();
          35             }
          36             private function prepare():void{
          37                 text.width = 150;
          38                 text.height = 60;
          39                 text.setStyle('borderStyle','none');
          40                 text.text = "你好";
          41                 text.alpha = 1;
          42                 this.addElement(text);
          43                 text.visible = false;
          44             }
          45             private function fillData():void{
          46                 n1 = NodeUtils.buildPlane(new Vector3D(0,0,0),new Vector3D(32,0,32),new Vector3D(90,0,0),Consts3D.MAPPINGTYPE_COMMON,source,true);
          47                 databox.add(n1);
          48             }
          49             private function setupNetwork():void{
          50                 databox = network.elementBox;
          51                 network.applyHoverCamera(-180,10,5,200);
          52                 databox.addDataPropertyChangeListener(this.onPropertyChanged);
          53             }
          54             private function onPropertyChanged(evt:PropertyChangeEvent):void{
          55                 var name:String = Util3D.getPropertyName(evt.property as String);
          56                 if("label"==name){
          57                     var element:Element = evt.source as Element;
          58                     paintTexture(element);
          59                 }
          60             }
          61             private function setTexture(n:Element,source:BitmapData):void{
          62                 var type:String = n.getStyle(Style3D.THREED_SHAPE_TYPE);
          63                 switch(type){
          64                     case Consts3D.THREED_SHAPE_TYPE_BILLBOARD:
          65                         n.setStyle(Style3D.BILLBOARD_TEXTURE,source);
          66                         break;
          67                     case Consts3D.THREED_SHAPE_TYPE_PLANE:
          68                         n.setStyle(Style3D.PLANE_MATERIAL,source);
          69                         break;
          70                     default:
          71                         n.setStyle(Style3D.MAPPING_COMMON_PATH,source);
          72                         break;
          73                 }
          74             }
          75             private function paintTexture(n:Element):void{
          76                 source = new BitmapData(50,32,true,0x00000000);
          77                 text.text = n.getClient("label");
          78                 source.fillRect(rect,0x00000000);
          79                 source.draw(text);
          80                 setTexture(n,source);
          81             }
          82         ]]>
          83     </fx:Script>
          84     <ns:Network3D id="network" width="100%" height="100%"/>
          85 </s:Application>

          run again! Please check you screen!

          大家一起來看看,哪里還有可以改進的,讓我們把3D應用做得更徹底一些。
          這里是文章中用到的代碼(見原文最下方)

          只有注冊用戶登錄后才能發表評論。


          網站導航:
           
          主站蜘蛛池模板: 清苑县| 佛学| 邢台县| 康保县| 根河市| 淮滨县| 杭州市| 陆良县| 周口市| 麻阳| 兰溪市| 正安县| 治多县| 宜春市| 合山市| 德令哈市| 丰台区| 新昌县| 仙居县| 博兴县| 鱼台县| 怀集县| 九龙坡区| 水富县| 周至县| 上饶县| 平度市| 葫芦岛市| 同心县| 井研县| 兴国县| 山阴县| 大关县| 柳河县| 封开县| 扎鲁特旗| 静宁县| 图们市| 万源市| 张家口市| 青岛市|