如何实现Alpha混合

分享于 

16分钟阅读

多媒体

 

Sample Image - alphafx.gif

覆盖的问题

本文介绍:

  • 阿尔法效应是什么
  • 如何从图像对象中创建alpha图像
  • 如何绘制( 文本,线条,圆弧 等等 ) 应用的图形构造
  • 如何创建淡入或者淡出alpha动画
  • 要注意的其他复杂事项

此外,代码还提供了创建alpha图像的示例。

目录

简介

阿尔法效应是你肯定已经看到的东西,虽然可能是未知的。 这是一个简单但有效的视觉效果,它的中图像或者文本淡入或者出现在实体背景或者图像中。 它在电影。电视节目。游戏和几乎任何存在的视觉媒体中都有广泛的应用。 它是如此的普遍,以至于它被忽略。

alpha效果通常用作动画。 动画要求画面连续连续显示,顺序顺序变化。 记住,本文的第一部分将介绍如何在图像对象中创建一个alpha映像。 接下来,解释如何在调用图形方法。弧形。文本 等等 以及如何创建动画时创建这里效果。 最后,指出一些值得注意的细节。

代码使用以下附加命名空间:

  • System.Drawing
  • System.Drawing.2D
  • System.Drawing.Imaging

在图像上应用 alpha

如果你一直在 C# 工作,你可以能想跳过分段'第一步'并继续进行'步骤 1'操作。 '第一步'给你一个简单的图形编程简介。

第一步

要使用. NET 中的图形或者带格式文本,通常需要依赖 GDI+。 GDI+ 只是一个 API ( 应用程序编程接口),帮助程序员更好地使用显示设备和图形。

要绘制一些图形,需要一个要在其中工作的区域。 或者用更好的词,图形将绘制的曲面。 这些曲面可以是显示设备的一部分,也可以是图像本身的( 这是以编程方式修改图像的方式)。 要表示曲面并处理它,你需要使用 Graphics 对象( System.Drawing 命名空间)。

所以,应用alpha的第一步是创建要绘制到的曲面的Graphics 对象。

步骤 1: 创建图形对象

如果要处理的曲面是控件的一部分,则调用控件方法的CreateGraphics 来创建它的Graphics 对象。 例如,假设你的窗体中有 PictureBox 控件 pictureBox1 ;下面的代码将允许你创建它的Graphics 对象:

Graphics gra = pictureBox1.CreateGraphics();

如果要处理的曲面是图像的一部分,则调用 static Graphics.FromImage 方法来创建对象对象的图像 Graphics。 图像对象由 Bitmap 或者 Metafile 类的实例表示,它们都从抽象的Image 类派生。 例如下面的代码从文件 logo.jpg, 创建 Bitmap 对象,然后创建它为 Graphics 对象。

Bitmap logo = new Bitmap("logo.jpg");
Graphics gra = Graphics.FromImage(logo);

Graphics 类包含一些方法,可以用来创建图形矩形,填充区域等基本图形。 但是要在图像上应用alpha你需要更多的控制。 为此,你将使用两个类: ImageAttributesColorMatrix ( System.Drawing.Imaging 命名空间)。 通过让你指定不同的设置如颜色调整。灰度调整等,ImageAttributes 对象允许你控制图形呈现的方式。 在 ImageAttributes 类的大多数方法中,ColorMatrix 类可以被视为一个 helper 类,它的实例是参数。 它包含指定 Alpha。红色。绿色和蓝色通道的值。

因此,下一步是初始化颜色矩阵对象并将它的传递给 ImageAttributes 对象的适当方法。

步骤 3: 创建ImageAttributes和ColorMatrix对象

一些基本基础:图像由颜色组成。 图像的所有颜色通常由三种原色组成: 红色,绿色和蓝色( 短的RGB )。 这三种原色的不同组合产生不同颜色,称为合成颜色。 通常,每个原色在 0到 255的范围内都可以取任何值。 当所有原色都有 0个值时,它就会创建颜色黑色。 当它们都是 255时,是白色。 通道是图像中存在的一个实体,它可以被认为是定义特定主色的可以见性。 例如如果切断红色通道,则不会显示红色的( 范围 0 -255 )。 另外,某些图像中存在一个Alpha通道,它定义图像的总可见性。 因此,图像可能有 RGBA,因为它是通道。 主颜色。主颜色的范围。通道。等等 都依赖于所使用的图像格式。 那是 off。

