TWaver - 專注UI技術(shù)

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

          在3D場景中顯示漢字

          Posted on 2012-08-06 18:00 TWaver 閱讀(1122) 評(píng)論(0)  編輯  收藏
          TWaver 3D for Flex本身支持3D文字的顯示,但是用戶必須嵌入一套字庫才可以。使用傳統(tǒng)的方式,顯示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();


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

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

          現(xiàn)在就讓我們用點(diǎn)小技巧,把自己需要的漢字畫到3D場景中去吧。 我們需要針對前面的代碼做點(diǎn)改進(jìn),引入一個(gè)TextInput組件,用來呈現(xiàn)漢字;然后我們需要?jiǎng)討B(tài)地生成一個(gè)BitmapData對象,把這個(gè)漢字畫到指定的圖片中去,最后我們再把內(nèi)存里的這個(gè)畫好了漢字的圖片作為貼圖,貼到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 

          再次運(yùn)行,看看是不是能夠得償所愿。

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

           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!

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

          只有注冊用戶登錄后才能發(fā)表評(píng)論。


          網(wǎng)站導(dǎo)航:
           
          主站蜘蛛池模板: 太仆寺旗| 凤冈县| 平遥县| 台山市| 祁门县| 新乐市| 望江县| 平果县| 西乌珠穆沁旗| 永川市| 哈密市| 桦甸市| 四子王旗| 浙江省| 双鸭山市| 祁阳县| 崇阳县| 黄山市| 阜阳市| 岢岚县| 察哈| 陕西省| 北流市| 准格尔旗| 酉阳| 大悟县| 伊金霍洛旗| 芮城县| 来宾市| 霍山县| 宜君县| 仙游县| 巴南区| 牙克石市| 宜宾市| 大同市| 平南县| 荔波县| 庆城县| 财经| 通渭县|