C++EasyX封装可点击音乐播放按钮详解

设计思路与准备工作

在控制台程序基础上开发带有图形界面的应用，首先需要引入EasyX图形库并配置相应的编译环境。本例旨在实现一个具备基础UI交互的逻辑闭环：通过创建一个通用的 Button 类来管理按钮的坐标、尺寸、颜色及文字，并通过重写或重载的方法来处理鼠标的 x, y 坐标消息，最终在 `main` 循环中结合Windows的多媒体控制接口(MCI)驱动背景音乐。

准备条件：

• 安装并配置好 EasyX 图形库（通常配合 Visual Studio 使用）。
• 准备一张背景图片（如 mm.jpg）用于展示界面效果。
• 准备一首MP3格式的音乐文件（如 1.mp3）。

第1步：定义按钮类的数据与接口

首先新建头文件 button.h，用于声明类属性和公有方法。将坐标(x, y)、宽高(w, h)、当前颜色与原始颜色、以及显示的文字定义为私有成员，以限制外部直接访问数据，保证封装性。

#include "graphics.h"
#include <iostream>
#include <string>
using namespace std;

class Button
{
public:
	void Show();				 // 负责绘制按钮
	void InitButton(int xx, int yy, int ww, int hh, COLORREF color, string text);
	bool InButton(ExMessage message);	// 判断鼠标是否在按钮区域内
	bool OnClickButton(ExMessage message);	// 判断是否触发点击
private:
	int x;
	int y;
	int w;
	int h;
	COLORREF curColor;
	COLORREF oldColor;
	string str;
};

第2步：实现按钮的参数初始化

在源文件 button.cpp 中编写函数的具体逻辑。初始化函数接收传入的位置和样式信息，为后续绘图做准备。

void Button::InitButton(int xx, int yy, int ww, int hh, COLORREF color, string text)
{
    x = xx;
    y = yy;
    w = ww;
    h = hh;
    curColor = color;
    oldColor = color;
    str = text;
}

第3步：实现矩形绘制与文字居中计算

绘制是UI表现的核心。为了美观，我们需要让文字在矩形内水平垂直居中。这涉及计算文字区域的外框偏移量。

void Button::Show()
{
    // 绘制填充颜色的矩形边框
    setfillcolor(curColor);
    solidrectangle(x, y, x + w, y + h);
    
    // 设置字体样式（这里演示使用本地字体）
    settextstyle(15, 0, "FZZJ-XHFTJW.TTF");
    
    // 1.获取文字的宽度和高度
    int textw = textwidth(str.c_str());
    int texth = textheight(str.c_str());
    
    // 2.计算文字需要偏离左上角的距离 (使文字居中)
    int offset_x = (w - textw) / 2;
    int offset_y = (h - texth) / 2;
    
    // 3.计算文字输出的左上角实际坐标
    int xx = x + offset_x;
    int yy = y + offset_y;
    
    // 4.输出文字内容
    setbkmode(TRANSPARENT);
    settextcolor(BLACK);
    outtextxy(xx, yy, str.c_str());
}

如图所示，要实现文字居中，核心在于计算出 offset_x 和 offset_y，即矩形边缘与文字边缘的空隙相等时，视觉上即达到完美的居中效果。

第4步：实现鼠标交互检测

为了让按钮“活”起来，需要处理两个状态：鼠标悬停改变外观、鼠标按下执行动作。

判断坐标范围：

bool Button::InButton(ExMessage message)
{
    // 判断鼠标坐标是否在定义的矩形范围内
    if (message.x >= x && message.x <= x + w && message.y >= y && message.y <= y + h) 
    {
        curColor = RGB(236, 244, 255); // 悬停时改变颜色（浅蓝色）
        return true;
    }
    curColor = oldColor; // 移出按钮恢复原色
    return false;
}

判断点击事件：

bool Button::OnClickButton(ExMessage m)
{
    // 既要在按钮范围内，又要是左键按下事件
    if (InButton(m) && m.message == WM_LBUTTONDOWN) 
    {
        return true;
    }
    return false;
}

第5步：主程序集成与多媒体控制

在 main 函数中创建图形窗口，实例化按钮对象，并通过轮询消息队列来实现实时交互。同时利用 mciSendString 发送指令给系统播放音频。

#include "button.h"
#include <mmsystem.h>
#pragma comment(lib,"winmm.lib")

int main() 
{
	initgraph(800, 600);
	IMAGE mm;
	loadimage(&mm, "mm.jpg",800,600);
	
	// 实例化四个不同功能的按钮
	Button* play = new Button;
	play->InitButton(5, 5, 100, 25, RGB(204, 213, 240), "播放(play)");
	
	Button* pause = new Button;
	pause->InitButton(110, 5, 100, 25, RGB(204, 213, 240), "暂停(pause)");
	
	Button* resume = new Button;
	resume->InitButton(215, 5, 100, 25, RGB(204, 213, 240), "继续(resume)");
	
	Button* stop = new Button;
	stop->InitButton(320, 5, 100, 25, RGB(204, 213, 240), "停止(stop)");
	
	ExMessage m;
	BeginBatchDraw();
	while (1) 
	{
		putimage(0, 0, &mm);
		peekmessage(&m); // 非阻塞方式获取消息
		
		// 播放按钮逻辑
		play->Show();
		if (play->OnClickButton(m)) 
		{
			mciSendString("open 1.mp3", 0, 0, 0);
			mciSendString("play 1.mp3", 0, 0, 0);
		}
		
		// 暂停按钮逻辑
		pause->Show();
		if (pause->OnClickButton(m)) 
		{
			mciSendString("pause 1.mp3", 0, 0, 0);
		}
		
		// 继续播放逻辑
		resume->Show();
		if (resume->OnClickButton(m))
		{
			mciSendString("resume 1.mp3", 0, 0, 0);
		}
		
		// 停止逻辑
		stop->Show();
		if (stop->OnClickButton(m))
		{
			mciSendString("close 1.mp3", 0, 0, 0);
		}
		
		FlushBatchDraw();
	}
	EndBatchDraw();
	closegraph();
	return 0;
}

运行上述程序后，界面将呈现设定好的背景图，顶部排列着四个自定义样式的按钮。当鼠标移动到按钮上时会变色，点击对应按钮即可控制指定的MP3文件播放、暂停、继续或关闭。以上就是C++基于EasyX封装可点击音乐播放按钮的详细内容，更多关于C++图形界面设计与多媒体编程的资料请关注本站其它相关文章！