as3利用Bitmap做图片倒影效果

最新推荐文章于 2016-08-18 13:55:11 发布

转载最新推荐文章于 2016-08-18 13:55:11 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/rujiong/archive/2013/01/31/2886745.html

本文介绍了如何使用Flash中的BitmapData和Matrix类实现图片倒影效果。通过垂直翻转图片并应用渐变透明效果，最终呈现出平滑过渡的倒影视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这几天把项目忙完了，也该过年了，所以利用这空闲的时间做一些效果，方便以后工作用。一直对Bitmap只是稍微的了解了下，因为平时做的项目中我很少用到这个，今天突然想做下图片倒影的效果。所以对这个类又重新的了解了下，但还是不太深，慢慢研究吧。话不多少了，代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 
 3 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
 4                 
 5                 creationComplete="initApp()">
 6 
 7     
 8     <mx:Script>
 9 
10         <![CDATA[
11             
12             import flash.events.ProgressEvent;
13             
14             import flash.display.Bitmap
15                 
16             import flash.display.BitmapData   
17                 
18             import mx.controls.Image      
19                 
20             protected function initApp():void{
21                     
22                     var bd:BitmapData = new BitmapData(img.contentWidth,img.contentHeight,true,0);
23                     //垂直方向翻转，Matrix矩阵中第一、四个参数表示水平和垂直方向的放缩比例，第二、三个参数表示水平和垂直方向的旋转角度
24                     //最后两个表示坐标的相对位移，当垂直翻转后，图像的Y坐标发生变化，因此必须移动
25                     var matrix:Matrix = new Matrix( 1, 0, 0, -1, 0, img.contentHeight );    
26                     //提取图形像素
27                     bd.draw(img,matrix);      
28                     //创建一个视图元件，也可以是其它容器类组件，比如Canvas
29                     //这个元件将用来做渐变的透明效果
30                     var shape:Shape = new Shape();
31                     
32                     var gradientMatrix:Matrix = new Matrix();
33                     //定义一个渐变矩阵，用来设置填充效果.创建 Graphics 类的 beginGradientFill() 和 lineGradientStyle() 
34                     //方法所需的矩阵的特定样式。
35                     gradientMatrix.createGradientBox(img.contentWidth,img.contentHeight, 0.5*Math.PI);
36                     //使用线性填充，这里使用三种颜色，第三个参数表示透明度的变化范围，0.4 为起点，0.5是中间值，0.1是终点
37                     // [0,125,255] 分别是三种颜色所占的百分比
38                     shape.graphics.beginGradientFill(GradientType.LINEAR, [0,0,0], [0.4,0.5,0.1], [0,125,255], gradientMatrix)
39                     
40                     shape.graphics.drawRect(0, 0, img.contentWidth,img.contentHeight);
41                     
42                     shape.graphics.endFill();
43                     //将透明度运用在背景中
44                     bd.draw(shape, null, null, BlendMode.ALPHA);
45                     
46                     var bitmap:Bitmap = new Bitmap(bd)   
47                     
48                     var newImage:Image = new Image();
49                     //把Bitmap传给新的图片
50                     newImage.source = bitmap;
51                     
52                     newImage.x = img.x;
53                     
54                     newImage.y = img.y + img.contentHeight ;
55                     
56                     this.addChild(newImage)
57                 }     
58                 
59         ]]>
60         
61     </mx:Script>
62     
63     
64     <mx:Image id="img" x="124" y="75" source="images/3.jpg"/>
65     
66 </mx:Application>

转载于:https://www.cnblogs.com/rujiong/archive/2013/01/31/2886745.html