GDI+绘制圆角矩形

1、最近,用到GDI+绘图,但是发现没有绘制圆角矩形的函数,故自己写了一个。下面贴出原理和代码,以作备份。


2、要绘制圆角矩形,基础是普通的直角矩形,需要做的就是将直角画成弧形。


3、绘制圆角矩形可以由两个部分组成:第一部分是绘制四个圆角(左上、右上、右下、左下);第二部分是用直线连接四个圆角。


4、绘制第一部分用到Graphics.DrawArc 方法:

本例用到的是下面这个重载函数:

Graphics.DrawArc 方法 (Pen, Single, Single, Single, Single, Single, Single)

定义如下:

public:
void DrawArc(
	Pen^ pen, 
	float x, 
	float y, 
	float width, 
	float height, 
	float startAngle, 
	float sweepAngle
)
参数说明:

参数
pen
Pen,它确定弧线的颜色、宽度和样式。
x
定义椭圆的矩形的左上角的 x 坐标。
y
定义椭圆的矩形的左上角的 y 坐标。
width
定义椭圆的矩形的宽度。
height
定义椭圆的矩形的高度。
startAngle
从 x 轴到弧线的起始点沿顺时针方向度量的角(以度为单位)。
sweepAngle
从 startAngle 参数到弧线的结束点沿顺时针方向度量的角(以度为单位)。



5、第二部分用到Graphics.DrawLine 方法:

本例用到的是下面这个重载函数:

Graphics.DrawLine 方法 (Pen, Single, Single, Single, Single)

定义如下:

public:
void DrawLine (
	Pen^ pen, 
	float x1, 
	float y1, 
	float x2, 
	float y2
)
参数说明:

参数
pen
Pen,它确定线条的颜色、宽度和样式。
x1
第一个点的 x 坐标。
y1
第一个点的 y 坐标。
x2
第二个点的 x 坐标。
y2
第二个点的 y 坐标。


6、具体绘制,先看一张图:



说明:

首先,大矩形即是我们要画的矩形(图中是直角的,要将其画成圆角),大矩形的4个角上各有一个小矩形,这4个小矩形即是用来画圆角的。


其次,用DrawArc画圆角,因为矩形相邻两边是垂直的,所以绘制的圆弧必须是90度的,也就是参数sweepAngle必须是90度


再次,图中标出的4个红点的坐标即是DrawArc函数定义椭圆的矩形的左上角的坐标。


由上可知,绘制圆角矩形需要几个值:

一是矩形左上角的坐标,即图中的(x,y);

二是4个红点的坐标。

三是蓝点的坐标(用于画连接圆角的直线,即矩形的边)。


7、具体代码:

函数声明:

//
	//------------------------------------ 绘制圆角矩形-------------------------------
	// 作者:Kaven
	// 创建时间:2014.07.08
	// 参数:
	//     pDC:     设备环境
	//     x:        矩形的起点横坐标(即矩形左上角的横坐标x)
	//     y:        矩形的起点纵坐标(即矩形左上角的纵坐标y)
	//     Width:   矩形的宽度(halfWidth表示矩形宽度的一半)
	//     Height:  矩形的高度(halfHeight表示矩形高度的一半)
	//     arcSize:  调整圆角的弧度(0时弧度最大,为椭圆)
	//     lineColor:线条颜色
	//     lineWidth:线条宽度
	/
	void DrawRoundRectange(CDC* pDC, float x, float y, float Width, float Height, float arcSize, Color lineColor, float lineWidth);

函数定义:

