GDI+之坐标变换、矩阵变换及色彩变换

Home / Article MrLee 2015-4-1 3819

坐标变换、矩阵变换

继续讲解VC++的GID+图形编程。在Graphics类中，有几个函数实现了简单的坐标变换 
Graphics::TranslateTransform(dx, dy, order)//平移坐标系
Graphics::RotateTransform(angle, order)//旋转坐标系
Graphics::ScaleTransform(sx, sy, order)//缩放坐标系

这里有个order参数着重讲一下，它是指矩阵的乘法顺序，是左乘还是右乘；
除了这几个基本函数以外，还可以使用矩阵来变换坐标系，使用 
Graphics::SetTransform(matrix)
来进行设置，但目前还用不太到矩阵变换，所以就先不仔细写笔记了，如果想具体了解，看《精通GDI+编程》第六章

色彩变换

GDI+提供了Image类和Bitmap类来保存、维护图片的信息。对于色彩的存储，Image类和Bitmap类使用一个32位的数值来保存。红、绿、蓝及透明度各占8位，每一个色彩分量的取值范围是0-255。透明度为0表示完全透明，为255时，色彩完全可见。对透明度的的支持是GDI+的一大特色，但同时也为色彩的运算增加了一定的难度。
一、色彩信息的矩阵表示
四阶表示
由于一个色彩信息包含R、G、B、Alpha信息，所以，我们必然要使用一个4阶色彩变换矩阵来修改色彩的每一个分量值：


注意：对于色彩变换矩阵，这里的色彩顺序是R、G、B、A而不是A、R、G、B！！！
如果想将色彩（0，255，0，255）更改为半透明时，可以使用下面的的矩阵运算来表示：

为什么使用五阶矩阵
上面使用四阶矩阵完全可以改变图片的RGBA值了，但考虑一种情况，如果我们只想在原有的R色上增加一些分量呢？ 这时，我们就得再多加一阶来表示平移变换。所以，一个既包含线性变换，又包含平移变换的组合变换，称为仿射变换。使用四阶的色彩变换矩阵来修改色彩，只能够对色彩的每一个分量值进行乘（除）运算，如果要对这些分量值进行加减法的运算（平移变换），只能通过五阶矩阵来完成。 考虑下面这个变换： 1、红色分量值更改为原来的2倍； 2、绿色分量增加100； 则使用4阶矩阵的乘法无法实现，所以，应该在四阶色彩变换矩阵上增加一个“哑元坐标”，来实现所列的矩阵运算。

这个矩阵中，分量值用的是100，但在实际应用中，并没有100这个数，而是用下面的分量饱和度的方法来表示的。 色彩饱和度，是指某色彩占总饱和度（255）的分量，比如一个像素的红色（R值）值为A，那么A/255的值就称为红色分量饱和度。上面的100分量，它的饱和度就是100/255=0.39
所以，假设有一个像素的色彩值为（0.2,0.0,0.7,1）---注意用了色彩饱和度表示，在实际运算中，就是这么表示的。如果想达到对红色分量饱和度扩大2倍，并且分别将3种基准色的饱和度都加上0.2，则引入的色彩矩阵应该是：

GDI+的色彩变换矩阵（ColorMatrix）
在上面的所有讲解之后，大家也应该看出来了，色彩变换矩阵的表示形式，肯定是五阶的那种，所以大家看一下，在默认情况下，色彩变换矩阵的形式：

所以跟上面的讲解一样： 1、对角线上的数值，相当于对RGB分量进行乘法操作。 2、修改最后一行上的数值，相当于对RGB分量的饱和度进行加（减）运算。 GDI+对色彩变换矩阵的修改是通过ImageAttributes对象的SetColorMatrix函数进行的，其调用方法如下： 
Graphics::TranslateTransform(dx, dy, order)//平移坐标系
Graphics::RotateTransform(angle, order)//旋转坐标系
Graphics::ScaleTransform(sx, sy, order)//缩放坐标系

参数说明： colorMatrix:[in]色彩变换矩阵，数据类型为ColorMatrix，下面具体讲； mode:[in]修改的标记，ColorMatrixFlags枚举类，它的值可以是以下3个 
Graphics::TranslateTransform(dx, dy, order)//平移坐标系
Graphics::RotateTransform(angle, order)//旋转坐标系
Graphics::ScaleTransform(sx, sy, order)//缩放坐标系

