8.5.融合两幅图像

2023-08-02 23:09:22

字体：大中小

来源：转载

供稿：网友

8.5.1. 问题
我需要在运行时操作和结合多张图片，并使用过滤器来改变这些图片。
8.5.2. 解决办法
把图像作为BitmapData 对象，使用BitmapData 类combine 方法把两个位图和并为一个新的图像。
8.5.3. 讨论
BitmapData 和Bitmap 类是在运行时操作图像和建立新效果的强大的工具。这两个类经常串联使用，但又有不同。BitmapData 类封装实际的数据到图像，Bitmap 类是一个能被加入到现实列表中的显示对象。BitmapData 对象的建立和写入如下：

-ActionScript

var bitmapAsset:BitmapAsset = new BitmapAsset(img1.width, img1.height);
bitmapAsset.draw(img1);

首先，设置BitmapAsset 高度和宽度，确保该对象是正确的大小，并从一个图像写入所有数据。这把图像的所有数据作为一个位图来读取，并允许你操作这些数据。在下面的例子中，用colorTransform 方法操作BitmapData 对象的颜色数据，通过merge 方法和并两个位图。

colorTransform 方法适用于把数据从ColorTransform 对象传递到BitmapData 对象。

ColorTransform 对象修改显示对象的颜色或BitmapData 相应的数据被传递到结构中：

-ActionScript

ColorTransform(redMultiplier:Number = 1.0, greenMultiplier:Number = 1.0,blueMultiplier:Number = 1.0, alphaMultiplier:Number = 1.0, redOffset:Number = 0,greenOffset:Number = 0, blueOffset:Number = 0, alphaOffset:Number = 0)

当ColorTransform 对象被应用的显示对象时，像这样每个颜色通道重新计算了新的值：

-ActionScript

New red value = (old red value * redMultiplier) + redOffset 
New green value = (old green value * greenMultiplier) + greenOffset
New blue value = (old blue value * blueMultiplier) + blueOffset
New alpha value = (old alpha value * alphaMultiplier) + alphaOffset

BitmapData 类的merge 方法见下列标记

-ActionScript

merge(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point,redMultiplier :uint, greenMultiplier:uint, blueMultiplier:uint, alphaMultiplier:uint):void

它的参数：
sourceBitmapData:BitmapData
导入位图使用。源图像可以是一个不同的BitmapData 对象或是当前的BitmapData 对象。

sourceRect:Rectangle
使用导入源图像中的一个确定的矩形区域。

destPoint:Point[/color]
目标图像（当前BitmapData 实例）中的点，相对于源矩形的左上角。

redMultiplier:uint
一个十六进制uint 值，增加红色通道的值。

greenMultiplier:uint
一个十六进制uint 值，增加绿色通道的值。

blueMultiplier:uint
一个十六进制uint 值，增加蓝色通道的值。

alphaMultiplier:uint
一个十六进制uint 值，增加alpha 通道的值。

下面完整的代码，操作ColorTransform 的值

-XML

<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="500"
height="550" creationComplete="imgMod()">
<mx:Script>
<![CDATA[
import mx.core.BitmapAsset;
import mx.controls.Image;
[Embed(source="../assets/bigshakey.png")]
private var shakey:Class;
[Embed(source="../assets/mao.jpg")]
private var mao:Class;
//superimpose the two images together
//using the vslider data
private function imgMod():void
{
var maoData:BitmapData =
new BitmapData(firstImg.width,firstImg.height);
var shakeyData:BitmapData =
new BitmapData(secondImg.width,secondImg.height);
maoData.draw(firstImg);
shakeyData.draw(secondImg);
maoData.colorTransform(new Rectangle(0, 0,
maoData.width, maoData.height),
new ColorTransform(redSlider.value/10,
greenSlider.value/10,
blueSlider.value/10,alphaSlider.value/10));
var red:uint = (uint(redSlider.value.toString(16)) /
10) * 160;
var green:uint =
(uint(greenSlider.value.toString(16)) / 10) * 160;
var blue:uint = (uint(blueSlider.value.toString(16))
/ 10) * 160;
var alpha:uint =
(uint(alphaSlider.value.toString(16)) / 10) * 160;
shakeyData.merge(maoData, new Rectangle(0, 0,
shakeyData.width,shakeyData.height),
new Point(0, 0), red, green, blue, alpha);
mainImg.source = new BitmapAsset(shakeyData);
}

]]>
</mx:Script>
<mx:HBox>
<mx:Image id="firstImg" source="{mao}" height="200"
width="200"/>
<mx:Image id="secondImg" source="{shakey}" height="200"
width="200"/>
</mx:HBox>
<mx:HBox>
<mx:Text text="Red"/>
<mx:VSlider height="100" id="redSlider" value="5.0"
change="imgMod()"/>
<mx:Text text="Blue"/>
<mx:VSlider height="100" id="blueSlider" value="5.0"
change="imgMod()"/>
<mx:Text text="Green"/>
<mx:VSlider height="100" id="greenSlider" value="5.0"
change="imgMod()"/>
<mx:Text text="Alpha"/>
<mx:VSlider height="100" id="alphaSlider" value="5.0"
change="imgMod()"/>
</mx:HBox>
<mx:Image id="mainImg"/>
</mx:VBox>