// 绘制圆角矩形
void DrawRoundRectange(CDC* pDC, float x, float y, float Width, float Height, float arcSize, Color lineColor, float lineWidth)
{
	// 圆角矩形的半宽(hew)和半高(heh)
	float hew = Width/arcSize/2;
	float heh = Height/arcSize/2;

	// 圆角修正
	if(fabs(hew-heh)>10)
	{
		hew = heh = hew>heh ? heh : hew;
	}

	// 边线修正
	int lineMove = 1;

	// 创建GDI+对象
	Graphics  g(pDC->GetSafeHdc());

	//设置画图时的滤波模式为消除锯齿现象
	g.SetSmoothingMode(Gdiplus::SmoothingModeHighQuality);

	//创建画笔
	Pen pen(lineColor, lineWidth);


	//
	// 画圆角
	//
	// 画左上圆角
	g.DrawArc(&pen, x, y, 2*hew, 2*heh, 180, 90);
	// 画右上圆角
	g.DrawArc(&pen, x+Width-2*hew, y, 2*hew, 2*heh, 270, 90);
	// 画右下圆角
	g.DrawArc(&pen, x+Width-2*hew, y+Height-2*heh, 2*hew, 2*heh, 0, 90);
	// 画左下圆角
	g.DrawArc(&pen, x, y+Height-2*heh, 2*hew, 2*heh, 90, 90);

	//
	// 画直线(连接4个圆角)
	//
	// 画顶部横线
	g.DrawLine(&pen, x+hew-lineMove, y, x+Width-hew+lineMove, y);
	// 画右侧竖线
	g.DrawLine(&pen, x+Width, y+heh-lineMove, x+Width, y+Height-heh+lineMove);
	// 画底部横线
	g.DrawLine(&pen, x+Width-hew+lineMove, y+Height, x+hew-lineMove, y+Height);
	// 画左侧竖线
	g.DrawLine(&pen, x, y+Height-heh+lineMove, x, y+heh-lineMove);
}



调用示例:

CDC *pDC = GetWindowDC();

DrawRoundRectange(pDC, 10, 100, 348, 60, 2, Color(255,0,0,0), 14);
DrawRoundRectange(pDC,100.2, 40.5, 45.4, 22.8, 6.34, Color(255,255,0,0), 2);
DrawRoundRectange(pDC, 35, 250, 60, 60, 2, Color(255,0,0,0), 4);
DrawRoundRectange(pDC, 400, 50, 60, 260, 2, Color(255,0,0,0), 3);

ReleaseDC(pDC);


结果:




最后,实例代码:http://download.csdn.net/detail/wwkaven/7609287

另外,GDI+的使用参阅:http://blog.csdn.net/wwkaven/article/details/37507209



注意:追加内容:

优化上述函数:

声明:

        //
	//------------------------------------ 绘制圆角矩形-------------------------------
	// 作者:Kaven
	// 创建时间:2014.07.08
	// 参数:
	//     pDC:      设备环境
	//     x:         矩形的起点横坐标(即矩形左上角的横坐标x)
	//     y:         矩形的起点纵坐标(即矩形左上角的纵坐标y)
	//     Width:    矩形的宽度(halfWidth表示矩形宽度的一半)
	//     Height:   矩形的高度(halfHeight表示矩形高度的一半)
	//     arcSize:   调整圆角的弧度(0时弧度最大,为椭圆)
	//     lineColor: 线条颜色
	//     lineWidth:线条宽度
	//     fillPath; 是否填充
	//     fillColor:填充颜色
	/
	void DrawRoundRectange(CDC* pDC, float x, float y, float Width, float Height, float arcSize, Color lineColor, float lineWidth, bool fillPath, Color fillColor);




定义:

