TWaver - 专注UI技术

http://twaver.servasoft.com/
posts - 171, comments - 191, trackbacks - 0, articles - 2
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

给网元添加倒影

Posted on 2013-07-22 17:57 TWaver 阅读(989) 评论(0)  编辑  收藏
如果您拜读过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>

只有注册用户登录后才能发表评论。


网站导航: