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
————————————————
版权声明:本文为CSDN博主「wwkaven」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/wwkaven/article/details/37575007
GDI+绘制圆角矩形相关推荐
- GDI 绘制圆角矩形
代码从网上搜集 #region 圆角矩形/// /// 最大圆角半径/// protected const int MaxRoundRadius = 3;/// /// 最小矩形边长,用于自动处理圆角 ...
- 绘制圆角矩形(方法 )
/* sharecodes.org 友情提醒:尊重知识,转载请注明原创作者.出处! */ /// <summary> /// C# GDI+ 绘制圆角矩形 /// </summary ...
- android绘制圆角矩形
android中可以绘制圆角矩形. 1.利用画布cavas绘制 如果提供了一个方法可以在画布上绘制圆角矩形: 函数名称:public void drawRoundRect (RectF rect, f ...
- JavaScript 使用canvas绘制圆角矩形边框
目录 分析 完整代码如下 前言 在react项目中需要用到绘制矩形填充, 因为直角矩形不够美观, 需要绘制圆角填充矩形 分析 Canvas并没有提供绘制圆角矩形的方法,但是通过观察,我们可以发现,其实 ...
- 微信小程序使用canvas绘制圆角矩形在Android:变形、锯齿
这两天用小程序实现分享生成海报,那我的手机测的一直没问题,结果后来用同事的小米测发现:画的图形缺个角,锯齿形的,根据小程序社区回复:使用ctx.arc + ctx.lineTo就能避免Android错 ...
- canvas绘图,绘制圆角矩形。圆角线条。圆形头像
//绘制圆角矩形 //x.x坐标,y,y轴坐标.width宽 height高 radius圆角(一定不能大于height的一半,否则不显示) fillColor填充颜色.borderColor线 ...
- php 绘制圆角矩形,快速绘制圆角矩形的三种方法 - 行业动态 - 济南新视觉实训基地-平面UI设计PS培训,室内设计,web前端,影视3D动画后期制作培训...
圆角矩形可谓是UI设计中,我们最常见到的元素之一了,通过圆角矩形工具去绘制的圆角过于普通,且略显呆板,缺少吸引力.今天新视觉实训就给大家分享三种绘制圆角矩形的方法,让我们在千篇一律的圆角矩形中找寻一些 ...
- 咸鱼菌CAD实战—绘制圆角矩形
咸鱼菌CAD实战-绘制圆角矩形 设计中一般使用圆角使产品看起来更舒服一些,今天我们来绘制一个圆角矩形. 方法如下: 绘制矩形 使用快捷键F,进入倒圆角工具.或者在工具栏中选择倒圆角工具 按R键进入半径 ...
- 在Android中绘制圆角矩形图片
圆角矩形图片在苹果的产品中很流行,相比于普通的矩形,很多人都喜欢圆角矩形的图片,下面在Android中实现将普通的矩形图片绘制成圆角矩形. 先来看一下普通矩形图片的显示,代码很简单,从r ...
最新文章
- Keras,今天7岁啦!
- Python基础知识(五)--数据类型
- [转]七大.NET开源框架
- Android 开发入门学习
- ORA-01102: cannot mount database in EXCLUSIVE mode
- python能做游戏吗-python制作小游戏(一)
- 1.8 简单卷积网络示例-深度学习第四课《卷积神经网络》-Stanford吴恩达教授
- 大型“数码管”解决方案:用了 28 个舵机的时钟,到底有什么特别?
- Qt学习(十):QT连接mysql(增加、删除、遍历)
- 【2D动画】《想你》。。。。难以想象
- (clion 安装插件联网络失败,pycharm pip联网失败)当电脑选择拨号上网时,解决系统代理被篡改/pip提示“目标计算机积极拒绝,无法连接”的方法! [ 此方法绝对解决系统代理被篡改问题 ]
- url传值的一个问题解决
- 中国IT前线战士:蚂蚁雄兵
- 编程计算: 1!+3!+5!+...+(2n-1)!,要求阶乘计算调用fun函数实现, 数据输入及打印结果在主函数实现。阶乘计算fun函数原型为: long fun(int m); CQUPT题库
- 计算机网络密码凭据,电脑无法上网时总是提示需要输入网络密码如何解决
- FI--SAP财务系统总账应用技巧
- 用爬虫分析上热榜涨的600粉,竟发现。。。(含代码和详解)
- VsCode新建VueJs项目的详细步骤
- 协议的起始位,停止位
- 拥挤城市小程序如何玩转会展营销?
热门文章
- Aborting commit: 'XXXXXXXX'remains in conflict错误
- qq开心农场攻略、升级攻略_qq开心农场刷钱赚钱攻略
- inside sql server 2008 - logical query processing
- 医疗器械CE认证 (MDR)认证之包装验证解读
- 修改MSSQL表所有者的两种方法
- 程序员如何在工作后找到女朋友?
- CAD-VBA中对椭圆的定义
- 射影变换与仿射变换、透视变换(射影既透视,包含了Z轴的信息)
- Mybatis - 一对多/多对一映射
- 商标起名软件php,如何起一个好听的商标名字?有哪些原则呢?