SimpleCG绘图函数(6)--绘制圆角矩形

最新推荐文章于 2023-12-26 19:23:47 发布
最新推荐文章于 2023-12-26 19:23:47 发布
阅读量779 收藏 4
点赞数 1
分类专栏： SimpleCG 文章标签： 开发语言 c++ windows
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b2b160/article/details/130988610
版权

        本篇我们学习圆角矩形的绘制，圆角矩形就是在矩形的四个边角做圆弧处理，使图形不会太生硬，增加柔和度和亲和力，在现代界面中大量运用。

        圆角矩形函数如下：

//圆角矩形左上角坐标(left,top)，右下角坐标(right, bottom),圆角宽度roundwidth，圆角高度roundheight
 
//画无填充圆角矩形
void roundrect( int left, int top, int right, int bottom, int roundwidth, int roundheight );
 
//画无边框填充圆角矩形
void solidroundrect( int left, int top, int right, int bottom, int roundwidth, int roundheight );
 
//画填充圆角矩形
void fillroundrect( int left, int top, int right, int bottom, int roundwidth, int roundheight );
 
//清空圆角矩形
void clearroundrect( int left, int top, int right, int bottom, int roundwidth, int roundheight );

其中(left,top)表示圆角矩形左上角坐标，(right, bottom)表示右下角坐标,

这里要加以解释的是圆角宽度roundwidth和圆角高度roundheight，它表示了圆角所在的椭圆的宽度和高度，也就是说圆角矩形的四个角不用直角，而是把一个宽roundwidth和高roundheight的椭圆分成四瓣，四个角分别取自同一个椭圆对应的四个部分。一般roundwidth、roundheight取相等值，表示一个正圆。而且当圆角矩形宽度和高度与圆角所在椭圆相等或者更小时，绘制出来的就是对应的椭圆。所以圆角矩形也可以用来绘制圆或者椭圆。

如代码：

roundrect(50,50,300,200,50,50);
setlinecolor(RGB(255,0,0));
rectangle(50,50,300,200);

setlinecolor(0);
roundrect(350,50,400,100,50,50);
setlinecolor(RGB(255,0,0));
rectangle(349,49,401,101);

结果如图：

 一般圆角矩形用来做平面设计或界面设计比较多，那我们就尝试下用圆角矩形函数绘制几个按钮看看吧。

代码如下：

// RoundRect.cpp : 定义控制台应用程序的入口点。
//

#include "../import/include/CGBoard.h"
#include "math.h"

#ifdef _DEBUG
#pragma comment(lib,"../import/lib/SimpleCG_MDd.lib")
#else
#pragma comment(lib,"../import/lib/SimpleCG_MD.lib")
#endif
#define ADDCOLOR(x,y) ((x+y)>255?255:(x+y))
#define SUBCOLOR(x,y) ((x-y)<0?0:(x-y))

int g_nWidth = 500;		//画面宽度
int g_nHeight= 400;		//画面高度