颜色矩阵是包含通道值的矩阵。 它是 5 x5矩阵,表示红色。绿色。蓝色。Alpha通道和另一个元素的值,以( RGBAw ) 表示。

ColorMatrix 对象中,矩阵的对角元素定义了通道值,即。 ( 0,0 ),( 1,1 ),( 2,2 ),( 3,3 ) 和( 4,4 ),按照- RGBAw之前指定的顺序。 值的类型为 浮点数 ,范围从 0到 1. w ( 处( 4,4 ) ) 始终为 1.

要做的是创建一个新的ColorMatrix 对象,并根据需要设置通道值。 为此,可以访问表示相应矩阵元素的属性。 例如 Matrix00 属性允许你访问( 0,0 ) 中的元素。

初始化 ColorMatrix 对象后,创建新的ImageAttributes 对象,并将新创建的ColorMatrix 对象分配给它。 这是通过调用 ImageAttributes 对象上的SetColorMatrix 方法完成的。 例如,下面的代码创建一个 ColorMatrix 对象,将它的设置为 0.5,并创建新的ImageAttributes 对象,将它的设置为:

ColorMatrix cm = new ColorMatrix();
cm.Matrix33 = 0.5;
ImageAttributes ia = new ImageAttributes();
ia.SetColorMatrix(cm);

最后一步是使用刚刚创建的ImageAttributes 对象绘制原始图像。 使用 ImageAttributes 对象将绘制我们在颜色矩阵中设置的alpha值的原始图像,创建alpha图像。

步骤 4: 绘制alpha图像

我们调用 Graphics 对象上的Graphics.DrawImage 方法的一个重载来绘制alpha图像。 注意这个重载应该接受一个 ImageAttributes 对象,我们将使用它来指定渲染修改。 因此选择适当的重载并调用它。 例如下面的代码在指定位置绘制图像 ImageBitmap,并使用 ImageAttributes 对象 ia:

gra.DrawImage(ImageBitmap,
 new Rectangle(0,0,ImageBitmap.Width,ImageBitmap.Height),
 0,0,ImageBitmap.Width, ImageBitmap.Height, GraphicsUnit.Pixel,
 ia);

下面是整个步骤的完整代码清单:

// Get a picture box's Graphics objectGraphics gra = pictureBox1.Graphics;// Create a new color matrix and set the alpha value to 0.5ColorMatrix cm = new ColorMatrix();
cm.Matrix00 = cm.Matrix11 = cm.Matrix22 = cm.Matrix44 = 1;
cm.Matrix33 = 0.5;// Create a new image attribute object and set the color matrix to// the one just createdImageAttributes ia = new ImageAttributes();
ia.SetColorMatrix(cm);// Draw the original image with the image attributes specifiedgra.DrawImage(ImageBitmap,
 new Rectangle(0,0,ImageBitmap.Width, ImageBitmap.Height),
 0,0,ImageBitmap.Width, ImageBitmap.Height, GraphicsUnit.Pixel,
 ia);

在图形构造中应用 alpha

Graphics 方法consists一些特定的绘制方法,例如使用这些方法时,可以在使用这些方法时使用alpha右,而不是像前面解释的那样将它的应用到图像中。 这无疑会更直观地说明如下:

Graphics 类(。DrawIconDrawImage 除外)的所有特定图形构造方法使用 Pen 或者 Brush 对象作为参数。 PenBrush 类都有一个通用的底层元素 Color ;这意味着两个类都直接或者间接地使用 Color 结构。 我们利用这个事实来简化alpha的应用。

Color 结构不仅定义了RGB通道,而且定义了Alpha通道。 要在一起定义一个新的Color 对象来定义它是 alpha,我们使用 Color.FromArgb 方法:

publicstatic Color FromArgb(
 int alpha,
 int red,
 int green,
 int blue
);

其中每个元素的值范围为 0 -255.

这个想法是,使用期望的alpha值初始化一个 Color 对象,创建适当的Pen 或者 Brush 对象,并调用传递或者 Brush 对象的特定draw方法。 这将绘制与 Color 结构中的alpha值设置的图形,并将创建与使用第一个过程所获得的相同的alpha效果。

