Qt之图形(绘制漂亮的圆弧)
简述
综合前面对二维绘图的介绍,想必我们对一些基本绘图有了深入的了解,下面我们来实现一些漂亮的图形绘制。
圆形
经常地,我们会在网上看到一些列的抽奖活动,里面就有圆盘抽奖,是不是有点手痒了O(∩_∩)O~
效果
源码
void MainWindow::paintEvent(QPaintEvent *)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing, true);
int radius = 150;
int arcHeight = 30;
// >> 1(右移1位)相当于width() / 2
painter.translate(width() >> 1, height() >> 1);
/**
* 参数二:半径
* 参数三:开始的角度
* 参数四:指扫取的角度-顺时针(360度 / 8 = 45度)
* 参数五:圆环的高度
* 参数六:填充色
**/
gradientArc(&painter, radius, 0, 45, arcHeight, qRgb(200, 200, 0));
gradientArc(&painter, radius, 45, 45, arcHeight, qRgb(200, 0, 200));
gradientArc(&painter, radius, 90, 45, arcHeight, qRgb(0, 200, 200));
gradientArc(&painter, radius, 135, 45, arcHeight, qRgb(200, 0, 0));
gradientArc(&painter, radius, 225, 45, arcHeight, qRgb(0, 200, 0));
gradientArc(&painter, radius, 180, 45, arcHeight, qRgb(0, 0, 200));
gradientArc(&painter, radius, 270, 45, arcHeight, qRgb(0, 0, 0));
gradientArc(&painter, radius, 315, 45, arcHeight, qRgb(150, 150, 150));
}
void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight, QRgb color)
{
// 渐变色
QRadialGradient gradient(0, 0, radius);
gradient.setColorAt(0, Qt::white);
gradient.setColorAt(1.0, color);
painter->setBrush(gradient);
// << 1(左移1位)相当于radius*2 即:150*2=300
//QRectF(-150, -150, 300, 300)
QRectF rect(-radius, -radius, radius << 1, radius << 1);
QPainterPath path;
path.arcTo(rect, startAngle, angleLength);
painter->setPen(Qt::NoPen);
painter->drawPath(path);
}
弧形
我们可以在之前的基础上加一些处理,从而实现一个圆弧。
效果
源码
void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight, QRgb color)
{
// 渐变色
QRadialGradient gradient(0, 0, radius);
gradient.setColorAt(0, Qt::white);
gradient.setColorAt(1.0, color);
painter->setBrush(gradient);
// << 1(左移1位)相当于radius*2 即:150*2=300
//QRectF(-150, -150, 300, 300)
QRectF rect(-radius, -radius, radius << 1, radius << 1);
QPainterPath path;
path.arcTo(rect, startAngle, angleLength);
// QRectF(-120, -120, 240, 240)
QPainterPath subPath;
subPath.addEllipse(rect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));
// path为扇形 subPath为椭圆
path -= subPath;
painter->setPen(Qt::NoPen);
painter->drawPath(path);
}
这些只不过是我们实现的一个小效果,如果说你有什么特殊的需要,可以在此基础上进行扩展,比如:添加文本、动画旋转等。
文本
可以通过QPainterPath的addText()来添加文本。
效果
源码
void MainWindow::gradientArc(QPainter *painter, int radius, int startAngle, int angleLength, int arcHeight, QRgb color)
{
// 渐变色
QRadialGradient gradient(0, 0, radius);
gradient.setColorAt(0, Qt::white);
gradient.setColorAt(1.0, color);
painter->setBrush(gradient);
// << 1(左移1位)相当于radius*2 即:150*2=300
//QRectF(-150, -150, 300, 300)
QRectF rect(-radius, -radius, radius << 1, radius << 1);
QPainterPath path;
path.arcTo(rect, startAngle, angleLength);
// QRectF(-120, -120, 240, 240)
QPainterPath subPath;
subPath.addEllipse(rect.adjusted(arcHeight, arcHeight, -arcHeight, -arcHeight));
// path为扇形 subPath为椭圆
path -= subPath;
QFont font;
font.setFamily("Microsoft YaHei");
font.setPointSize(14);
painter->setPen(Qt::NoPen);
path.addText(path.pointAtPercent(0.5), font, QStringLiteral("一去丶二三里"));
painter->drawPath(path);
}
旋转
我们对前面的圆盘进行强化,添加一个旋转效果。当然,常见的抽奖圆盘旋转的是指针,而我们下面实现的是对圆盘的旋转,如果你要实现一个抽奖转盘,那么可以再扩展。
效果
源码
// 利用定时器,定时变换角度,进行旋转。
QTimer *pTimer = new QTimer(this);
pTimer->setInterval(100);
connect(pTimer, SIGNAL(timeout()), this, SLOT(updatePaint()));
pTimer->start();
// 改变角度,进行旋转
void MainWindow::updatePaint()
{
m_nRotationAngle++;
if (m_nRotationAngle > 360)
m_nRotationAngle = 0;
update();
}
然后,只需要在绘图事件中添加简单的一行代码即可:
void MainWindow::paintEvent(QPaintEvent *)
{
...
// 旋转
painter.rotate(m_nRotationAngle);
...
}
好了,基本的介绍就到这里,是不是很有意思呢,O(∩_∩)O哈哈~
Qt之图形(绘制漂亮的圆弧)的更多相关文章
- QT 基本图形绘制
QT 基本图形绘制 1.告诉绘制引擎一些东西 QPainter::Antialiasing 在可能的情况下,反锯齿 QPainter::TextAntialiasing 在可能的情况下,文 ...
- Qt 2D绘图之一:基本图形绘制和渐变填充
Qt中提供了强大的2D绘图系统,可以使用相同的API在屏幕和绘图设备上进行绘制,它主要基于QPainter.QPaintDevice和QPaintEngine这三个类.它们三者的关系如下图所示: QP ...
- 【Windows编程】系列第五篇:GDI图形绘制
上两篇我们学习了文本字符输出以及Unicode编写程序,知道如何用常见Win32输出文本字符串,这一篇我们来学习Windows编程中另一个非常重要的部分GDI图形绘图.Windows的GDI函数包含数 ...
- 推荐12个最好的 JavaScript 图形绘制库
众多周知,图形和图表要比文本更具表现力和说服力.图表是数据图形化的表示,通过形象的图表来展示数据,比如条形图,折线图,饼图等等.可视化图表可以帮助开发者更容易理解复杂的数据,提高生产的效率和 Web ...
- SVG 2D入门2 - 图形绘制
基本形状 SVG提供了很多的基本形状,这些元素可以直接使用,这一点比canvas好多了.废话不说了,直接看例子,这个最直接: <svg width="200" heigh ...
- 图形绘制 Canvas Paint Path 详解
图形绘制简介 Android中使用图形处理引擎,2D部分是android SDK内部自己提供,3D部分是用Open GL ES 1.0.大部分2D使用的api都在android.grap ...
- python库之turtle(图形绘制) 开启新的快乐源泉
相信有不少人学习python 都是听了老前辈的推荐 “学python好,python有趣的代码多” 比如说画一只小狮子 这就是今天想要介绍的绘制图形库-turtle 如果也想这样画一只小狮子,或者其他 ...
- 自定义控件之Canvas图形绘制基础练习-青春痘笑脸^_^
对于自定义控件的意义不言而喻,所以对它的深入研究是很有必要的,前些年写过几篇关于UI效果的学习过程,但是中途比较懒一直就停滞了,而对于实际工作还是面试来说系统深入的了解自定义控件那是很有必要的,所以接 ...
- 【opencv系列04】OpenCV4.X图形绘制
一. 基本图形绘制 1. 基本函数与参数 cv2.line(): 线 cv2.circle(): 圆 cv2.rectangle(): 矩形 cv2.ellipse(): 椭圆 cv2.putText ...
随机推荐
- hdu 1693 插头dp入门
hdu1693 Eat the Trees 题意 在\(n*m\)的矩阵中,有些格子有树,没有树的格子不能到达,找一条或多条回路,吃完所有的树,求有多少种方法. 解法 这是一道插头dp的入门题,只需要 ...
- [luogu2513 HAOI2009] 逆序对数列 (计数dp)
题目描述 对于一个数列{ai},如果有iaj,那么我们称ai与aj为一对逆序对数.若对于任意一个由1~n自然数组成的数列,可以很容易求出有多少个逆序对数.那么逆序对数为k的这样自然数数列到底有多少个? ...
- docker删除docker_gwbridge网桥
最后更新时间:2018年12月26日 使用命令:docker network rm docker_gwbridge 提示无法删除. [root@localhost ~]# docker network ...
- VUE使用中踩过的坑
前言 vue如今可谓是一匹黑马,github star数已居第一位!前端开发对于vue的使用已经越来越多,它的优点就不做介绍了,本篇是我对vue使用过程中以及对一些社区朋友提问我的问题中做的一些总结, ...
- Java 学习(10):java 异常处理
java 异常处理 异常发生的原因有很多,通常包含以下几大类: 用户输入了非法数据. 要打开的文件不存在. 网络通信时连接中断,或者JVM内存溢出. 三种类型的异常: 检查性异常: 最具代表的检查性异 ...
- Spring中 @Autowired标签与 @Resource标签 的区别(转)
spring不但支持自己定义的@Autowired注解,还支持由JSR-250规范定义的几个注解,如:@Resource. @PostConstruct及@PreDestroy. 1. @Autowi ...
- 【POJ 2485】 Highways
[POJ 2485] Highways 最小生成树模板 Prim #include using namespace std; int mp[501][501]; int dis[501]; bool ...
- POI 导入excel数据自己主动封装成model对象--代码分析
上完代码后,对代码进行基本的分析: 1.主要使用反射api将数数据注入javabean对象 2.代码中的日志信息级别为debug级别 3.获取ExcelImport对象后须要调用init()方法初始化 ...
- bzoj1816: [Cqoi2010]扑克牌(二分答案判断)
1816: [Cqoi2010]扑克牌 题目:传送门 题解: 被一道毒瘤题搞残了...弃了坑来刷刷水题 一开始还想复杂了...结果发现二分水过: 二分答案...然后check一下,joker肯定尽量用 ...
- 【App 开发框架 - App Framework】
http://edm.mcake.com/mark/jqmboi/#plugins 官网:http://app-framework-software.intel.com/index.php 官方API ...