void DrawButtonType(int nX, int nY, int nWidth, int nHeight,COLORREF nDark,COLORREF nLight)
{
	int i=0;
	int r=GetRValue(nDark);
	int g=GetGValue(nDark);
	int b=GetBValue(nDark);
	setlinecolor(0);
	setfillcolor(nDark);
	fillroundrect( nX, nY, nX+nWidth, nY+nHeight, 10, 10 );
	setfillcolor(nLight);
	int nAdd=110*2/nHeight;
	solidrectangle( nX+2, nY+2, nX+nWidth-2, nY+nHeight/2-5 );
	for(i=nHeight/2;i<nHeight-5;++i)
	{
		setlinecolor(RGB(r,g,b));
		line( nX+1, nY+i, nX+nWidth-1, nY+i);
		r=ADDCOLOR(r,nAdd);
		g=ADDCOLOR(g,nAdd);
		b=ADDCOLOR(b,nAdd);
	}
	for(i=nHeight-5;i<nHeight-2;++i)
	{
		setlinecolor(RGB(r,g,b));
		line( nX+2+(i-nHeight+5), nY+i, nX+nWidth-2-(i-nHeight+5), nY+i);
		r=ADDCOLOR(r,nAdd);
		g=ADDCOLOR(g,nAdd);
		b=ADDCOLOR(b,nAdd);
	}
}
//绘制按钮四个状态
void DrawButton( int nX, int nY, int nWidth, int nHeight, COLORREF nColor, int nType )
{
	int r=GetRValue(nColor);
	int g=GetGValue(nColor);
	int b=GetBValue(nColor);
	switch(nType)
	{
	case 1://HOVER
		r = ADDCOLOR(r,50);
		g = ADDCOLOR(g,50);
		b = ADDCOLOR(b,50);
		nColor = RGB(r,g,b);
		break;
	case 2://PUSH
		r = SUBCOLOR(r,50);
		g = SUBCOLOR(g,50);
		b = SUBCOLOR(b,50);
		nColor = RGB(r,g,b);
		break;
	case 3://CANCEL
		r=150;
		r = ADDCOLOR(r,50);
		g = r;
		b = r;
		nColor = RGB(r,r,r);
		break;
	}
	COLORREF nLight = RGB(r,g,b);
	r=SUBCOLOR(GetRValue(nColor),60);
	g=SUBCOLOR(GetGValue(nColor),60);
	b=SUBCOLOR(GetBValue(nColor),60);
	COLORREF nDark = RGB(r,g,b);
	DrawButtonType(nX, nY, nWidth, nHeight, nDark, nLight);
}
void DrawProcess()
{
	int i=0;
	int j=0;
	srand(GetTickCount());
	for( j=0;j<3;++j)
	{
		COLORREF nColor = RGB(rand()%230,rand()%230,rand()%230);
		for( i=0;i<4;++i)
		{
			DrawButton( j*140+10, 10+i*40, 120, 35, nColor, i);
		}
	}
	for( j=0;j<3;++j)
	{
		COLORREF nColor = RGB(rand()%230,rand()%230,rand()%230);
		for( i=0;i<4;++i)
		{
			DrawButton( j*140+10, 200+i*40, 120, 35, nColor, i);
		}
	}
}
int _tmain(int argc, _TCHAR* argv[])
{
	//初始化
	if( !ShowingBoard(g_nWidth,g_nHeight, DrawProcess))
		return 1;
	//关闭图库
	CloseBoard();
	return 0;
}

运行效果如图，我们给每种随机颜色绘制了按钮的四个状态，分别是正常状态、获得鼠标热点、按下、失效状态。

此外，因为圆角矩形的圆润曲线，同样在绘制卡通画方面也有不错的表现。第二个例子就用几只卡通小动物来展现一些圆角矩形在卡通画方面的运用。代码如下：

// RoundRectAnimal.cpp : 定义控制台应用程序的入口点。
//
#include "../import/include/CGBoard.h"
#include "math.h"

#ifdef _DEBUG
#pragma comment(lib,"../import/lib/SimpleCG_MDd.lib")
#else
#pragma comment(lib,"../import/lib/SimpleCG_MD.lib")
#endif

int g_nWidth = 500;		//画面宽度
int g_nHeight= 400;		//画面高度

