GDI+绘制圆角矩形
2014-07-08 23:05
549 查看
1、最近,用到GDI+绘图,但是发现没有绘制圆角矩形的函数,故自己写了一个。下面贴出原理和代码,以作备份。
2、要绘制圆角矩形,基础是普通的直角矩形,需要做的就是将直角画成弧形。
3、绘制圆角矩形可以由两个部分组成:第一部分是绘制四个圆角(左上、右上、右下、左下);第二部分是用直线连接四个圆角。
4、绘制第一部分用到Graphics.DrawArc 方法:
本例用到的是下面这个重载函数:
Graphics.DrawArc 方法 (Pen, Single, Single, Single, Single, Single, Single)
定义如下:
5、第二部分用到Graphics.DrawLine 方法:
本例用到的是下面这个重载函数:
Graphics.DrawLine 方法 (Pen, Single, Single, Single, Single)
定义如下:
6、具体绘制,先看一张图:
![](http://img.blog.csdn.net/20140708221948600?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3drYXZlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
说明:
首先,大矩形即是我们要画的矩形(图中是直角的,要将其画成圆角),大矩形的4个角上各有一个小矩形,这4个小矩形即是用来画圆角的。
其次,用DrawArc画圆角,因为矩形相邻两边是垂直的,所以绘制的圆弧必须是90度的,也就是参数sweepAngle必须是90度。
再次,图中标出的4个红点的坐标即是DrawArc函数定义的椭圆的矩形的左上角的坐标。
由上可知,绘制圆角矩形需要几个值:
一是矩形左上角的坐标,即图中的(x,y);
二是4个红点的坐标。
三是蓝点的坐标(用于画连接圆角的直线,即矩形的边)。
7、具体代码:
函数声明:
函数定义:
调用示例:
结果:
![](http://img.blog.csdn.net/20140708225638468?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3drYXZlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
最后,实例代码:http://download.csdn.net/detail/wwkaven/7609287
另外,GDI+的使用参阅:/article/8153637.html
注意:追加内容:
优化上述函数:
声明:
定义:
调用示例:
结果:
![](http://img.blog.csdn.net/20140709093529623?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvd3drYXZlbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
完整示例工程:http://download.csdn.net/detail/wwkaven/7610005
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+的使用参阅:/article/8153637.html
注意:追加内容:
优化上述函数:
声明:
////////////////////////////////////////////////////////////////////////////////// //------------------------------------ 绘制圆角矩形------------------------------- // 作者: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
相关文章推荐
- C# GDI+ 绘制圆角实心矩形
- GDI+绘制圆角矩形
- GDI+ 如何绘制圆角矩形(vc++)
- 使用Gdi+绘制圆角矩形(CTabCtrl控件记录一)
- GDI+绘制圆角矩形
- GDI+绘制矩形,并且实现可旋转、缩放、移动功能(基于MFC对话框)
- 在Canvas中绘制圆角矩形
- Css暴力绘制圆角矩形
- Cocos2d-x绘制圆角矩形
- 绘制圆角矩形(方法 )
- ios-矩形-圆角矩形-椭圆-圆形的绘制
- Core Animation - 如何来绘制三个圆角一个直角的矩形
- 再学 GDI+[8] DrawRectangles - 绘制一组矩形
- Quartz2D简单绘制之圆角矩形
- 用openGL ES绘制圆角矩形的实现
- C#利用GDI+绘制旋转文字,矩形内可以根据布局方式排列文本
- Ps绘制圆角矩形
- 详解微信小程序canvas圆角矩形的绘制的方法
- 在Android中绘制圆角矩形图片
- Flex学习笔记:AS绘制圆角矩形