Loading

EasyX 绘制透明背景图

 

三元光栅操作

根据在网上的搜索总结得到两种方案,最常见的绘制带有透明背景的图像的方案都是采用如下的源图像和掩码图像叠加来消去边缘部分:

IMAGE img[2];

loadimage(&img[0], "sun1.png", 100, 100); // 掩码图像
loadimage(&img[1], "sun0.png", 100, 100); // 源图像

putimage(0, 0, &img[0], NOTSRCERASE);   // 掩码图与背景或取反
putimage(0, 0, &img[1], SRCINVERT);     // 源图像与背景异或

 

直观理解:由于按位运算是依次对某一位做运算,因此只需要考察一位数字的变化

// 不妨假设白色为 1,黑色为 0

// 需要变成透明的部分,需要显示最初的背景色
// 背景色为 a,~a 表示反 a,掩码此部分是黑色 0,源图像此部分是白色 1
~ (a | 0); //-> ~a 或取反
(~a) ^ 1; //-> a 异或
// 结果仍为背景色

// 需要显示源图像的部分
// 背景色为 a,源图像此部分为 b,掩码此部分是白色 1
~ (a | 1); //-> 0 或取反(可以看到第一部分与 a 无关)
0 ^ b; //-> b 异或
// 结果为源图像

 

然而,上面的方案虽然足够解决问题,但是未免太过繁琐,不仅需要源图像,还需要花时间来制作掩码图。最糟糕的就是技术问题导致掩码图和原图不能完全重合,绘制出的图像有黑边。

于是,经过长期搜索,终于找到一种不需要掩码图,而是直接对图像进行处理的方案。

 

优化方案

此方案使用了贝叶斯定理来对图像的每个像素进行计算,原版代码的具体来源因为时间比较久,已经找不到了。这里的方案和原版本有所不同,因为实际需求,我根据原版本添加了透明度参数 AA ,并且修改了部分代码使得它与我的需求相契合。

 

函数声明为:

void drawAlpha(
    IMAGE* image, 			// 图像指针
    int x, int y, 			// 输出坐标
    int width, int height, 	 // 输出尺寸
    int pic_x, int pic_y, 	 // 图像中的位置
    double AA = 1			// 透明度
);

也就是说它会在 x,y 位置输出从图像中 pic_x,pic_y 位置开始,宽高为 width,height 的部分,且透明度为 AA

 

函数定义部分:

// 绘图函数,补充透明度 AA
void drawAlpha(IMAGE* image, int x, int y, int width, int height, int pic_x, int pic_y, double AA = 1)
{
	// 变量初始化
	DWORD* dst = GetImageBuffer();			// GetImageBuffer() 函数,用于获取绘图设备的显存指针, EasyX 自带
	DWORD* draw = GetImageBuffer();
	DWORD* src = GetImageBuffer(image);		// 获取 picture 的显存指针
	int imageWidth = image->getwidth();		// 获取图片宽度
	int imageHeight = image->getheight();	// 获取图片宽度
	int dstX = 0;							// 在 绘图区域 显存里像素的角标
	int srcX = 0;							// 在 image 显存里像素的角标

	// 实现透明贴图 公式: Cp=αp*FP+(1-αp)*BP , 贝叶斯定理来进行点颜色的概率计算
	for (int iy = 0; iy < height; iy++)
	{
		for (int ix = 0; ix < width; ix++)
		{
			// 防止越界
			if (ix + pic_x >= 0 && ix + pic_x < imageWidth && iy + pic_y >= 0 && iy + pic_y < imageHeight &&
				ix + x >= 0 && ix + x < WindowWidth && iy + y >= 0 && iy + y < WindowHeight)
			{
				// 获取像素角标
				int srcX = (ix + pic_x) + (iy + pic_y) * imageWidth;
				dstX = (ix + x) + (iy + y) * WindowWidth;

				int sa = ((src[srcX] & 0xff000000) >> 24) * AA;			// 0xAArrggbb; AA 是透明度
				int sr = ((src[srcX] & 0xff0000) >> 16);				// 获取 RGB 里的 R
				int sg = ((src[srcX] & 0xff00) >> 8);					// G
				int sb = src[srcX] & 0xff;								// B

				// 设置对应的绘图区域像素信息
				int dr = ((dst[dstX] & 0xff0000) >> 16);
				int dg = ((dst[dstX] & 0xff00) >> 8);
				int db = dst[dstX] & 0xff;
				draw[dstX] = ((sr * sa / 255 + dr * (255 - sa) / 255) << 16)  //公式: Cp=αp*FP+(1-αp)*BP  ; αp=sa/255 , FP=sr , BP=dr
					| ((sg * sa / 255 + dg * (255 - sa) / 255) << 8)         //αp=sa/255 , FP=sg , BP=dg
					| (sb * sa / 255 + db * (255 - sa) / 255);              //αp=sa/255 , FP=sb , BP=db
			}
		}
	}
}

 

注意其中 WindowWidth 和 WindowHeight 都是预先定义的全局变量。实际应用时,先在头文件中定义窗口尺寸,然后就可以直接使用

IMAGE img;
loadimage(&img, "sun.png", 100, 100);

int x = 100, y = 100;
int width = 50, height = 50;
int pic_x = 50, pic_y = 50;

drawAlpha(img, x, y, width, height, pic_x, pic_y, 0.8);

还可以调整透明度为 0.8 ,比方案 1 更为实用。

posted @ 2022-02-28 22:09  Bluemultipl  阅读(2478)  评论(2编辑  收藏  举报