void DrawElephant(int nX, int nY)
{
	
	setlinewidth(2);
	setfillcolor(RGB(120,200,230));
	fillrectangle( nX+20, nY+70, nX+40, nY+85);
	fillrectangle( nX+60, nY+70, nX+80, nY+85);
	fillroundrect( nX, nY, nX+100, nY+80, 20, 20 );
	
	setfillcolor(0);
	solidcircle( nX + 20,nY+40,5);

	curveline( nX+30, nY+20, nX+50, nY+10, -4 );
	curveline( nX+50, nY+10, nX+70, nY+30, -6 );
	curveline( nX+70, nY+30, nX+60, nY+50, -4 );
	curveline( nX+60, nY+50, nX+30, nY+50, -6 );

	
	curveline( nX+100, nY+40, nX+120, nY+30, -4 );
	curveline( nX+120, nY+30, nX+120, nY+50, -4 );
	curveline( nX+120, nY+50, nX+110, nY+40, -4 );
	curveline( nX+110, nY+40, nX+140, nY+30, -4 );
	
	curveline( nX, nY+40, nX-30, nY+70, -8 );
	curveline( nX-30, nY+70, nX-30, nY+80, 3 );
	curveline( nX-30, nY+80, nX, nY+55, 7 );
	setfillcolor(RGB(120,200,230));
	floodfill( nX - 3, nY+50, 0, 0);
}
void DrawFrog(int nX, int nY)
{
	setfillcolor(RGB(160,200,20));
	circle( nX+30, nY-5, 15);
	circle( nX+70, nY-5, 15);
	fillroundrect( nX, nY, nX+100, nY+80, 20, 20 );
	
	curveline( nX+100, nY+50, nX+115, nY+45, -4 );
	curveline( nX+115, nY+45, nX+120, nY+55, -3 );
	curveline( nX+120, nY+55, nX+103, nY+75, -4 );
	curveline( nX+103, nY+75, nX+108, nY+78, -1 );
	line( nX+108, nY+80, nX+94, nY+80 );
	floodfill( nX+103, nY+60, 0, 0);
	
	curveline( nX, nY+50, nX-15, nY+45, 5 );
	curveline( nX-15, nY+45, nX-20, nY+55, 3 );
	curveline( nX-20, nY+55, nX-3, nY+75, 4 );
	curveline( nX-3, nY+75, nX-8, nY+78, 1 );
	line( nX-8, nY+80, nX+6, nY+80 );
	floodfill( nX - 3, nY+60, 0, 0);

	setfillcolor(0);
	solidcircle( nX+38, nY-8, 5);
	solidcircle( nX+78, nY-8, 5);
	
	curveline( nX+40, nY+10, nX+60, nY+10, 6 );
	
	setfillcolor(RGB(255,255,255));
	solidellipse( nX+30, nY+20, nX+70, nY+80 ); 
	curveline( nX+10, nY+35, nX+30, nY+15, 4 );
	curveline( nX+30, nY+15, nX+35, nY+30, 6 );
	curveline( nX+35, nY+30, nX+35, nY+45, 6 );
	curveline( nX+35, nY+45, nX+10, nY+45, 6 );
	
	curveline( nX+90, nY+35, nX+70, nY+15, -4 );
	curveline( nX+70, nY+15, nX+65, nY+30, -6 );
	curveline( nX+65, nY+30, nX+65, nY+45, -6 );
	curveline( nX+65, nY+45, nX+90, nY+45, -6 );
}
void DrawDog(int nX, int nY)
{
	POINT ptBody[]={{nX+70,nY+80}, {nX+75,nY+100}, {nX+85,nY+100}, {nX+85,nY+95}, {nX+130,nY+95}, {nX+130,nY+100}, {nX+140,nY+100}, {nX+140,nY+75}, {nX+110,nY+70}};
	int pLenBody[]={ -3, 0, 0, -2, -2, 0, 2, 4 };
	POINT ptTail[]={{nX+140,nY+75}, {nX+145,nY+60}, {nX+130,nY+72}};
	int pLenTail[]={ 5, -4};
	
	setfillcolor(RGB(230,160,110));
	fillroundrect( nX, nY, nX+110, nY+80, 20, 20 );
	
	polycurvelinevar( ptBody, pLenBody, sizeof(ptBody)/sizeof(ptBody[0]));
	floodfill( nX+115, nY+75, 0, 0);
	polycurvelinevar( ptTail, pLenTail, sizeof(ptTail)/sizeof(ptTail[0]));
	floodfill( nX+140, nY+70, 0, 0);
	
	curveline( nX, nY+25, nX+25, nY+20, 4 );
	curveline( nX+25, nY+20, nX+30, nY, 4 );
	setfillcolor(RGB(130,60,10));
	floodfill( nX+3, nY+6, 0, 0);
	
	setfillcolor(RGB(255,255,255));
	fillcircle( nX+45, nY+20, 10);
	setfillcolor(0);
	solidcircle( nX+41, nY+20, 7);
	
	curveline( nX+60, nY+10, nX+80, nY+50, 8 );
	curveline( nX+80, nY+50, nX+95, nY+20, 8 );
}
void DrawRabbit(int nX, int nY)
{
	setfillcolor(RGB(250,250,250));
	fillroundrect( nX+30, nY-30, nX+50, nY+10, 20, 20 );
	fillroundrect( nX+60, nY-30, nX+80, nY+10, 20, 20 );
	setfillcolor(RGB(255,215,235));
	solidroundrect( nX+35, nY-20, nX+45, nY+10, 10, 10 );
	solidroundrect( nX+65, nY-20, nX+75, nY+10, 10, 10 );
	setfillcolor(RGB(250,250,250));
	fillroundrect( nX, nY, nX+110, nY+80, 20, 20 );
	
	setfillcolor(0);
	solidcircle( nX+30, nY+20, 7);
	solidcircle( nX+80, nY+20, 7);

	line(nX+55,nY+20, nX+55,nY+30);
	line(nX+55,nY+30, nX+50,nY+35);
	line(nX+55,nY+30, nX+60,nY+35);

	setfillcolor(RGB(250,165,120));
	fillellipse(nX+48,nY+40,nX+62, nY+75);
	line(nX+48,nY+55, nX+55,nY+55);
	line(nX+48,nY+50, nX+53,nY+50);

	setlinecolor(RGB(0,160,80));
	setlinewidth(4);
	line(nX+45,nY+37, nX+55,nY+45);
	line(nX+55,nY+37, nX+55,nY+45);
	line(nX+65,nY+37, nX+55,nY+45);

	setlinewidth(2);
	setlinecolor(0);
	setfillcolor(RGB(250,250,250));
	fillroundrect( nX+43, nY+60, nX+53, nY+68, 8, 8);
	fillroundrect( nX+57, nY+60, nX+67, nY+68, 8, 8);
	
	setlinecolor(RGB(250,250,250));
	line(nX+44,nY+58, nX+44,nY+70);
	line(nX+66,nY+58, nX+66,nY+70);
}
void DrawProcess()
{
	DrawElephant( 100, 40 );
	DrawFrog( 300, 40 );
	DrawDog( 100, 200 );
	DrawRabbit( 300, 200 );
}
int _tmain(int argc, _TCHAR* argv[])
{
	//初始化
	if( !ShowingBoard(g_nWidth,g_nHeight, DrawProcess))
		return 1;
	//关闭图库
	CloseBoard();
	return 0;
}

