D3DDrawLib 动态图形绘制库

发表于 2024-07-31 更新于 2024-10-12

一款基于C/C++语言开发的动态绘图库，该库可实现在Windows系统中与任意第三方进程交互并进行动态绘图。通过使用该库，用户可以轻松绘制线条、方框、文字、准心、进度条、圆等各种图形元素，以满足不同应用场景下的图形需求。例如，可以在摄像头物体识别或图像识别后，利用其丰富的绘图功能进行精确的打点和标记，提高数据可视化和分析效率。

20240730163142

该库支持通过窗口句柄实现实时绘图功能，同时提供了灵活的参数设置接口，使用户能够根据具体需求自定义绘制样式和位置。无论是用于安全监控系统、工业自动化控制还是教育研究中的实验数据展示，这个库都能提供稳定可靠的绘图解决方案。

在使用D3DDrawLib库之前，读者需要自行引入Microsoft DirectX SDK (June 2010)开发工具包，并包含include与lib库到项目中，当一切配置就绪接着就可以在主函数中使用#include <D3DDrawLib.h>来包含头文件，并指定引入D3DDrawLib.lib库文件。

主函数中保留了两个接口，其中Function()用于实现功能，例如对菜单及图形的动态绘制过程可以写在此处，菜单的绘制部分则可以写在Draw()函数内，在主函数中通过内置方法寻找到要绘制的主窗体，并调用D3DDrawLib::Start()->createWindow()函数在其窗体之上附加一个子窗体实现绘制，其案例代码如下所示；

#include <iostream>
#include <windows.h>
#include <D3DDrawLib.h>

#pragma comment(lib,"D3DDrawLib.lib")

int w = 0;
int h = 0;

// 函数功能实现
void Function()
{
}

// 菜单绘制部分
void Draw()
{
}

void Ptr()
{
	Function();
	Draw();
}

int main(int argc, char *argv[])
{
	// 指定窗体类名
	const char* class_name = "DrawingBoard";

	// 通过进程名得到进程PID
	DWORD pid = D3DDrawLib::Start()->GetProcessIdByName(L"DrawingBoard.exe");
	printf("进程PID = %d \n", pid);

	// 获取进程句柄
	HANDLE hwnd = D3DDrawLib::Start()->GetProcessHandle(pid);
	printf("进程句柄 = %d \n", hwnd);

	w = D3DDrawLib::Start()->GetWindowWidth(class_name, class_name);
	h = D3DDrawLib::Start()->GetWindowHeight(class_name, class_name);
	D3DDrawLib::Start()->createWindow(class_name, class_name, "黑体", Ptr);

	return 0;
}

在之后的案例演示中，我们只需要更改Draw()函数内的绘制代码即可，其他代码保持不变，接下来将逐一演示绘制线条、方框、文字、准心、进度条、圆等各种图形元素。

绘制线条

线条的绘制可以使用封装好的三个函数，其中使用DrawLine()可用于绘制普通线条，使用PlaneHorizontalLine()用于绘制平面横线，使用PlaneVerticalLine()则可用于绘制平面竖线，如下所示笔者将依次介绍不同函数的调用案例，并在此基础之上绘制一些特定图形。

参数说明

DrawLine：该函数用于绘制普通平面直线，线条可自由指定方向，其中第1-2个参数用于指定线条的起点坐标(x,y)、第3-4个参数用于指定终点坐标(x,y)、第5个参数用于指定线条宽度、第6个参数用于指定线条的颜色，此处的颜色为红色 (R=255, G=0, B=0, A=255)。

D3DDrawLib::Start()->DrawLine(
    50.0f, 
    50.0f, 
    200.0f, 
    200.0f, 
    2.0f, 
    D3DCOLOR_RGBA(255, 0, 0, 255)
);

PlaneHorizontalLine：该函数用于绘制平面水平线，此类线条仅支持水平方向绘制，其中第1个参数用于指定水平线的起点x坐标、第2个参数用于指定水平线的起点y坐标、第3个参数用于指定水平线长度、第4个参数用于指定线条宽度、第5个参数用于指定线条颜色，此处的颜色为绿色 (R=0, G=255, B=0, A=255)。

D3DDrawLib::Start()->PlaneHorizontalLine(
    100.0f,
    100.0f,
    150.0f,
    2.0f,
    D3DCOLOR_RGBA(0, 255, 0, 255)
);

PlaneVerticalLine：该函数用于绘制平面竖线，此类线条仅支持竖志方向绘制，其中第1个参数用于指定竖直线的起点x坐标、第2个参数用于指定竖直线的起点y坐标、第3个参数用于指定竖直线的长度、第4个参数用于指定线条宽度、第5个参数用于指定线条颜色，此处的颜色为蓝色 (R=0, G=0, B=255, A=255)。

D3DDrawLib::Start()->PlaneVerticalLine(
    300.0f,
    100.0f,
    150.0f,
    2.0f,
    D3DCOLOR_RGBA(0, 0, 255, 255)
);

