EggUI元素——完全自绘按钮

本片文章仅讲述按钮的绘制，背景和图标的绘制，并不涉及消息处理。

在MFC程序中添加一个函数

void CDirectUI_Buttom_DemoDlg::FillRoundRectangle(Graphics *g,int x,int y,int width,int height,int round,Color color)
{
//处理代码
}

//代码处理：

1、背景画刷

	SolidBrush bkBrush(color);
	Brush *brush=(Brush*)&bkBrush;					
	g->SetSmoothingMode(SmoothingModeAntiAlias);		//消去画线锯齿

2，边框颜色

	Pen* myPen;
	myPen = new Pen(Color(255, 172, 172, 172), 1);

3，按钮区域路径

	GraphicsPath ellipsePath;
	ellipsePath.AddArc(x, y, round*2, round*2,180,90);
	ellipsePath.AddArc(x+width-2*round,y,round*2,round*2,270,90);
	ellipsePath.AddArc(x+width-round*2, y+height-round*2, round*2, round*2,0,90);
	ellipsePath.AddArc(x,y+height-round*2,round*2,round*2,90,90);

4，将绘制的路径转换为区域

	Region m_region(&ellipsePath);

5.1，背景纯色

	G-> FillRegion（bkBrush，&m_region）;   

5.2,3D渐变背景色

	//区域渐变画刷
	Rect myRect(x,y,width,height);
	LinearGradientBrush myLinearGradientBrush(
		myRect,
		Color(255,255,255,255),
		Color(255,110,190,30),
		LinearGradientModeVertical);
	//绘制渐变背景
	g->FillRegion(&myLinearGradientBrush,&m_region);

6，按钮图标

	Image image(L".//res//favicon.ico");
	g->DrawImage(&image, x+4,y+4, height-2*4,height-2*4);//图标在左边

7，绘制边框颜色

	g->DrawLine(myPen,x+round,y,x+width-round,y);	//上
	g->DrawArc(myPen,x,y,round*2,round*2,179,92);		//左上

	g->DrawLine(myPen,x,y+round,x,y+height-round);				//左
	g->DrawArc(myPen,x+width-round*2,y,round*2,round*2,269,92);	//右上

	g->DrawLine(myPen,x+width,y+round,x+width,y+height-round);		//右
	g->DrawArc(myPen,x,y+height-round*2,round*2,round*2,89,92);		//左下

	g->DrawLine(myPen,x+round,y+height,x+width-round,y+height);					//下
	g->DrawArc(myPen,x+width-round*2,y+height-round*2,round*2,round*2,359,92);		//右下	

完整代码部分

void CDirectUI_Buttom_DemoDlg::FillRoundRectangle(Graphics *g,int x,int y,int width,int height,int round,Color color)
{
	SolidBrush bkBrush(color);
	Brush *brush=(Brush*)&bkBrush;					
	g->SetSmoothingMode(SmoothingModeAntiAlias);		//消去画线锯齿
	Pen* myPen;
	myPen = new Pen(Color(255, 172, 172, 172), 1);

	GraphicsPath ellipsePath;
	ellipsePath.AddArc(x, y, round*2, round*2,180,90);
	ellipsePath.AddArc(x+width-2*round,y,round*2,round*2,270,90);
	ellipsePath.AddArc(x+width-round*2, y+height-round*2, round*2, round*2,0,90);
	ellipsePath.AddArc(x,y+height-round*2,round*2,round*2,90,90);

	//ellipsePath.AddLine(x, y+2*round, x, y+height-2*round);
	//ellipsePath.AddLine(x+round*2, y, x+width-round*2, y);
	//ellipsePath.AddLine(x+width, y+2*round, x+width, y+height-2*round);
	//ellipsePath.AddLine(x+round*2, y+height, x+width-round*2, y+height);

	// 路径渐变画刷
	// 	PathGradientBrush myLinearGradientBrush(&ellipsePath);
	// 	myLinearGradientBrush.SetGammaCorrection(TRUE);
	// 	myLinearGradientBrush.SetCenterPoint(Point(66,28));
	// 	myLinearGradientBrush.SetCenterColor(color);
	// 	int idmas;
	// 	myLinearGradientBrush.SetSurroundColors(&color,&idmas);
	// 	g->FillPath(&myLinearGradientBrush,&ellipsePath);

	//将绘制的路径转换为区域
	Region m_region(&ellipsePath);
	//其中的颜色为背景颜色
	//g->FillRegion(&SolidBrush(Color(255,110,190,30)),&m_region);   

	//区域渐变画刷
	Rect myRect(x,y,width,height);
	LinearGradientBrush myLinearGradientBrush(
		myRect,
		Color(255,255,255,255),
		Color(255,110,190,30),
		LinearGradientModeVertical);
	//绘制渐变背景
	g->FillRegion(&myLinearGradientBrush,&m_region);	

	//图标
	Image image(L".//res//favicon.ico");
	g->DrawImage(&image, x+4,y+4, height-2*4,height-2*4);//图标在左边

	//画区域边框线
	//myPen->SetAlignment(PenAlignmentInset)				//线条分布设置

	g->DrawLine(myPen,x+round,y,x+width-round,y);	//上
	g->DrawArc(myPen,x,y,round*2,round*2,179,92);		//左上

	g->DrawLine(myPen,x,y+round,x,y+height-round);				//左
	g->DrawArc(myPen,x+width-round*2,y,round*2,round*2,269,92);	//右上

	g->DrawLine(myPen,x+width,y+round,x+width,y+height-round);		//右
	g->DrawArc(myPen,x,y+height-round*2,round*2,round*2,89,92);		//左下

	g->DrawLine(myPen,x+round,y+height,x+width-round,y+height);					//下
	g->DrawArc(myPen,x+width-round*2,y+height-round*2,round*2,round*2,359,92);		//右下	

	delete myPen;
}

效果预览