Flex PieChart 圓餅圖 突出特效


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"
>
<fx:Script>
<![CDATA[
import mx.charts.events.ChartItemEvent;
import mx.charts.series.items.PieSeriesItem;
import mx.collections.ArrayCollection;
import mx.effects.easing.Elastic;
import mx.events.FlexEvent;

protected function itemClick(event:ChartItemEvent):void
{
//取得被點擊的切片項目
var item:PieSeriesItem = event.hitData.chartItem as PieSeriesItem;

//讓餅圖突出的效果
var arr:Array = [];
arr[item.index] = 0.2;
pieSeries.perWedgeExplodeRadius = arr;
}

]]>
</fx:Script>
<fx:Declarations>
<s:XMLListCollection id="provider">
<s:source>
<fx:XMLList xmlns="">
<product label="Product 1" data="3" />
<product label="Product 2" data="1" />
<product label="Product 3" data="4" />
<product label="Product 4" data="1" />
<product label="Product 5" data="5" />
<product label="Product 6" data="9" />
</fx:XMLList>
</s:source>
</s:XMLListCollection>
</fx:Declarations>
<mx:PieChart id="pieChart" dataProvider="{provider}" showDataTips="true"
itemClick="itemClick(event);" width="400" height="400"
>
<mx:series>
<mx:PieSeries id="pieSeries" field="@data" nameField="@label" labelPosition="none" reserveExplodeRadius="0.2">
<mx:showDataEffect>
<mx:SeriesInterpolate duration="1500" easingFunction="{Elastic.easeOut}" />
</mx:showDataEffect>
<mx:filters>
<mx:DropShadowFilter />
</mx:filters>
</mx:PieSeries>
</mx:series>
</mx:PieChart>
</s:Application>


要注意的是：
PieSeries的reserveExplodeRadius數值要與arr[item.index] = 0.2; 的數值相同，不相同時餅圖被click時會看見整體的PieChart縮小。

Flex 程式效能簡易測試工具

最近離職後開始在整理自已做測試的小東西，因此順便把測試結果簡單重整成一個工具類，以下是一個簡單的程式執行效能測試類，不夠好或考量不夠的地方請大家多多指教~