type:[in]使用色彩矩阵调整的对象； 着重讲下colorMatrix 先看下定义： 
struct ColorMatrix{   REAL  m[5][5];//5*5数组 };
所以我们在定义ColorMatrix时，应当这样赋值 
Graphics::TranslateTransform(dx, dy, order)//平移坐标系
Graphics::RotateTransform(angle, order)//旋转坐标系
Graphics::ScaleTransform(sx, sy, order)//缩放坐标系

就是上面这个转换矩阵，看个例子 
Image image(L"wlh.bmp");
ImageAttributes imageAttributes;
UINT width=image.GetWidth();
UINT height=image.GetHeight();
ColorMatrix colorMatrix={
 1.0f,0.0f,0.0f,0.0f,0.0f,
 0.0f,1.0f,0.0f,0.0f,0.0f,
 0.0f,0.0f,1.0f,0.0f,0.0f,
 0.0f,0.0f,0.0f,1.0f,0.0f,
 0.2f,0.0f,0.0f,0.0f,1.0f
};
imageAttributes.SetColorMatrix(&colorMatrix,ColorMatrixFlagsDefault,ColorAdjustTypeBitmap);
graphics.DrawImage(&image,RectF(0,0,width,height));
graphics.TranslateTransform(width+10,0);
graphics.DrawImage(&image,Rect(0,0,width,height),0,0,width,height,UnitPixel,&imageAttributes);

二、色彩几种运算方式（平移、缩放、旋转、投射）
色彩的平移运算
色彩的平移运算，实际上就是色彩的加法运算。其实就是在色彩变换矩阵的最后一行加上某个值；

图中的灰色部分就是参与色彩平移运算的4个矩阵元素。 我们看个例子，（图片中红色分量增加0.2饱和度） 
Image image(L"wlh.bmp");
ImageAttributes imageAttributes;
UINT width=image.GetWidth();
UINT height=image.GetHeight();
ColorMatrix colorMatrix={
	1.0f,0.0f,0.0f,0.0f,0.0f,
	0.0f,1.0f,0.0f,0.0f,0.0f,
	0.0f,0.0f,1.0f,0.0f,0.0f,
	0.0f,0.0f,0.0f,1.0f,0.0f,
	0.2f,0.0f,0.0f,0.0f,1.0f
};
imageAttributes.SetColorMatrix(&colorMatrix,ColorMatrixFlagsDefault,ColorAdjustTypeBitmap);
graphics.DrawImage(&image,RectF(0,0,width,height));
graphics.TranslateTransform(width+10,0);
graphics.DrawImage(&image,Rect(0,0,width,height),0,0,width,height,UnitPixel,&imageAttributes);

我们看右边的图像是怎么变过来的，由于图片是由一个个像素组成的，所以用每个像素的饱和度组成数组，来乘转换矩阵，结果就是转换后的当前点的颜色值，值得说明的是，颜色的饱和度最大为1，当运算后的值超过1时，截取小数部分做为色彩分量饱和度（书上是这么写的P284，但试验之后，并不是）；看下面这个转换例子：

色彩的缩放运算
色彩的缩放运算其实就是色彩的乘法运算。在色彩矩阵对角线上的分别代表R、G、B、A的几个值，将其分别乘以指定的值。这就是所谓的缩放变换。


再重复一遍：值得说明的是，颜色的饱和度最大为1，当运算后的值超过1时，截取小数部分做为色彩分量饱和度（书上是这么写的P284，但试验之后，并不是）；
看个例子吧：（将蓝色分量扩大两倍） 
Image image(L"wlh.bmp");
ImageAttributes imageAttributes;
UINT width=image.GetWidth();
UINT height=image.GetHeight();
ColorMatrix colorMatrix={
 1.0f,0.0f,0.0f,0.0f,0.0f,
 0.0f,1.0f,0.0f,0.0f,0.0f,
 0.0f,0.0f,2.0f,0.0f,0.0f,//B分量变为2倍
 0.0f,0.0f,0.0f,1.0f,0.0f,
 0.0f,0.0f,0.0f,0.0f,1.0f
};
imageAttributes.SetColorMatrix(&colorMatrix,ColorMatrixFlagsDefault,ColorAdjustTypeBitmap);
graphics.DrawImage(&image,RectF(0,0,width,height));
graphics.TranslateTransform(width+10,0);
graphics.DrawImage(&image,Rect(0,0,width,height),0,0,width,height,UnitPixel,&imageAttributes);


缩放变换的特殊应用（通道输出）
由于在色彩变换矩阵中，对角线上的数的取值范围是从0-1的，所以当取0时，这个色彩就完全不显示，所以当我们R、G都取0，而独有B取1时，就只显示了蓝色，所形成的图像也就是我们通常说的蓝色通道；看下几个通道输出的效果图：


示例：（只演示绿色通道输出） 
Image image(L"wlh.bmp");
ImageAttributes imageAttributes;
UINT width=image.GetWidth();
UINT height=image.GetHeight();
ColorMatrix colorMatrix={
 0.0f,0.0f,0.0f,0.0f,0.0f,
 0.0f,1.0f,0.0f,0.0f,0.0f,
 0.0f,0.0f,0.0f,0.0f,0.0f,
 0.0f,0.0f,0.0f,1.0f,0.0f,
 0.0f,0.0f,0.0f,0.0f,1.0f
};
//绘制原图
graphics.DrawImage(&image,RectF(0,0,width,height));
//绘制变换后的图像
graphics.TranslateTransform(width+10,0);
imageAttributes.SetColorMatrix(&colorMatrix,ColorMatrixFlagsDefault,ColorAdjustTypeBitmap);
graphics.DrawImage(&image,Rect(0,0,width,height),0,0,width,height,UnitPixel,&imageAttributes);


色彩的旋转运算
RGB色是如何旋转的呢，首先用R、G、B三色建立立体坐标系：

所以，我们可以把一个色彩值看成三维空间里的一个点，色彩值的三个分量可以看成该点的坐标（三维坐标）。我们先不考虑，在三个维度综合情况下是怎么旋转的，我们先看看，在某个轴做为Z轴，在另两个轴形成的平面上旋转的情况，下图分析了，在将蓝色轴做为Z轴，仅在红—绿平面上旋转a度的情况：

这里我们分别讲解下为什么最终的R=原R*cosa-原G*sina; 在图中，我们可以看到，在旋转后，原R在R轴的分量变为:原R*cosa，但原G分量在旋转后，在R轴上也有了分量，但分量落在了负轴上，所以我们要减去这部分分量，所以最终的结果是最终的R=原R*cosa-原G*sina;
下面就看下书上关于几种旋转计算及结果矩阵，（注意：这几个图只标记了原X轴色彩分量的旋转，没有把Y轴色彩分量的旋转标记出来）
构造一个“红色绕着蓝色旋转”的色彩变换矩阵


构造一下“绿色绕着红色旋转”的色彩变换矩阵

构造一下“蓝色绕着红色旋转”的色彩变换矩阵

示例：（红色向蓝色旋转60度） 注意：为了演示如何清除色彩矩阵，这里颠倒了变换图像与原图的显示顺序；注意加上头文件 
Image image(L"wlh.bmp");
ImageAttributes imageAttributes;
UINT width=image.GetWidth();
UINT height=image.GetHeight();
//红色绕蓝色旋转
ColorMatrix colorMatrix={
	cos(60.0f),sin(60.0f),0.0f,0.0f,0.0f,
	-sin(60.0f),cos(60.0f),0.0f,0.0f,0.0f,
	0.0f,0.0f,1.0f,0.0f,0.0f,
	0.0f,0.0f,0.0f,1.0f,0.0f,
	0.0f,0.0f,0.0f,0.0f,1.0f
};
imageAttributes.SetColorMatrix(&colorMatrix,ColorMatrixFlagsDefault,ColorAdjustTypeBitmap);
graphics.DrawImage(&image,Rect(0,0,width,height),0,0,width,height,UnitPixel,&imageAttributes);
//输出原图
graphics.TranslateTransform(width+10,0);
imageAttributes.ClearColorMatrix(ColorAdjustTypeBitmap);//清除色彩变换
graphics.DrawImage(&image,RectF(0,0,width,height));

色彩的投射运算
上面我们对对角线上的值进行了修改，对最后一行的值进行了修改，但对其它位置的值还没有修改。这里指的位置，看下图阴影部分；

对这些值进行修改时，修改所使用的增加值来自于其它色彩分量的信息。 看下具体的运算方式：

注意：最终结果的0.5=0.2*1+1*0.3,可见红色分量在原有红色分量的基础上，增加了绿色分量值的0.3倍；利用其它色彩分量的倍数来更改自己色彩分量的值，这种运算就叫投射运算。
示例：（红色分量在原有基础上增加上绿色分量的40%） 
Image image(L"wlh.bmp");
ImageAttributes imageAttributes;
UINT width=image.GetWidth();
UINT height=image.GetHeight();
ColorMatrix colorMatrix={
 1.0f,0.0f,0.0f,0.0f,0.0f,
 0.0f,1.0f,0.0f,0.0f,0.0f,
 0.4f,0.0f,1.0f,0.0f,0.0f,//增加绿色分量值的0.4倍
 0.0f,0.0f,0.0f,1.0f,0.0f,
 0.0f,0.0f,0.0f,0.0f,1.0f
};
//绘制原图
graphics.DrawImage(&image,RectF(0,0,width,height));
//绘制变换后的图
graphics.TranslateTransform(width+10,0);
imageAttributes.SetColorMatrix(&colorMatrix,ColorMatrixFlagsDefault,ColorAdjustTypeBitmap);
graphics.DrawImage(&image,Rect(0,0,width,height),0,0,width,height,UnitPixel,&imageAttributes);

三、色彩映射（色彩替换）
色彩映射，说白了，就是对图片原有的颜色进行替换，比如将原来的蓝色替换成红色。在制作电视时，背景通常都是蓝色的，目的是为了方便后期视频的深加工。如果需要更改背景或者进行视频合成，只需要将蓝色背景抠去，保留主要画面就行了。
GDI+中使用ColorMap结构体就能实现将指定颜色替换成其它颜色。ImageAttributes类的SetRemapTable(设置重映射表)可以将这个数据结构应用到图像中，SetRemapTable函数的调用格式为： 
Status SetRemapTable(
  UINT mapSize,
  const ColorMap* map,
  ColorAdjustType type
);

ColorMap的定义格式如下： 
struct ColorMap{
  Color  oldColor;
  Color  newColor;
};

参数说明： mapSize:[in]ColorMap数组大小； map:[in]ColorMap数组，表示一种或多种色彩替换的对应关系，如果数组中定义了多个替换关系，那么所有被定义要替换的颜色都将被替换掉。 type:[in]表示在什么对象上进行色彩替换。 示例：（将原图中的背景，全部替换成纯红色---注意背景由两种颜色组成） 
Image image(L"wlh.bmp");
ImageAttributes imageAttributes;
UINT width=image.GetWidth();
UINT height=image.GetHeight();
ColorMap colorMap[2];
colorMap[0].oldColor=Color(255,0,0,255);
colorMap[0].newColor=Color(255,255,0,0);
colorMap[1].oldColor=Color(255,0,145,247);
colorMap[1].newColor=Color(255,255,0,0);
imageAttributes.SetRemapTable(2,colorMap,ColorAdjustTypeBitmap);
graphics.DrawImage(&image,RectF(0,0,width,height));
//绘制变换后的图
graphics.TranslateTransform(width+10,0);
graphics.DrawImage(&image,Rect(0,0,width,height),0,0,width,height,UnitPixel,&imageAttributes);

本文链接:https://it72.com/1817.htm

收藏的用户（0） X
正在加载信息~
推荐阅读
Notepad++用插件TextFX批量删除换行
三星发布Gear S2智能手表
angularJS directive详解
【TNAS】Linux精简版安装Memecache缓存
请启用虚拟机平台 windows 功能并确保在 bios 中启用虚拟化
12306购买火车票付款时间缩短至30分钟
各浏览器的css线性渐变(linear-gradient)
FFmpeg源代码简单分析：makefile
大菠萝2（暗黑破坏神2-1.13C战网服务端）
element-UI组件实现拖拽效果
最新回复 (0)
返回
站点信息
  • 文章
    2300
  • 用户
    1336
  • 访客
    10861715
每日一句
True success inspires others to act.
真正的成功是激励他人行动。
新会员