// 绘制及填充圆角矩形
void DrawRoundRectange(CDC* pDC, float x, float y, float Width, float Height, float arcSize, Color lineColor, float lineWidth, bool fillPath, Color fillColor)
{
	// 小矩形的半宽(hew)和半高(heh)
	float hew = Width/arcSize/2;
	float heh = Height/arcSize/2;

	// 圆角修正
	if(fabs(hew-heh)>10)
	{
		hew = heh = hew>heh ? heh : hew;
	}

	// 创建GDI+对象
	Graphics  g(pDC->GetSafeHdc());

	//设置画图时的滤波模式为消除锯齿现象
	g.SetSmoothingMode(Gdiplus::SmoothingModeHighQuality);


	// 绘图路径
	GraphicsPath roundRectPath;

	// 保存绘图路径
	roundRectPath.AddLine(x+hew, y, x+Width-hew, y);  // 顶部横线
	roundRectPath.AddArc(x+Width-2*hew, y, 2*hew, 2*heh, 270, 90); // 右上圆角

	roundRectPath.AddLine(x+Width, y+heh, x+Width, y+Height-heh);  // 右侧竖线
	roundRectPath.AddArc(x+Width-2*hew, y+Height-2*heh, 2*hew, 2*heh, 0, 90); // 右下圆角

	roundRectPath.AddLine(x+Width-hew, y+Height, x+hew, y+Height);  // 底部横线
	roundRectPath.AddArc(x, y+Height-2*heh, 2*hew, 2*heh, 90, 90); // 左下圆角

	roundRectPath.AddLine(x, y+Height-heh, x, y+heh);  // 左侧竖线
	roundRectPath.AddArc(x, y, 2*hew, 2*heh, 180, 90); // 左上圆角

	//创建画笔
	Pen pen(lineColor, lineWidth);

	// 绘制矩形
	g.DrawPath(&pen, &roundRectPath);

	// 是否填充
	if(!fillPath)
	{
		return;
	}
	else if(fillColor.GetAlpha() == 0)
	{
		fillColor = lineColor; // 若未指定填充色,则用线条色填充
	}

	// 创建画刷
	SolidBrush brush(fillColor);

	// 填充
	g.FillPath(&brush, &roundRectPath);
}


调用示例:

DrawRoundRectange(pDC, 10, 100, 348, 60, 2, Color(255,0,0,0), 14, true , Color(255,255,255,0));
 		DrawRoundRectange(pDC, 10, 200, 348, 60, 4, Color(255,0,0,0), 4, true , Color(255,0,0,0));
 		DrawRoundRectange(pDC, 10.2, 40.5, 145.4, 22.8, 2.34, Color(255,255,0,0), 2, true, NULL);
		DrawRoundRectange(pDC, 210.2, 40.5, 145.4, 22.8, 2.34, Color(255,255,0,0), 2, true, Color(255,255,182,0));

结果:



完整示例工程:http://download.csdn.net/detail/wwkaven/7610005



  • 5
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
一、创建窗口         * zc窗口类         * 窗口消息循环         * 窗口消息过程         * 窗口界面绘画         * 窗口随意移动         * 绑定鼠标事件         * 窗口阴影效果 -支持圆角矩形阴影效果 二、创建控件         * 绑定鼠标事件         * 控件层级绘画         * 控件区域焦点         * 控件风格定义 三、控件属性         * 左边         * 顶边         * 宽度         * 高度         * 边框         * 标题         * 标记         * 可视         * 动画 -Gif图片         * 图形 -控件图形样式:正常、点燃、按下、禁止         * 色彩 -控件色彩样式:正常、点燃、按下、禁止         * 字体         * 圆角         * 样式 -可扩增控件样式,定义样式风格         * 绑定 -即绑定鼠标事 四、事件特性         * 控件和窗口用类事件来绑定接收鼠标(点击、放开、进入、离开);支持一个事件类绑定所有控件和窗口         * 每个事件消息都有对应的控件对象句柄。便于读写相关更高级操作。 五、简要说明 MyEvent 用于创建完成后的控件事件绑定使用 hwEvent 是提供给创建控件成功后 作为基类创建控件事件使用 如同(MyEvent) 控件事件,支持,一个空间一个类事件,也可以所有空间共用一个类事件 HwControl类 是通用的控件类。也可以自行扩展更多功能 自绘这方面还是颇有心得;若爱自绘易友们可以一起研究共同进步。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值