运行效果如图：

 通过以上两个例子，我们可以看到圆角矩形在很多地方都可以发挥作用。尤其在界面设计当中，可以看到有大量应用，而且绘制方法也比较简单，相信大家能够很容易掌握它的使用。下一篇我们可以继续学习另一个强大的绘制函数--圆弧绘制函数。并可以将前一篇的奥运五环绘制完美了。期待大家继续支持。

b2b160
关注
专栏目录
c#绘制扇形，圆角矩形，多边形
qq_34059233的博客
08-29 2805
class Class1 : Control { public Class1() { this.SetStyle(ControlStyles.ResizeRedraw, true);//空间大小改变时，控件会重绘 } protected override void OnPaint(PaintEventArgs e) { base.OnPaint(e); Graphics graphics = this.CreateGraphics(); g
一个简单的圆角矩形算法demo
01-07
vc一个简单的圆角矩形算法，带demo和实现算法！
矩形圆角绘制改进版（附源码）
weixin_34187822的博客
09-22 243
一、前言上一篇绘制矩形圆角的方式不够完善，感觉写的太过于复杂，将简单的问题复杂化了，本文对此进行了相应的改进，增强对各个圆角的半径的控制。绘制后的圆角效果图如下： 二、圆角半径设计 对于矩行而言，圆角分为左上角、右上角、左下角和右下角。每一个角都会存在相应的半径，用于控制每一个圆角的绘制。设计如下：  1     public struct ArcRadius  2     {  3  ...
C语言圆角矩形画法,UI们：圆角矩形环快速画法
weixin_39843986的博客
05-21 923
编按：圆角矩形在UI中使用非常广。但如何快速地从圆角矩形做出标准的圆角矩形环(你也可以叫做中空圆角矩形)呢？简单的缩放可不成！！本文作者从认识圆角矩形开始，与大家一起绘制各种圆角矩形图案，包括圆角矩形环、圆头矩形、不同半径圆角矩形。一、认识圆角矩形大家好，很高兴今天又来跟大家聊聊了！今天我们的话题是圆角矩形，这个话题是一个朋友留言的，我觉得值得一提，于是乎就有了本文。说到圆角矩形，大家都不陌生，尤...
C# 画圆角矩形
jiangxinyu的专栏
01-20 8454
C# 画圆角矩形
带圆角的矩形
weixin_30319097的博客
08-05 599
如果您觉得上面矩形过于方正，那么可以使用 RoundRect 函数，它可以画出带有圆角边框的矩形，原型为： BOOL RoundRect( HDC hdc, //设备环境句柄 int nLeftRect, //矩形左上角x坐标 int nTopRect, //矩形左上角y坐标 int nRightRect, //矩形右下角x坐标 int nBott...
GDI+绘制圆角矩形
07-08
在GDI+中，我们可以利用其丰富的API来实现各种复杂的图形绘制，其中包括绘制圆角矩形。本篇将详细介绍如何使用GDI+来绘制圆角矩形。 首先，我们需要了解GDI+中的关键类`Graphics`，它是进行图形绘制的基础。`...
绘制矩形：这是一个函数，用于绘制给定中心、宽度和高度以及旋转角度的矩形。-matlab开发
05-30
H = DRAWRECTANGLE（参数，样式） 这个函数用给定的参数绘制一个矩形： - 输入： 参数...................... 1x5 数组- 参数 = [a, b, w, h, theta] - (a,b): 矩形的中心- (w,h): 矩形的宽度和高度 > 0 - theta：...
GDI 绘制圆角矩形
01-15
在圆角矩形的例子中，我们需要用到`Graphics::DrawRectangle`或`Graphics::FillRectangle`方法，但它们无法直接绘制圆角矩形，所以我们需要自定义一个函数来实现这一功能。 圆角矩形的绘制可以通过路径几何图形来...
android paint 圆角 绘制_[BOT] 一种android中实现“圆角矩形”的方法
weixin_31730595的博客
02-06 1164
内容简介文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式，四个角可以分别指定为圆角。思路是利用“Xfermode + Path”来进行Bitmap的裁剪。背景圆角矩形实现的方法应该很多，网上一大堆。很怀疑为啥安卓的控件不内置这样的属性(我不知道有)？之前用到的网络图片加载库(UniversalImageLoader等)都自带“圆形图片”这样的功能。这次需...
圆角矩形的js代码（可以直接调用）
07-09
圆角矩形的js代码（可以直接调用） 圆角矩形的js代码（可以直接调用） 圆角矩形的js代码（可以直接调用）
c语言 绘制圆角矩形算法,画一个圆角矩形、椭圆
weixin_39914107的博客
05-21 1037
#includeLRESULTCALLBACKWndProc(HWND,UINT,WPARAM,LPARAM);/*The'main'functionofWin32GUIprograms:thisiswhereexecutionstarts*/intWINAPIWinMain(HINSTANCEhInstance,HINSTANCEhPrevInsta...
如何画圆角矩形 c代码
li348858320的博客
08-10 2642
在网上搜了很久 都是用的c#或其他自带的库或GUI实现的 本人一直想找用纯c写的 因为要用在单片机上 裸跑一直没找到相应的代码 以前都是拿来主义那就现写一个吧 希望大家有好的代码 也一起分享 思路是 先画一个有四个缺口的矩形 然后在四个角上 分别画出1/4个圆 假设画点画线函数已经有了 LTDC_Draw_Point(x,y,c); //在xy位置画一个颜色为c的点 LCD_DrawLine(x1,y1,x2,y2); //给定两点画直线 先...
C语言，easyx，绘制一个圆角矩形。
最新发布
2301_81807213的博客
12-26 549
/圆角矩形左上角坐标（-200，100），圆角矩形右下角坐标（200，-100），initgraph(800,600);//创建一个窗口，宽度为800，高度为600。//实现坐标轴的翻转，-1把y轴翻转。//以物理坐标为基准设置逻辑坐标的原点。//构成圆角矩形的椭圆宽度为200，构成圆角矩形的椭圆高度为100。//暂时阻塞程序，等待用户按键关闭。//关闭绘图窗体函数。
[Easyx]一个以图像模式输出圆角矩形的函数
白浅星
04-26 2927
前言：虽然easyx里面有一个这个功能的函数了，但是我还是自制了一种实现方式来练习下。 示例图: 函数： void out_long(//制作长方体，圆角长方体 int left, int top, int right, int bottom, //上下左右点的坐标 bool line = false, //是否启用边框,默认不用 COLORREF...
圆角矩形
介亭的博客
12-20 697
&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;shape xmlns:android="http://schemas.android.com/apk/res/android"&gt; &lt;!-- 内部颜色 --&gt; &lt;solid android:color="#FF5A5F&q
绘制圆角矩形（方法 ）
qb164070的专栏
10-16 857
/* sharecodes.org 友情提醒：尊重知识，转载请注明原创作者、出处！ */ /// /// C# GDI+ 绘制圆角矩形 /// /// Graphics 对象 /// Rectangle 对象，圆角矩形区域 /// 边框颜色 /// 边框宽度 /// 圆角半径 public static void DrawR
圆角矩形的绘制和曲线均匀化
顾宇浩的技术分享
02-21 1548
圆角矩形是软件 UI 等视觉设计中的常见表达，一种常见的绘制方法是将矩形的四角替换为与边相切的四分之一圆弧，然而这种绘制方式会在连接处产生视觉上的切折感，这是因为圆弧和直线的连接处只满足 G1G^1G1 连续性。本文探究了如何使用高次埃米尔特插值绘制高阶连续的圆角曲线，以及如何使用常微分方程的数值解法实现曲线的均匀化。
HTML5 Canvas 2.0作图函数库升级：新增正圆角矩形绘制功能
这个函数用于绘制具有指定圆角半径的正圆角矩形，这对于需要创建美观界面或定制控件时非常实用。其参数包括矩形的左上角坐标P1、右下角坐标P2以及圆角的大小Radius。 为了使用这些函数，开发者需要在HTML文件中引入...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

b2b160

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值