若要根据 Color 对象创建 Pen 对象,请使用 Pen.Pen(Color) 构造函数。

若要根据 Color 对象创建 Brush 对象,请使用 SolidBrush.SolidBrush(Color) 构造函数。 SolidBrush 类是从抽象 Brush 类派生的。 有些类派生自 Brush 类,它的中有些类使用 Color 结构,但这是一个不同的故事。

下面的代码使用'文本'100绘制一个字符串。 ( 请注意,100在这里过程中不是 100%。 这可能会被忽略。

gra = e.Graphics;
gra.DrawString("Text", new Font("Verdana", 24), 
 new SolidBrush(Color.FromArgb(100,0,0,0)), 0,0 );

同样,可以对其他构造进行alpha效应。

创建alpha动画

显示alpha效果的动画通常有两种类型: 淡入淡出。动画淡入淡出以黑色( 通常) 背景开始,并以实际图像结束。 技术上,起始帧为 alpha,结束帧为 alpha 100. 淡出动画是完全相反的。 背景也可能是另一个图像。

要创建两种类型的动画,你需要创建一个完整的alpha图像序列并按顺序显示它们。

首先,决定需要的离散alpha图像的数量。 要创建平滑效果,建议至少fifteen帧。 确定了数字之后,创建一个具有这里大小的Bitmap array。 然后启动循环,在 array 中创建所需的alpha值的Bitmap 对象。 最后,根据目标,创建 Graphics 对象并绘制图像,或者将控件属性的Image 设置为这里对象。 这种在内存中创建图像序列并显示它们的方法称为双缓冲。

下面的代码在上述过程中创建一个图像序列:

int FrameCount = 15;float opacity = 0.0F;
Bitmap original = new Bitmap("logo.jpg");
Bitmap[] frames = new Bitmap[FrameCount];for(int x=0; x<FrameCount; x++, opacity+=0.1F)
{
 Bitmap alpha = new Bitmap(original, original.Size);
 Graphics gra = Graphics.FromImage(alpha);
 gra.Clear(Color.Transparent);
 ColorMatrix cm = new ColorMatrix();
 cm.Matrix00 = cm.Matrix11 = cm.Matrix22 = cm.Matrix44 = 1;
 cm.Matrix33 = opacity;
 ImageAttributes ia = new ImageAttributes();
 ia.SetColorMatrix(cm);
 gra.DrawImage(original, 
 new Rectangle(0,0,original.Width,original.Height),
 0,0,original.Width, original.Height, GraphicsUnit.Pixel, ia);
 frames[x] = alpha;
}

为了显示它们,你可以能需要使用计时器或者控制绘图处理程序的唯一性。

杂项内容

复合模式

当从曲面获取 Graphics 对象时,可能已经在同一曲面上绘制了某些图像。 在上面绘制一个具有完整alpha的新图像将覆盖旧图像。 用部分alpha绘制新图像不一定会这样做。 在这种情况下存在两种可能性: 新图像将覆盖旧图像,或者新图像与旧图像( 旧图像通过部分显示) 混合。 若要定义绘制新图像的方式,请使用 Graphics 类的CompositingMode 属性。

System.Drawing.Drawing2D 命名空间中定义的CompositingMode 是具有两个成员的枚举:

  • SourceCopy,它指定新图像覆盖旧图像
  • SourceOver,指定新图像与旧图像相混合,而新图像与新图像的alpha组件相混合。

在创建 Graphics 对象后,将它的CompositingMode 属性设置为所需成员并继续。

当你从控件创建 Graphics 对象时,不管你是否将它的设置为或者不使用它,新的图像都会自动覆盖旧图像。

还要注意,从 Image 对象创建一个 Graphics 对象是相反的- 新图像与旧对象混合。

你可以通过在绘图前传递一些颜色像 Color.Transparent 这样的颜色来达到同样的效果,而不是设置为 SourceCopy

结论

就是这样 !

更新

  • 22/09/2003: 刚刚发布。考虑在代码中添加动画部分,以及是否要添加其他细节。

IMP  Blend  Alpha  Blending  
相关文章