如何使ofc2的Y軸支持中文

OFC2是很好用的Flash圖形庫,其中包括的曲線:line,bar(3d,glass等),area,雷達圖等,可以利用開源的FlashDevelop編譯運行,但在中文支持方面卻存在幾個問題,比如Y軸無法顯示中文等,解決的思路有兩個:

  1. 將中文字符如simsun.ttc加入到Flash工程中,編譯進Flash文件,這樣就會存在一個問題,由於字體庫足有10M,所以編譯後的Flash文件將會變得非常龐大,足有10M左右,故棄之。
  2. 另一解決思路是將Y軸顯示的旋轉功能去掉,這樣就可以顯示中文了,而且編譯後的Flash文件將會維持在200K左右,而且用戶體驗方面也都比較OK,所以本文采用這個解決思路

修改源碼YLegendBase.as文件中的build函數,修改完後如下:

		private function build( text:String ): void {
			
			var title:TextField = new TextField();
            title.x = 0;
			title.y = 0;
			
			this.text = text;
			
			title.htmlText = this.text;
			
			var fmt:TextFormat = new TextFormat();
			fmt.color = this.css.color;

			fmt.font = this.css.font_family?this.css.font_family:'Verdana';
			
			if (fmt.font == "spArial") {
				title.embedFonts = true;
				title.antiAliasType = AntiAliasType.ADVANCED;
				title.rotation = 270;
				title.height = title.textHeight;
			}
			
			fmt.bold = this.css.font_weight == 'bold'?true:false;
			fmt.size = this.css.font_size;
			fmt.align = "center";
			

			
			title.setTextFormat(fmt);
			title.autoSize = "left";
			
			

			this.addChild(title);
		}

下面是如何將字體文件打包進swf:

編譯Open Flash Chart II最新版本,系統環境:Linux + Flex_Builder_for_Linux + Eclipse。
1.下載OFC最新版本源碼http://teethgrinder.co.uk/open-flash-chart-2/downloads.php(這裏下載的是Version 2 Lug Wyrm Charmer (28th,July 2009) )。
2.下載FlashDevelop http://www.flashdevelop.org/community/viewforum.php?f=11 因在ofc中引用了FlashDevelop裏的2個包:org和mx (這裏爲FlashDevelop-3.0.6-RTM.exe)。
3.在Eclipse中新建一ActionScript項目,並命名爲open_flash_chart(可自定義名稱),然後導入Open Flash Chart的AS源碼,該源碼位於:open-flash-chart-2-Lug-Wyrm-Charmer/open-flash-chart文件夾下,同時導入FlashDevelop裏的org包、mx包到改項目中。
4.下載中文字體Simsun.ttf,同樣導入到open_flash_chart目錄裏。
5.下載Base64Encoder編碼解碼類,OFC裏自帶的Base64Encoder.as有問題,會導致編譯時產生1162錯誤(Function does not have a body),下載後直接覆蓋open_flash_chart/mx/utils/Base64Encoder.as即可,下載地址:http://opensource.adobe.com/svn/opensource/flex/sdk/trunk/frameworks/projects/framework/src/mx/utils/Base64Encoder.as。
6.嵌入我們的中文字體,共兩處:
第一處:open_flash_chart/elements/axis/XAxisLabels.as 找到源碼中這一行: [Embed(systemFont = 'Arial', fontName = 'spArial', mimeType = 'application/x-font')] 註釋掉該行並在下一行加入:[Embed(source = '/home/guangmean/workspace/open_flash_chart/simsun.ttf', fontFamily = 'SimSun')]
第二處:open_flash_chart/elements/labels/YLegendBase.as 找到源碼中這一行:   [Embed(systemFont = 'Arial', fontName = 'spArial', mimeType = 'application/x-font')] 同上,註釋掉該行並在下一行加入:[Embed(source = '/home/guangmean/workspace/open_flash_chart/simsun.ttf', fontFamily = 'SimSun')]
7.經過步驟6我們就已經導入了中文字體,但是現在的X座標中的中文還不會旋轉(表現爲X座標的值都不見了)。爲此我們還需要再次修改第6步中的XAxisLabels.as和YLegendBase.as源代碼:將XAxisLabels.as中make_label()方法裏的fmt.font = "spArial"改爲fmt.font = "SimSun",YLegendBase.as文件一樣。
以下爲可選步驟:
8.修改open_flash_chart/Loading.as文件,將dots:Number調整爲一個合適的整數,spin.graphics.drawCircle(x,y,3)中的數字3可自行調整,調整後的效果就是Loading data...後的加載圓圈變漂亮了(原理很簡單,根據三角函數和圓周率調整軌跡)。
9.修改open_flash_chart.as文件this.load_external_file(file);的上一行:var file:String = "../../data-files/*.txt";將"../../data-files/*.txt"替換爲一個合適文件路徑(這樣做的目的是防止Web應用時ofc在獲取數據失敗是可以到你指定的地方讀取默認數據,改善用戶體驗)。
10.Error # 2032 with https in IE(Test under IE6 IE7),參考:http://forums.codecharge.com/posts.php?post_id=97771
header("Cache-Control: cache, must-revalidate");
header("Pragma: public");
OK!!! 打完收工

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章