基于AS3.0的位图置换图图像滤镜应用研究
开篇：润墨网以专业的文秘视角，为您筛选了一篇基于AS3.0的位图置换图图像滤镜应用研究范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！
摘 要：通过Flash ActionScript3.0的flash.filters包中各种滤镜类可以实现对图像的滤镜处理，其中DisplacementMapFilter 类可实现对位图的置换图滤镜效果，本文在研究置换图工作原理和滤镜工作原理的基础上，应用AS3.0程序开发语言实现对图像的置换左移和扭曲效果处理，是图像处理的一种新尝试，程序开发人员通过编写代码实现专业图像处理软件实现的功能，为图像处理开辟了一条新的途径和方式。
关键词：AS3.0；置换图；滤镜；工作原理
中图分类号：TP391 文献标识码：A 文章编号：2095-2163（2015）03-
Research on Displacement Map Filter Application of Bitmap based on AS3.0
XIE JianHua
（Guangzhou Panyu Polytechnic，Guangzhou 511483，China）
Abstract： The flash filters package contains a lots of filter classes， with which the image processing can be accomplished， Displacement Map Filter class can be used to achieve filter effects. The operational principle of displacemap and filter are presented， programmers can use AS3.0 to achieve some filter effects， such as ，bitmap shift left， bitmap distortion， and so on. This method is a new attempt for image processing. Programmers can achieve the same functions by programming as using the professional image tools， so it is a new way for image processing.
Key Words： ActionScript 3.0； DisplacementMap； Filter； Operational Principle
0 引 言
位图是使用像素阵列来表示的图像，每个像素的颜色信息可由RGB组合或者灰度值来分析和表示[1]。以往，一般用户多是利用专业图像编辑软件Adobe Photoshop或 Adobe Fireworks实现对位图图像的应用滤镜效果，而Flash ActionScript 3.0 拥有flash.filters 包，且包含着一系列位图效果滤镜类，因而允许开发人员以编程方式对位图应用滤镜并显示对象，以达到雨图形处理应用程序中许多效果相同的定制技术呈现。基于此，本文将运用Flash开发语言实现对位图的置换图滤镜效果应用。
1 理论原理
1.1置换图工作原理
置换图决定了目标对象中像素移动的距离和方向如图1所示，这是根据图片中的灰度值来实现的。
图1 置换图制作原理
Fig. 1 Principle of replacement map
置换滤镜基本算法可以简单描述为：
F（x，y）=I（x+x，y+y） （1）
而且，x=
其中，I为原图，G为置换图，F为置换结果，Kx为水平方向比例，xmax和xmin分别为选区外接矩形的边界。%表示余数运算。
在此 ，给出置换滤镜基本算法的实现要点概述如下：
（1）“置换”滤镜使用置换图中的颜色值（指定通道的灰度值）改变选区（像素的移动），其中0 是负向最大改变值，255 是正向最大改变值，灰度值 128 不产生置换。
（2）如果置换图只有一个通道，图像则沿着由水平比例和垂直比例所定义的对角线改变像素的移动[2]。如果置换图有多个通道，第一个通道则会控制水平方向像素的置换，第二个通道将控制垂直方向像素的置换。
（3）当水平比例和垂直比例都设置为100% 时，最多置换128个像素（因为中间的灰色不生成置换）。
（4）使用名为置换图的图像确定如何扭曲选区的像素。
对于简单的置换图来说，亮色处的像素向左上方移动，当颜色为纯白色时，移动距离最大，为128像素。中性色（50%灰色）处的像素保持原位置不变。暗色处的像素向右下方移动，当颜色为纯黑色时，移动距离最大，为128像素。介于白色与黑色之间的颜色分别描述了使像素移动的相应距离。特别指出的是，这幅简单的置换图必须是灰度模式，如图2所示。
图2 简单置换图
Fig. 2 Simple replacement map
对于复杂的置换图来说，像素的移动方向和距离将取决于红色和绿色通道的亮度值。具体来说，在红色通道中，白色处的像素将左移，黑色处的像素将右移；在绿色通道中，白色处的像素将上移，黑色处的像素将下移。而蓝色通道则不起作用。移动的距离和简单置换图中原理相似。但仍需指出的是，复杂的置换图必须是RGB模式，如图3所示。
图3 复杂置换图
Fig.3 complex replacement map
1.2 滤镜的工作原理
AS 3.0中，显示对象过滤是通过将原始对象的副本缓存为透明位图而展开其工作的。
将滤镜应用于显示对象后，只要对象中附带有效的滤镜列表，Adobe Flash Player 或 Adobe AIR 就会将该对象缓存为位图。而后，此位图将成为所有后续应用的滤镜效果的原始图像。
通常，每个显示对象包含两个位图：一个包含原始未过滤的源显示对象，另一个用于过滤后的最终图像。呈现时使用最终图像。只要显示对象不发生更改，最终图像就不需要更新[3]。
AS 3.0中的DisplacementMapFilter 类使用BitmapData对象（称为置换图图像）的像素值在新对象上执行置换效果。一般情况下，置换图图像与将要应用滤镜的实际显示对象或 BitmapData实例均有一定不同。置换效果包括针对过滤后图像中像素的置换，即让这些像素离开各自原始位置一定距离。也就是，此滤镜可用于产生移位、扭曲或斑点效果。
此滤镜功能实现可使用以下公式[3-4]：
dstPixel[x， y] = srcPixel[x + （（componentX（x， y） - 128） * scaleX） / 256， y + （（componentY（x， y） - 128） *scaleY） / 256）（2）
其中，componentX（x， y）从mapBitmap属性获得（x-mapPoint.x ，y-mapPoint.y）处的 componentX 属性颜色值。
滤镜使用的映射图像会进行缩放，以匹配舞台缩放比例。当对象自身呈一定的比例时，却不会进行缩放。滤镜支持舞台缩放。但不支持常规缩放、旋转和倾斜。如果对象本身进行了缩放（如果将 scaleX 和 scaleY 属性设置为除1.0以外的其它值），滤镜效果将不执行缩放。只有用户在舞台上进行放大时，才会有缩放的发生和出现。
应用于给定像素的置换位置和置换量可由置换图图像的颜色值设计和确定。使用滤镜时，除了指定置换图图像外，还要指定如下各值，以利于操控置换图图像中计算置换的具体方式：
（1）映射点。过滤图像上的位置，在该点将应用置换滤镜的左上角。如果只想对图像的一部分应用滤镜，可以使用此值。
（2）X 组件。影响像素的 x 位置的置换图图像的颜色通道。
（3）Y 组件。影响像素的 y 位置的置换图图像的颜色通道。
（4）X 缩放比例。指定 x 轴置换强度的乘数值。
（5）Y 缩放比例。指定 y 轴置换强度的乘数值。
（6）滤镜模式：确定在移开像素后形成的空白区域中，Flash Player 或 AIR 应执行何种操作。在DisplacementMapFilterMode 类中定义为常量的选项可以显示原始像素（滤镜模式 IGNORE）、从图像的另一侧环绕像素（滤镜模式 WRAP，为默认设置）、使用最近的移位像素（滤镜模式 CLAMP）或用颜色填充空间（滤镜模式COLOR）。
2 应用与分析
2.1 水平移位
在以下代码中，将加载一个图像，如图4所示。完成加载后使图像在舞台上居中并对它应用置换图滤镜，使整个图像中的像素向左水平移位，置换后效果如图5所示。
// 加载图像
var loader：Loader = new Loader（）；
loader.load（new URLRequest（"images/image.jpg"））；
this.addChild（loader）；
var mapImage：BitmapData；
var displacementMap：DisplacementMapFilter；
loader.contentLoaderInfo.addEventListener（PLETE， setupStage）；
// 图像加载完成调用该函数
function setupStage（event：Event）：void
{
//图像居中
loader.x = （stage.stageWidth - loader.width） / 2；
loader.y = （stage.stageHeight - loader.height） / 2；
// 创建置换图像
mapImage = new BitmapData（loader.width， loader.height， false， 0xFF0000）；
// 创建置换滤镜
displacementMap = new DisplacementMapFilter（）；
displacementMap.mapBitmap = mapImage；
displacementMap.mapPoint = new Point（0， 0）；
ponentX = BitmapDataChannel.RED；
displacementMap.scaleX = 250；
loader.filters = [displacementMap]；
}
用于定义置换的属性有：
（1）置换图位图。置换位图是由代码创建的新的 BitmapData 实例。具体尺寸与加载的图像的尺寸匹配（因此会将置换应用于整个图像）。用纯红色像素填充此实例。
（2）映射点。将此值设置为点 （0， 0），使置换再次应用于整个图像。
（3）X 组件。此值设置为常量 BitmapDataChannel.RED，表示置换图位图的红色值将决定沿着 x 轴置换像素的程度（像素的移动程度）。
（4）X 缩放比例。此值设置为 250。由于全部置换量（与全红的置换图图像的距离）仅使图像置换很小的量（大约为一个像素的一半）。这就使得，如果将此值设置为 1，图像只会水平移动 0.5个像素；而将此值设置为 250，图像将移动大约 125个像素。
图4 原始网格图（image.jpg） 图5 置换后左移效果图
Fig.4 Original girds Fig.5 Result of left shift
这些设置可使过滤图像的像素向左移动 250个像素。移动的方向（向左或向右）和移动量则取决于置换图图像中的像素的颜色值。由实施概念而言，Flash Player 或 AIR 会逐一处理过滤图像的像素（至少处理将应用滤镜的区域中的像素，在本例中指所有像素），并对每个像素执行以下操作：
（1）Flash Player在置换图图像中查找相应的像素。例如，当 Flash Player 或 AIR 计算过滤图像左上角像素的置换量时，就会在置换图图像左上角中查找像素。
（2）Flash Player确定置换图像素中指定颜色通道的值。在本例中，x组件颜色通道是红色通道，因此Flash Player和AIR将查看置换图图像中该像素所在位置处的红色通道的对应值。由于置换图图像是纯红色的，即使得像素的红色通道为0xFF（即255）。该值将用作置换值。
（3）比较置换值和“中间”值（127，这是0和255之间的中间值）。如果置换值低于中间值，则像素正向移位（x置换向右；y置换向下）。而如果置换值高于中间值（如本示例），则像素负向移位（x置换向左；y置换向上）。为更精确起见，Flash Player和AIR 会从127中减去置换值，结果（正或负）即是应用的相对置换量。
（4）获得相对置换量的应用结果后，Flash Player 通过确定相对置换值所表示的完全置换量的百分比来给出实际置换量。在本例中，全红色意味着 100%置换。然后用 x 缩放比例值或 y 缩放比例值乘以该百分比，以确定将应用的置换像素数。具体来说就是，100% 乘以250将可确定置换量（大约为向左移动 125个像素）。
因为没有为y分量和y缩放比例指定值，此处将使用默认值（不发生置换），这就是图像在垂直方向不移位的原因。
在本示例中使用了默认滤镜模式设置 WRAP，当像素向左移位时，将会利用移到图像左边缘以外的像素来填充右侧空白区域。
2.2 扭曲涂抹效果
步骤1： 制作如图6、7、8所示的三个元件。
Fig.6 Red circle Fig.7 blue circle
其中，红圆线性填充红色255-0；蓝圆线性填充蓝色255-0，再旋转90度。
结果：上部分蓝色255，下部分蓝色0。背景图为黄黑相间的斑状矩形，其注册点在左上角，命名为Background。
图8 背景矩形元件
Fig.8 Background with a rectangle
步骤2：利用两个圆创建一个影片剪辑（注意，注册点在左上角，上面图层的元件预设混合模式为add）。剪辑后效果如图9所示。
图9 影片剪辑
Fig.9 MovieClip
步骤3：再次绘制一个元件，如图10所示。
图10 带圆的矩形元件
Fig.10 retangle with a circle
其中，矩形部分用#808080填充（三个分量都是128），大小与前面的背景矩形相同；而中间的灰圆大小与红、绿圆相同，并进行放射性填充；三处的颜色均为808080，但alpha却不一样。具体地，左、中、右的alpha分别为0%、55%、100%
步骤4：将（2）、（3）步再合并为一个元件，效果如图11所示。
图11 合并产生的新元件
Fig.11 result of merge
其中，在图层最上面是灰圆，中间是红绿圆，最下是灰矩形。这样，圆的边缘部分即带有羽化效果。将这个元件命名为Displacer。
步骤5：编写代码，测试得出结果[5-6]。
var channel1：Number = 1； //选红色通道来计算X方向的偏移量
var channel2：Number = 4； //选蓝色通道来计算X方向的偏移量
var xMultiplier ：Number= 30； //x方向的放大系数
var yMultiplier：Number = 30； // x方向的放大系数
var mode：String = "clamp"；
var offset：Point = new Point（0， 0）；
var bmp：BitmapData = new BitmapData（502， 302）；
bmp.draw（Displacer）；
var displacementMapFilter：DisplacementMapFilter = new DisplacementMapFilter（bmp， offset， channel1， channel2， xMultiplier， yMultiplier， mode）
Background.filters = [displacementMapFilter]；
执行代码，效果如图12所示。
图12 最终扭曲涂抹效果图
Fig.12 Final result of clamp mode
3结束语
通过as3.0的flash.filters包，使得程序开发者利用编程即可实现与用户使用专业的图像处理软件，如Photoshop一样的图片滤镜处理效果，也就是利用BitmapData类和DisplacementMapFilter类可实现对位图的置换图滤镜应用。程序设计人员通过对该类程序的开发实现了对位图图像的移位、扭曲或斑点效果，一并也完成了显示对象的生动呈现，从而为图像处理提供了一种新的操作模式及执行方式。本文仅以DisplacementMapFilter类为例，其程序开发方法完全可以拓展到flash.filters包中其他滤镜类，以处理图像的不同滤镜效果。
参考文献：
[1] 刘菲，孟祥增.Flas的内容特征分析与图像信息提取研究[J].现代教育技术，2009 ，19（12）：91-94.
[2] 赵亮，何振林.Photoshop“置换滤镜”的探析[J].科技资讯.2006（22） ：90.
[3] 康彬，朱卫平.一种基于压缩感知的图像去马赛克算法[J]，南京邮电大学学报（自然科学版），2014，34（4）：39-43.
[4] AGHAGOLZADEH M，MOGHADAM A A，KUMAR M，et al. Bayer and panchromatic color filter array demosaicing by sparse recovery[J]. SPIE Proceedings， 2011，78： 1- 11.
[5] 朱治国，缪亮，陈艳丽.Flash ActionScript 3.0 编程技术教程[M].北京： 清华大学出版社，2008.
[6]李天培，王文凭，孙少斌. 基于ActionScript 3.0的行走动作模拟[J]. 自动化技术与应用， 2010，29（08）：30-32.