如果您拜讀過
Swing第五刀：走馬觀花看世博，您是否好奇Flex/Flash是否真的像Swing刀系列作者提到的那樣，用Flex/Flash內置的動畫、渲染、濾鏡等機制可以實現各種“酷炫到底”的效果。先上個“給網元添加倒影”的圖給您解下疑惑：
單單倒影很容易，就是把圖片旋轉180度：
1 var result:BitmapData = new BitmapData(source.width, source.height, true, 0x00000000);
2 var matrix:Matrix = new Matrix(1, 0, 0, 1, 0, 0);
3 matrix.translate(-source.width / 2, -source.height / 2);
4 matrix.rotate(Math.PI);
5 matrix.translate(source.width / 2, source.height / 2);
6 result.draw(bitmapData, matrix);
麻煩的是倒影從上到下透明度會慢慢變小，這就需要給BitmapData的copyPixels方法提供第4個參數alphaBitmapData，下面是創建alphaBitmapData的代碼：
1 private static function createAlphaGradientBitmap(width:Number, height:Number):BitmapData {
2 var alphaGradientBitmap:BitmapData = new BitmapData(width, height, true, 0x00000000);
3 var gradientMatrix:Matrix = new Matrix();
4 var gradientSprite:Sprite = new Sprite();
5 gradientMatrix.createGradientBox(width, height, Math.PI/2, 0, 0);
6 gradientSprite.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF], [0, 1], [0, 255], gradientMatrix);
7 gradientSprite.graphics.drawRect(0, 0, width, height);
8 gradientSprite.graphics.endFill();
9 alphaGradientBitmap.draw(gradientSprite);
10 return alphaGradientBitmap;
11 }
然后就可以生成倒影圖片：
1 private static function createShadowBitmapData(source:BitmapData):BitmapData {
2 var bitmapData:BitmapData = new BitmapData(source.width, source.height, true, 0x00000000);
3 bitmapData.copyPixels(source, new Rectangle(0, 0, source.width, source.height), new Point(), createAlphaGradientBitmap(source.width, source.height));
4
5 var result:BitmapData = new BitmapData(source.width, source.height, true, 0x00000000);
6 var matrix:Matrix = new Matrix(1, 0, 0, 1, 0, 0);
7 matrix.translate(-source.width / 2, -source.height / 2);
8 matrix.rotate(Math.PI);
9 matrix.translate(source.width / 2, source.height / 2);
10 result.draw(bitmapData, matrix);
11 return result;
12 }
最后注冊這個倒影圖片，作為網元的圖片
1 Utils.registerImageByBitmapData("from", createShadowBitmapData(Utils.getImageAsset(from.image).bitmapData));
2 follower.image = "from";
完整測試代碼如下：
1 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
2 xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
3 paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" backgroundColor="#FFFFFF"
4 creationComplete="init()">
5 <mx:Script>
6 <![CDATA[
7 import twaver.AlarmSeverity;
8 import twaver.ElementBox;
9 import twaver.Follower;
10 import twaver.IElement;
11 import twaver.Link;
12 import twaver.Node;
13 import twaver.Utils;
14
15 private var box:ElementBox;
16
17 private function init():void {
18 box = network.elementBox;
19 network.selectionModel.filterFunction = function (e:IElement):Boolean {
20 return !(e is Follower);
21 };
22
23 var from:Node = new Node();
24 from.location = new Point(100, 300);
25 box.add(from);
26
27 Utils.registerImageByBitmapData("from", createShadowBitmapData(Utils.getImageAsset(from.image).bitmapData));
28 var follower:Follower = new Follower();
29 follower.image = "from";
30 follower.host = from;
31 follower.location = new Point(from.x, from.y + from.height + 10);
32 box.add(follower);
33
34 var to:Node = new Node();
35 to.alarmState.increaseNewAlarm(AlarmSeverity.CRITICAL);
36 to.location = new Point(300, 100);
37 box.add(to);
38
39 Utils.registerImageByBitmapData("to", createShadowBitmapData(Utils.getImageAsset(to.image).getBitmapData(AlarmSeverity.CRITICAL.color)));
40 follower = new Follower();
41 follower.image = "to";
42 follower.host = to;
43 follower.location = new Point(to.x, to.y + to.height + 10);
44 box.add(follower);
45
46 var link:Link = new Link(from, to);
47 box.add(link);
48 }
49
50 private static function createShadowBitmapData(source:BitmapData):BitmapData {
51 var bitmapData:BitmapData = new BitmapData(source.width, source.height, true, 0x00000000);
52 bitmapData.copyPixels(source, new Rectangle(0, 0, source.width, source.height), new Point(),
53 createAlphaGradientBitmap(source.width, source.height));
54
55 var result:BitmapData = new BitmapData(source.width, source.height, true, 0x00000000);
56 var matrix:Matrix = new Matrix(1, 0, 0, 1, 0, 0);
57 matrix.translate(-source.width / 2, -source.height / 2);
58 matrix.rotate(Math.PI);
59 matrix.translate(source.width / 2, source.height / 2);
60 result.draw(bitmapData, matrix);
61 return result;
62 }
63
64 private static function createAlphaGradientBitmap(width:Number, height:Number):BitmapData {
65 var alphaGradientBitmap:BitmapData = new BitmapData(width, height, true, 0x00000000);
66 var gradientMatrix:Matrix = new Matrix();
67 var gradientSprite:Sprite = new Sprite();
68 gradientMatrix.createGradientBox(width, height, Math.PI/2, 0, 0);
69 gradientSprite.graphics.beginGradientFill(GradientType.LINEAR, [0xFFFFFF, 0xFFFFFF],
70 [0, 1], [0, 255], gradientMatrix);
71 gradientSprite.graphics.drawRect(0, 0, width, height);
72 gradientSprite.graphics.endFill();
73 alphaGradientBitmap.draw(gradientSprite);
74 return alphaGradientBitmap;
75 }
76 ]]>
77 </mx:Script>
78 <tw:NetworkX id="network" width="100%" height="100%"/>
79 </mx:Application>