//interface
package com.utils
{
　public interface ILoopTestTools
　{
　　function startExecuteTestFunction():void
　　function set testFunctionA(functin:Function):void;
　　function set testFunctionB(functin:Function):void;
　}
}
//Class
package com.utils
{
　import flash.display.DisplayObject;
　import flash.events.IEventDispatcher;
　import flash.events.MouseEvent;
　import flash.utils.Timer;
　import flash.utils.getTimer;

　import mx.controls.TextArea;
　import mx.core.IButton;
　import mx.managers.IBrowserManager;

FlexDeep Link，Flex BrowserManager與IBrowserManager 測試

Flex有兩個可以管理「瀏覽器歷程的」的原生類，一個是BrowserManager一個是HistoryManager，搜尋過網路上資訊得知，現在大多以BowserManager為主HistoryManager已經少用，但是為什麼、是否需視不同狀況而用，目前本編不下結果，原因是還未做過HistoryManager的測試，待測試過後再來做個比較文章，因此本編著重於BrowserManager與IBrowserManager的應用測試。


/****
* 注意：測試時發現，使用SDK3.5運作不正常,用SDK 4,深層管理運作正常，問題還未查明。
* 參考文件 Adobe官方文件：
* http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/managers/IBrowserManager.html
* http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/mx/managers/BrowserManager.html
*
* 主要用法：BrowserManager類只用來拿到實體，
*主要操作是藉由IBrowserManager介面來實現操作。
* */
//測試程式
<?xml version="1.0" encoding="utf-8"?>
　<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
　　　　　　　　　layout="absolute"
　　　　　　　　　historyManagementEnabled="false"
　　　　　　　　　creationComplete="startProcess()"
>
<!--
　BrowserManagerManager與historyManager同時間只能用一個，
　因此使用BrowserManager做深層管理時要將historyManagementEnabled設為flase
-->
　<mx:Script>
　<![CDATA[
　　　import mx.events.BrowserChangeEvent;
            import mx.managers.BrowserManager;
            import mx.managers.IBrowserManager;
            import mx.utils.ObjectUtil;
            import mx.utils.URLUtil;
　　　private var _IbrowserManager:IBrowserManager;
　　　private function startProcess():void
　　　{
　　　　/*Step1.
　　　　　取得BrowserManager實體，BowserManager是一個獨體模式，
　　　　　因此使用getInstance取回運行環境中唯一的實體物件。
　　　　*/
　　　　_IbrowserManager = BrowserManager.getInstance();

　　　　//Step2. 初始化BrowserManager
　　　　_IbrowserManager.init();

　　　　//將Browser的各項屬性，呈現於From表單結構上
　　　　updateValue();

　　　　//對BrowserManager加上真聽式
　　　　addListener();
　　　}

Flex3 Embed Font

Flex3中需Embed 字形才能讓文字做旋轉等效果，Flex4中似乎是不需要Embed就可以做出文字旋轉放大的效果，日後查明，先行紀錄Flex3 Embed Font用法。

Flex3中Embed Font

@font-face
{
　src:url("/fonts/MSJH.ttf");
　fontFamily:DIN;
　advancedAntiAliasing: true;
}
.embeddedFontStyle
{
　fontFamily:DIN;
　fontSize:18px;
　color:#CCCCFF;
}

Flex 動態CSS , 動態Style ,利用StyleManager

§使用StyleManager來動態更換CSS檔(動態更換Skin)
以下將簡單表示動態更換Flex的CSS，在CSS中若有設定組件使用swf即達到動態更換Skin
Step1.在Flex專案，於Src底下建立一個css資料夾(packge)。
Step2.建立如下兩個CSS測試檔，取名為projectA.css與projectB.css。
//projectA
/* CSS file */
Panel{
borderColor: #009966;
}
 
//projectB
/* CSS file */
Panel{
borderColor: #0066ff;
}

Step3.於CSS檔上按下滑鼠右鍵，選擇Compile CSS to SWF將兩隻CSS,Compile成SWF。

 
 
 
 
Setep4.建立以下mxml測試檔

Lift Cycle , 元件生命週期與應用程式週期

§元件生命週期與應用程式週期

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 

  xmlns:s="library://ns.adobe.com/flex/spark" 

  xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"

  preinitialize="application1_preinitializeHandler(event)"

  initialize="application1_initializeHandler(event)"

  creationComplete="application1_creationCompleteHandler(event)"

  applicationComplete="application1_applicationCompleteHandler(event)"

  >

<s:layout>

<s:BasicLayout/>

</s:layout>

<fx:Script>

<![CDATA[

import mx.events.FlexEvent;

import mx.managers.SystemManager;

override protected function createChildren():void

{

　//用來將子物件貼附置容器中

　super.createChildren();

　trace("//---------------------------------------------------");

　trace("//createChildren");

　trace("//---------------------------------------------------");

　trace("");

}

localToGlobal in Flex

localToGlobal空間座標轉換
<?xml version="1.0" encoding="utf-8"?>
<mx:Application applicationComplete="init();" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
private function init():void
{
trace("x="+contrastA.x +" , "+"y="+contrastA.y); //0,0
trace("x="+contrastB.x +" , "+"y="+contrastB.y); //0,0
trace("x="+contrastC.x +" , "+"y="+contrastC.y); //0,0
trace("-----------");
var p1:Point , p2:Point , p3:Point;

globalToLocal in Flex

globalToLocal座標空間轉換
<?xml version="1.0" encoding="utf-8"?>
<mx:Application applicationComplete="init();" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" >
<mx:Script>
<![CDATA[
import mx.containers.Panel;
private function init():void
{
     var p:Point;
    //將btn所在的空間座標轉換成c1上的對應空間座標
     p = c1.globalToLocal(new Point(btn.x , btn.y));
     l.x = p.x;
     l.y = p.y;
}

Flex PNGEncoder 與 BitmapData 配合將Stage畫面以.png檔存於本機端

//將stage上之顯示元件轉成.PNG檔案,並存於本機端,包含stage也可轉存
<?xml version="1.0" encoding="utf-8"?>
<mx:Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
     import mx.graphics.codec.PNGEncoder;
     private var enable:Boolean;
     private function init():void
    {
        enable = true;
    }

Flex將DisplayObject轉成BimtMap使用

§DisplayObject 轉換成Bitmap
最近公司專案有一需求，此需求是當顯示元件被mouseDown的時候要將該元件複製一份出來給予拖曳管理使用，而該複製出來的東西需求格式是BimtMap，因此將Clone顯示元件成BitMap寫一個簡單範例，以便日後忘記時可提醒自己可以這樣使用，程式碼如下...