调用案例

接着，我们将使用上述函数来实现绘制，读者只需要将代码放入到框架内的Draw()绘制区即可，如下代码中我们依次调用DrawLine、PlaneHorizontalLine及PlaneVerticalLine函数；

void Draw()
{
	// 绘制普通平面直线
	D3DDrawLib::Start()->DrawLine(
		50.0f,
		50.0f,
		200.0f,
		200.0f,
		2.0f,
		D3DCOLOR_RGBA(255, 0, 0, 255)
	);

	// 绘制平面水平线
	D3DDrawLib::Start()->PlaneHorizontalLine(
		100.0f,
		100.0f,
		150.0f,
		2.0f,
		D3DCOLOR_RGBA(0, 255, 0, 255)
	);

	// 绘制平面竖线
	D3DDrawLib::Start()->PlaneVerticalLine(
		300.0f,
		100.0f,
		150.0f,
		2.0f,
		D3DCOLOR_RGBA(0, 0, 255, 255)
	);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的三条不同颜色的线条；

20240731102154

同理，若要绘制三角形结构则只需要调整边角比例关系即可实现，代码所示通过计算得到三角形的三个顶点坐标，然后再通过调用DrawLine函数实现绘制。

void Draw()
{
	// 定义三角形的顶点
	float x1 = 100.0f, y1 = 100.0f;
	float x2 = 200.0f, y2 = 100.0f;
	float x3 = 150.0f, y3 = 50.0f;

	// 绘制三角形的三条边

	// 底边
	D3DDrawLib::Start()->DrawLine(
		x1,
		y1,
		x2,
		y2,
		2.0f,
		D3DCOLOR_RGBA(255, 0, 0, 255)
	);

	// 右边
	D3DDrawLib::Start()->DrawLine(
		x2,
		y2,
		x3,
		y3,
		2.0f,
		D3DCOLOR_RGBA(0, 255, 0, 255)
    );

	// 左边
	D3DDrawLib::Start()->DrawLine(
		x3,
		y3,
		x1,
		y1,
		2.0f,
		D3DCOLOR_RGBA(0, 0, 255, 255)
	);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的等边三角形结构；

20240731102504

同理，若要绘制等边六边形仅需计算出六条边的比例关系并调用绘图库函数即可实现，如下代码所示；

void Draw()
{
	// 定义六边形的顶点
	float cx = 200.0f, cy = 200.0f;  // 中心点
	float radius = 50.0f;            // 半径
	float angle = 3.14159f / 3;      // 每个角的弧度（60度）

	// 计算六边形的六个顶点
	float x1 = cx + radius * cos(0 * angle), y1 = cy + radius * sin(0 * angle);
	float x2 = cx + radius * cos(1 * angle), y2 = cy + radius * sin(1 * angle);
	float x3 = cx + radius * cos(2 * angle), y3 = cy + radius * sin(2 * angle);
	float x4 = cx + radius * cos(3 * angle), y4 = cy + radius * sin(3 * angle);
	float x5 = cx + radius * cos(4 * angle), y5 = cy + radius * sin(4 * angle);
	float x6 = cx + radius * cos(5 * angle), y6 = cy + radius * sin(5 * angle);

	// 绘制六边形的六条边
	D3DDrawLib::Start()->DrawLine(x1, y1, x2, y2, 2.0f, D3DCOLOR_RGBA(255, 0, 0, 255));
	D3DDrawLib::Start()->DrawLine(x2, y2, x3, y3, 2.0f, D3DCOLOR_RGBA(0, 255, 0, 255));
	D3DDrawLib::Start()->DrawLine(x3, y3, x4, y4, 2.0f, D3DCOLOR_RGBA(0, 0, 255, 255));
	D3DDrawLib::Start()->DrawLine(x4, y4, x5, y5, 2.0f, D3DCOLOR_RGBA(255, 255, 0, 255));
	D3DDrawLib::Start()->DrawLine(x5, y5, x6, y6, 2.0f, D3DCOLOR_RGBA(0, 255, 255, 255));
	D3DDrawLib::Start()->DrawLine(x6, y6, x1, y1, 2.0f, D3DCOLOR_RGBA(255, 0, 255, 255));
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的等边六边形结构；

20240731103753

我们继续将上述代码进行延申扩展，通过定义一个二维矩阵我们可以在五边形内内嵌一个五边形，如下代码所示；

void Draw()
{
	// 定义五角星的顶点
	float cx = 200.0f, cy = 200.0f;  // 中心点
	float outerRadius = 50.0f;       // 外圈半径
	float innerRadius = 20.0f;       // 内圈半径
	float angle = 3.14159f / 5;      // 每个角的弧度（36度）

	// 计算五角星的顶点
	float x[10], y[10];
	for (int i = 0; i < 10; ++i)
	{
		float r = (i % 2 == 0) ? outerRadius : innerRadius;
		x[i] = cx + r * cos(i * angle);
		y[i] = cy + r * sin(i * angle);
	}

	// 绘制五角星的五条边
	D3DDrawLib::Start()->DrawLine(x[0], y[0], x[2], y[2], 2.0f, D3DCOLOR_RGBA(255, 0, 0, 255));
	D3DDrawLib::Start()->DrawLine(x[2], y[2], x[4], y[4], 2.0f, D3DCOLOR_RGBA(0, 255, 0, 255));
	D3DDrawLib::Start()->DrawLine(x[4], y[4], x[6], y[6], 2.0f, D3DCOLOR_RGBA(0, 0, 255, 255));
	D3DDrawLib::Start()->DrawLine(x[6], y[6], x[8], y[8], 2.0f, D3DCOLOR_RGBA(255, 255, 0, 255));
	D3DDrawLib::Start()->DrawLine(x[8], y[8], x[0], y[0], 2.0f, D3DCOLOR_RGBA(255, 0, 255, 255));

	// 连接内外顶点
	D3DDrawLib::Start()->DrawLine(x[1], y[1], x[3], y[3], 2.0f, D3DCOLOR_RGBA(0, 255, 255, 255));
	D3DDrawLib::Start()->DrawLine(x[3], y[3], x[5], y[5], 2.0f, D3DCOLOR_RGBA(255, 128, 0, 255));
	D3DDrawLib::Start()->DrawLine(x[5], y[5], x[7], y[7], 2.0f, D3DCOLOR_RGBA(128, 0, 255, 255));
	D3DDrawLib::Start()->DrawLine(x[7], y[7], x[9], y[9], 2.0f, D3DCOLOR_RGBA(128, 128, 0, 255));
	D3DDrawLib::Start()->DrawLine(x[9], y[9], x[1], y[1], 2.0f, D3DCOLOR_RGBA(0, 128, 128, 255));
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的等边内嵌五边形结构；

20240731104432

绘制方框

方框的绘制有多种类别，通过调用DrawFilledRectangle可实现绘制实体方框，调用DrawBorderRectangle可实现绘制空心方框，调用DrawFourCornersBox可实现绘制四角空心方框，而DrawPerspectiveRect系列则是用于绘制带有进度条的复杂方框结构，其可分为上下左右四种位置展示。

参数说明

DrawFilledRectangle：该函数用于绘制一个填充的实体矩形，其中第1-2个参数用于指定绘制矩形左上角的坐标、第3-4个参数用于指定绘制的矩形宽度与高度、第5个参数用于指定矩形的填充颜色。

int RectWidth = 90;     // 矩形宽度
int RectHeight = 150;   // 矩形高度
int X = 100;            // X坐标
int Y = 200;            // Y坐标

D3DDrawLib::Start()->DrawFilledRectangle(
    X,
    Y,
    RectWidth,
    RectHeight,
    D3DCOLOR_RGBA(254, 0, 0, 184)
);

DrawBorderRectangle：该函数用于绘制一个带有边框的空心矩形，其中第1-2个参数用于指定绘制矩形的左上角X与Y坐标，第3-4个参数用于指定矩形的宽度和高度，第5个参数指定矩形的线条宽度，第6个参数用于指定矩形的填充颜色。

int RectWidth = 90;     // 矩形宽度
int RectHeight = 150;   // 矩形高度
int X = 100;            // X坐标
int Y = 200;            // Y坐标

D3DDrawLib::Start()->DrawBorderRectangle(
    X,
    Y,
    RectWidth,
    RectHeight,
    2,
    D3DCOLOR_RGBA(254, 0, 0, 184)
);

DrawFourCornersBox：该函数用于绘制一个带有四角边框的空心矩形，此外使用DrawCornerFrame函数同样可以达到绘制效果，其中第1-2个参数用于指定绘制矩形的左上角X与Y坐标，第3-4个参数用于指定矩形的宽度和高度，第5个参数指定矩形的线条宽度，第6个参数用于指定矩形的填充颜色。

int RectWidth = 90;     // 矩形宽度
int RectHeight = 150;   // 矩形高度
int X = 100;            // X坐标
int Y = 200;            // Y坐标

D3DDrawLib::Start()->DrawFourCornersBox(
    X,
    Y,
    RectWidth,
    RectHeight,
    2,
    D3DCOLOR_RGBA(254, 0, 0, 184)
);

D3DDrawLib::Start()->DrawCornerFrame(
    X,
    Y,
    RectWidth,
    RectHeight,
    2,
    D3DCOLOR_RGBA(254, 0, 0, 184)
);

DrawPerspectiveRect：该函数系列用于绘制一个带有进度条的复合空心矩形，其主要方向范围包括，left、right、top、bottom等方位，其中第1个参数用于指定需要显示的进度百分比、第2-3个参数用于指定绘制矩形的左上角X与Y坐标、第4-5个参数用于指定矩形的宽度和高度，四种不同的矩形调用如下所示；

// 左侧进度条版矩形
D3DDrawLib::Start()->DrawPerspectiveRectLeft(
    93,
    160,
    200,
    90,
    160
);

// 右侧进度条版矩形
D3DDrawLib::Start()->DrawPerspectiveRectRight(
    65,
    300,
    200,
    60,
    120
);

// 顶部进度条版矩形
D3DDrawLib::Start()->DrawPerspectiveRectTop(
    10,
    450,
    200,
    90,
    160
);

// 底部进度条版矩形
D3DDrawLib::Start()->DrawPerspectiveRectBottom(
    10,
    450,
    200,
    90,
    160
);

调用案例

我们分别使用DrawFilledRectangle、DrawBorderRectangle及DrawFourCornersBox绘制三个不同的方框图形，并让其依次横向排列显示，代码如下所示；

void Draw()
{
	int ScreenWidth = 1024; // 屏幕宽度
	int RectWidth = 90;     // 矩形宽度
	int RectHeight = 150;   // 矩形高度
	int Padding = 20;       // 矩形之间的间距

	// 计算第一个实心矩形的起始位置
	int x1 = (ScreenWidth - RectWidth * 3 - Padding * 2) / 2;
	int y1 = 20;
	D3DDrawLib::Start()->DrawFilledRectangle(
		x1,
		y1,
		RectWidth,
		RectHeight,
		D3DCOLOR_RGBA(254, 0, 0, 184)
	);

	// 计算第二个空心矩形的起始位置
	int x2 = x1 + RectWidth + Padding;
	int y2 = 20;
	D3DDrawLib::Start()->DrawBorderRectangle(
		x2,
		y2,
		RectWidth,
		RectHeight,
		2,
		D3DCOLOR_RGBA(15, 44, 0, 25)
	);

	// 计算第三个角方框的起始位置
	int x3 = x2 + RectWidth + Padding;
	int y3 = 20;
	D3DDrawLib::Start()->DrawFourCornersBox(
		x3,
		y3,
		RectWidth,
		RectHeight,
		2,
		D3DCOLOR_RGBA(254, 0, 0, 25)
	);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的三种矩形结构；

20240731141437

接着我们继续使用DrawPerspectiveRectLeft、DrawPerspectiveRectRight、DrawPerspectiveRectTop、DrawPerspectiveRectBottom来绘制带有进度条显示的复合方框，通过调用这些函数并传入对应的位置及大小即可实现动态绘制，代码如下所示；

void Draw()
{
	// 绘制左侧进度条
	D3DDrawLib::Start()->DrawPerspectiveRectLeft(
		93,
		160,
		200,
		90,
		160
	);
	
	// 绘制顶部进度条
	D3DDrawLib::Start()->DrawPerspectiveRectTop(
		65,
		300,
		200,
		60,
		120
	);

	// 绘制右侧进度条
	D3DDrawLib::Start()->DrawPerspectiveRectRight(
		10,
		450,
		200,
		90,
		160
	);

	// 绘制底部进度条
	D3DDrawLib::Start()->DrawPerspectiveRectBottom(
		45,
		650,
		200,
		90,
		160
	);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的四种矩形结构；

20240731184650

绘制进度条

进度条的绘制同样有多种类别可以选择，若要绘制空心进度框可调用DrawBloodFrame函数，绘制横向进度条可调用DrawBlood_Horizontal函数，绘制竖向进度条可调用DrawBlood_Vertical函数，绘制完整竖向进度条可调用DrawBlood_VerticalNew函数，而完整横向进度条可调用DrawBlood_HorizontalNew函数，绘制简单横向进度条可调用DrawBlood_Transverse函数，相对应的纵向进度条调用DrawLeft_Vertical函数实现。

参数说明

DrawBloodFrame：该函数用于实现绘制空心的进度框，其实也是方框的压缩版，其中第1-2个参数用于指定绘制矩形的左上角X与Y坐标，第3-4个参数用于指定矩形的宽度和高度，第5个参数指定矩形的线条宽度，第6个参数用于指定矩形的填充颜色。

该函数不仅可用于绘制横向进度，通过改变进度条的高度与宽度比例同样可实现绘制竖向进度条，如下将frameHeight与frameWidth参数交换即可实现竖向展示效果。

// 屏幕宽度和高度
int ScreenWidth = 1024;
int ScreenHeight = 768;

// 参数
float frameLeft = (ScreenWidth - 3 * 150) / 2;
float frameTop = 50;
float frameHeight = 20;
float frameWidth = 150;
int lineWidth = 2;

// 绘制横向进度
D3DDrawLib::Start()->DrawBloodFrame(
    frameLeft,
    frameTop,
    frameHeight,
    frameWidth,
    lineWidth,
    D3DCOLOR_RGBA(255, 0, 0, 255)
);

// 绘制竖向进度
D3DDrawLib::Start()->DrawBloodFrame(
    frameLeft,
    frameTop,
    frameWidth,
    frameHeight,
    lineWidth,
    D3DCOLOR_RGBA(255, 0, 0, 255)
);

DrawBlood：该系列函数用于实现绘制横向及竖向进度条，绘制横向进度条可使用DrawBlood_Horizontal函数、而绘制竖向进度条则可使用DrawBlood_Vertical函数，两个函数的参数传递均保持一致，其中第1个参数用于指定进度条百分比，第2-3个参数用于指定绘制矩形的左上角X与Y坐标，第4-5个参数用于指定矩形的宽度和高度，第6个参数用于指定进度条的颜色。

首先以横向进度条为例，调用DrawBlood_Horizontal并传入对应参数即可实现绘制。若要将进度条改为竖向，只需要将width与height参数进行颠倒，并调用DrawBlood_Vertical函数即可实现绘制；

// 屏幕宽度和高度
int ScreenWidth = 1024;
int ScreenHeight = 768;

// 横向进度条的参数
float x = (ScreenWidth - 3 * 150) / 2;
float y = 250;

float hp = 75.0f;
int width = 150;
int height = 20;

// 绘制横向进度条
D3DDrawLib::Start()->DrawBlood_Horizontal(
    hp,
    x,
    y,
    width,
    height,
    D3DCOLOR_RGBA(255, 0, 0, 255)
);

// 绘制竖向进度条
D3DDrawLib::Start()->DrawBlood_Vertical(
    hp,
    x,
    y,
    height,
    height,
    D3DCOLOR_RGBA(255, 0, 0, 255)
);

DrawBloodNew：该系列函数同样用于实现绘制横向及竖向进度条，区别在于该进度条支持从上至下BLOOD_UPTODOWN或从下至上BLOOD_DOWNTOUP的进度增减，要绘制竖向进度条可以使用DrawBlood_VerticalNew函数，而横向则可以使用DrawBlood_HorizontalNew函数，与DrawBlood函数参数一致，唯一的区别在于结尾处可传入类型参数。

#define BLOOD_UPTODOWN 1
#define BLOOD_DOWNTOUP 2

// 屏幕宽度和高度
int ScreenWidth = 1024;
int ScreenHeight = 768;

// 横向进度条的参数
float x = (ScreenWidth - 3 * 150) / 2;
float y = 250;
int width = 150;
int height = 20;

// 绘制横向进度条
D3DDrawLib::Start()->DrawBlood_HorizontalNew(
    50.0f,
    x,
    y,
    width,
    height,
    D3DCOLOR_RGBA(255, 0, 0, 255),
    BLOOD_UPTODOWN
);

DrawTransverse：该系列函数用于绘制基于线条的进度条，若要绘制横向进度条可调用DrawBlood_Transverse函数，绘制竖向进度条则可调用DrawLeft_Vertical函数，两者参数传递保持一致，其中第1个参数用于指定百分比，第2-3个参数用于指定进度条所出现的X,Y坐标位置，第4-5个参数用于指定绘制的高度及宽度，第6个参数用于指定外边框颜色，第7个参数用于指定内部进度条颜色。

// 进度条参数
float x = 100.0f;
float y = 100.0f;
float width = 200.0f;
float height = 20.0f;

D3DCOLOR colorA1 = D3DCOLOR_RGBA(255, 0, 0, 255);  // 红色
D3DCOLOR colorB1 = D3DCOLOR_RGBA(0, 255, 0, 255);  // 绿色

// 开始绘制横向
D3DDrawLib::Start()->DrawBlood_Transverse(
    75.0f,
    x,
    y,
    width,
    height,
    colorA1,
    colorB1
);

// 开始绘制竖向
D3DDrawLib::Start()->DrawLeft_Vertical(
    50.0f,
    x,
    y,
    height,
    width,
    colorA1,
    colorB1
);

DrawCenterBlood：该系列函数用于绘制美观的中心进度条，若要绘制横向进度条可调用DrawHorizontalCenterBlood函数，绘制竖向进度条则可调用DrawVerticalCenterBlood函数，两者参数传递保持一致，其中第1-2个参数用于指定进度条所出现的X,Y坐标位置，第3-4个参数用于指定进度条的高度与宽度，第5个参数用于指定进度条的百分比，第6个参数指定是否为空，默认填0即可。

// 参数
int x = 100;
int y = 90;
int height = 100;
int width = 10;
int hp = 100;
int is_bool = 0;

// 横向进度条
D3DDrawLib::Start()->DrawHorizontalCenterBlood(
    x,
    y,
    height,
    width,
    hp,
    is_bool
);

// 竖向进度条
D3DDrawLib::Start()->DrawVerticalCenterBlood(
    x,
    y,
    height,
    width,
    hp,
    is_bool
);

调用案例

DrawBloodFrame

首先我们使用DrawBloodFrame来绘制横向的空线条框，如下所示代码我们首先定义好绘制位置，并分别设置三种不同的颜色，通过调用三次DrawBloodFrame来实现绘制。

void Draw()
{
	// 屏幕宽度和高度
	int ScreenWidth = 1024;
	int ScreenHeight = 768;

	// 空线条的参数
	float frameLeft = (ScreenWidth - 3 * 150) / 2;
	float frameTop = 50;
	float frameHeight = 20;
	float frameWidth = 150;
	int lineWidth = 2;

	// 绘制空线条，每个使用不同颜色
	D3DCOLOR color1 = D3DCOLOR_RGBA(255, 0, 0, 255);    // 红色
	D3DCOLOR color2 = D3DCOLOR_RGBA(0, 255, 0, 255);    // 绿色
	D3DCOLOR color3 = D3DCOLOR_RGBA(0, 0, 255, 255);    // 蓝色

	// 开始绘制
	D3DDrawLib::Start()->DrawBloodFrame(frameLeft, frameTop, frameHeight, frameWidth, lineWidth, color1);
	D3DDrawLib::Start()->DrawBloodFrame(frameLeft + 170, frameTop, frameHeight, frameWidth, lineWidth, color2);
	D3DDrawLib::Start()->DrawBloodFrame(frameLeft + 340, frameTop, frameHeight, frameWidth, lineWidth, color3);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的空框结构；

20240731182829

当然若要绘制竖向进度框，仅需要调整反转frameHeight与frameWidth即可，其他部分保持不变，代码如下所示；

void Draw()
{
	// 屏幕宽度和高度
	int ScreenWidth = 1024;
	int ScreenHeight = 768;

	// 空线条的参数
	float frameLeft = 50;
	float frameTop = (ScreenHeight - 3 * 150) / 2;
	float frameHeight = 150;
	float frameWidth = 20;
	int lineWidth = 2;

	// 绘制空线条，每个使用不同颜色
	D3DCOLOR color1 = D3DCOLOR_RGBA(255, 0, 0, 255);    // 红色
	D3DCOLOR color2 = D3DCOLOR_RGBA(0, 255, 0, 255);    // 绿色
	D3DCOLOR color3 = D3DCOLOR_RGBA(0, 0, 255, 255);    // 蓝色

	// 开始绘制
	D3DDrawLib::Start()->DrawBloodFrame(frameLeft, frameTop, frameHeight, frameWidth, lineWidth, color1);
	D3DDrawLib::Start()->DrawBloodFrame(frameLeft + 100, frameTop, frameHeight, frameWidth, lineWidth, color2);
	D3DDrawLib::Start()->DrawBloodFrame(frameLeft + 200, frameTop, frameHeight, frameWidth, lineWidth, color3);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的空框结构；

20240731183222

DrawBlood

若要绘制横向进度条，可通过调用DrawBlood_Horizontal函数实现，如下代码将分别绘制三个横向进度条。

void Draw()
{
	// 屏幕宽度和高度
	int ScreenWidth = 1024;
	int ScreenHeight = 768;

	// 横向进度条的参数
	float x = (ScreenWidth - 3 * 150) / 2;
	float y = 250;
	int width = 150;
	int height = 20;

	// 绘制横向进度条，每个使用不同颜色
	D3DCOLOR color1 = D3DCOLOR_RGBA(255, 0, 0, 255);    // 红色
	D3DCOLOR color2 = D3DCOLOR_RGBA(0, 255, 0, 255);    // 绿色
	D3DCOLOR color3 = D3DCOLOR_RGBA(0, 0, 255, 255);    // 蓝色

	D3DDrawLib::Start()->DrawBlood_Horizontal(50.0f, x, y, width, height, color1);
	D3DDrawLib::Start()->DrawBlood_Horizontal(75.0f, x + 170, y, width, height, color2);
	D3DDrawLib::Start()->DrawBlood_Horizontal(25.0f, x + 340, y, width, height, color3);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的进度条结构；

20240731184143

若要绘制竖向进度条，只需要调用DrawBlood_Vertical函数实现，如下代码将分别绘制三个竖向进度条。

void Draw()
{
	float hp = 75.0f;
	float x = 100.0f;
	float y = 100.0f;
	int width = 20;
	int height = 100;

	D3DCOLOR fullHealthColor = D3DCOLOR_RGBA(0, 255, 0, 255);  // 绿色
	D3DCOLOR midHealthColor = D3DCOLOR_RGBA(255, 255, 0, 255); // 黄色
	D3DCOLOR lowHealthColor = D3DCOLOR_RGBA(255, 0, 0, 255);   // 红色

	D3DCOLOR color;
	if (hp >= 75.0f)
	{
		color = fullHealthColor;
	}
	else if (hp >= 35.0f)
	{
		color = midHealthColor;
	}
	else
	{
		color = lowHealthColor;
	}

	// 开始绘制
	D3DDrawLib::Start()->DrawBlood_Vertical(hp, x, y, width, height, color);
	D3DDrawLib::Start()->DrawBlood_Vertical(hp, x + 100, y, width, height, midHealthColor);
	D3DDrawLib::Start()->DrawBlood_Vertical(hp, x + 200, y, width, height, lowHealthColor);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的进度条结构；

20240731184545

DrawBloodNew

该函数是DrawBlood系列的加强版，可用于指定进度条由上到下还是由下到上，使用DrawBlood_VerticalNew可绘制完整竖向进度条，使用DrawBlood_HorizontalNew则可用于绘制完整横向进度条。

如下将通过调用DrawBlood_VerticalNew分别绘制三个不同颜色的竖向进度条案例；

void Draw()
{
	// 屏幕宽度和高度
	int ScreenWidth = 1024;
	int ScreenHeight = 768;

	// 竖向进度条的参数
	float x = (ScreenWidth - 3 * 20) / 2;
	float y = 100;
	int width = 20;
	int height = 150;

	// 绘制竖向进度条，每个使用不同颜色和样式
	D3DCOLOR color1 = D3DCOLOR_RGBA(255, 0, 0, 255);    // 红色
	D3DCOLOR color2 = D3DCOLOR_RGBA(0, 255, 0, 255);    // 绿色

#define BLOOD_UPTODOWN 1
#define BLOOD_DOWNTOUP 2

	D3DDrawLib::Start()->DrawBlood_VerticalNew(50.0f, x, y, width, height, color1, BLOOD_UPTODOWN);
	D3DDrawLib::Start()->DrawBlood_VerticalNew(75.0f, x + 30, y, width, height, color2, BLOOD_UPTODOWN);
	D3DDrawLib::Start()->DrawBlood_VerticalNew(90.0f, x + 60, y, width, height, color2, BLOOD_DOWNTOUP);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的进度条结构；

20240731185310

若要绘制横向进度条则仅需调用DrawBlood_HorizontalNew来实现进度条的绘制，代码如下所示；

void Draw()
{
	// 屏幕宽度和高度
	int ScreenWidth = 1024;
	int ScreenHeight = 768;

	// 横向进度条的参数
	float x = (ScreenWidth - 3 * 150) / 2;
	float y = 250;
	int width = 150;
	int height = 20;

	// 绘制横向进度条，每个使用不同颜色和样式
	D3DCOLOR color1 = D3DCOLOR_RGBA(255, 0, 0, 255);    // 红色
	D3DCOLOR color2 = D3DCOLOR_RGBA(0, 255, 0, 255);    // 绿色

#define BLOOD_UPTODOWN 1
#define BLOOD_DOWNTOUP 2

	D3DDrawLib::Start()->DrawBlood_HorizontalNew(50.0f, x, y, width, height, color1, BLOOD_UPTODOWN);
	D3DDrawLib::Start()->DrawBlood_HorizontalNew(75.0f, x + 90, y, width, height, color2, BLOOD_UPTODOWN);
	D3DDrawLib::Start()->DrawBlood_HorizontalNew(25.0f, x + 180, y, width, height, color2, BLOOD_DOWNTOUP);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的进度条结构；

20240731185642

DrawTransverse

用于绘制结构化进度条，绘制横向进度条可调用DrawBlood_Transverse实现，绘制竖向则可调用DrawLeft_Vertical实现，首先绘制三个横向进度条，代码如下所示；

void Draw()
{
	// 屏幕宽度和高度
	int ScreenWidth = 1024;
	int ScreenHeight = 768;

	// 横向进度条参数
	float y = 100.0f;
	float height = 20.0f;
	float spacing = 30.0f;  // 每个进度条的间距

	// 第一个进度条
	float x1 = 100.0f;
	float width1 = 200.0f;
	D3DCOLOR colorA1 = D3DCOLOR_RGBA(255, 0, 0, 255);  // 红色
	D3DCOLOR colorB1 = D3DCOLOR_RGBA(0, 255, 0, 255);  // 绿色
	D3DDrawLib::Start()->DrawBlood_Transverse(75.0f, x1, y, width1, height, colorA1, colorB1);

	// 第二个进度条
	float x2 = 100.0f + width1 + spacing;
	float width2 = 150.0f;
	D3DCOLOR colorA2 = D3DCOLOR_RGBA(0, 0, 255, 255);  // 蓝色
	D3DCOLOR colorB2 = D3DCOLOR_RGBA(255, 255, 0, 255);  // 黄色
	D3DDrawLib::Start()->DrawBlood_Transverse(50.0f, x2, y, width2, height, colorA2, colorB2);

	// 第三个进度条
	float x3 = 100.0f + width1 + width2 + 2 * spacing;
	float width3 = 180.0f;
	D3DCOLOR colorA3 = D3DCOLOR_RGBA(255, 255, 0, 255);  // 黄色
	D3DCOLOR colorB3 = D3DCOLOR_RGBA(255, 0, 255, 255);  // 紫色
	D3DDrawLib::Start()->DrawBlood_Transverse(85.0f, x3, y, width3, height, colorA3, colorB3);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的进度条结构；

20240731190228

若绘制竖向仅需调整绘制函数为DrawLeft_Vertical即可，代码如下所示；

void Draw()
{
	// 屏幕宽度和高度
	int ScreenWidth = 1024;
	int ScreenHeight = 768;

	// 竖向进度条参数
	float x = 300.0f;
	float width = 20.0f;
	float spacing = 30.0f;  // 每个进度条的间距

	// 第一个进度条
	float y1 = 100.0f;
	float height1 = 200.0f;
	D3DCOLOR colorA1 = D3DCOLOR_RGBA(255, 0, 0, 255);  // 红色
	D3DCOLOR colorB1 = D3DCOLOR_RGBA(0, 255, 0, 255);  // 绿色
	D3DDrawLib::Start()->DrawLeft_Vertical(50.0f, x, y1, width, height1, colorA1, colorB1);

	// 第二个进度条
	float y2 = 100;
	float height2 = 150.0f;
	D3DCOLOR colorA2 = D3DCOLOR_RGBA(0, 0, 255, 255);  // 蓝色
	D3DCOLOR colorB2 = D3DCOLOR_RGBA(255, 255, 0, 255);  // 黄色
	D3DDrawLib::Start()->DrawLeft_Vertical(75.0f, x+100, y1, width, height2, colorA2, colorB2);

	// 第三个进度条
	float y3 = 200;
	float height3 = 180.0f;
	D3DCOLOR colorA3 = D3DCOLOR_RGBA(255, 255, 0, 255);  // 黄色
	D3DCOLOR colorB3 = D3DCOLOR_RGBA(255, 0, 255, 255);  // 紫色
	D3DDrawLib::Start()->DrawLeft_Vertical(85.0f, x+200, y1, width, height3, colorA3, colorB3);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的进度条结构；

20240731190606

DrawCenterBlood

该函数用于绘制中心进度条，中心进度条是经过美化的进度条，通过DrawHorizontalCenterBlood来绘制横向进度，通过DrawVerticalCenterBlood则是绘制纵向进度，如下代码所示；

void Draw()
{
	// 横向
	D3DDrawLib::Start()->DrawHorizontalCenterBlood(100, 200, 100, 10, 100, 0);  //  100%，中心在 (100, 200)，宽度 100
	D3DDrawLib::Start()->DrawHorizontalCenterBlood(200, 200, 50, 10, 50, 0);   //  50%，中心在 (200, 200)，宽度 50
	D3DDrawLib::Start()->DrawHorizontalCenterBlood(300, 200, 25, 10, 15, 0);   //  15%，中心在 (300, 200)，宽度 25

	// 竖向
	D3DDrawLib::Start()->DrawVerticalCenterBlood(100, 90, 100, 10, 100, false);
	D3DDrawLib::Start()->DrawVerticalCenterBlood(200, 90, 100, 10, 50, false);
	D3DDrawLib::Start()->DrawVerticalCenterBlood(300, 90, 100, 10, 25, false);
}

运行这段代码，则可实现在特定窗体之上绘制如下所示的进度条结构；

20240731190930

绘制其他

描边文本绘制

对于文本的绘制提供了四个函数可以使用，普通文本绘制可通过调用DrawString来实现，描边文本则可通过DrawColourStringA来实现绘制，多重文本的绘制使用DrawStringAndString或DrawStringAndStringEx来实现绘制，由于文本绘制较为简单，读者可自行调整学习。

void Draw()
{
	char szBuf[256] = { 0 };
	strcpy(szBuf, "hello lyshark");

	// 普通文本
	D3DDrawLib::Start()->DrawString(szBuf, 25, 10, 20, D3DCOLOR_RGBA(255, 0, 0, 255));

	// 描边文本
	D3DDrawLib::Start()->DrawColourStringA(szBuf, 30, 20, 40, D3DCOLOR_RGBA(255, 0, 0, 255), D3DCOLOR_RGBA(5, 0, 0, 2));

	// 多重文本
	D3DDrawLib::Start()->DrawStringAndString(szBuf, szBuf, 30, 25, 50, 100, D3DCOLOR_RGBA(255, 0, 0, 255), D3DCOLOR_RGBA(5, 0, 0, 2));

	D3DDrawLib::Start()->DrawStringAndStringEx(szBuf, szBuf, 30, 25, 70, 150, D3DCOLOR_RGBA(255, 0, 0, 255), D3DCOLOR_RGBA(5, 0, 0, 2));
}

运行这段代码，则可实现在特定窗体之上绘制如下所示提示文本结构；

20240731191436

警告：本篇文章中所涉及的内容，仅用于技术交流与研究之用，仅允许被用于正规用途，请勿滥用。

附件下载

静态库：D3DDrawLib.zip
源代码：LyDrawLib.zip
版权登记号：2024SR1315376