发帖 回复
返回列表
  • 3246阅读
  • 1回复

Qml组件化编程7-自绘组件 [复制链接]

 上一主题 下一主题
离线dd759378563
新手上路
 
只看楼主 倒序阅读 楼主  发表于: 2019-05-19


简介

本文是《Qml组件化编程》系列文章的第七篇，涛哥会罗列Qt中的所有自绘方案，并提供一些案例和说明。
Qt自带的组件，外观都是固定的，一般可以通过qss/Qml style等方式进行定制。
如果要实现外观特殊的组件，就需要自己绘制了。
注：文章主要发布在涛哥的博客 和 知乎专栏-涛哥的Qt进阶之路


自绘方案

Qt中的自绘方案有这么一些：
  • QWidget+QPainter / QQuickPaintedItem+QPainter
  • Qml Canvas
  • Qml Shapes
  • QOpenGLWidget / QOpenGLWindow
  • Qml QQuickFrameBufferObject
  • Qml SceneGraph
  • Qml ShaderEffect
  • QVulkanWindow
(GraphicsView和QWidget的绘制类似，就不讨论了)


QPainter

QPainter是一个功能强大的画笔，QWidget中的各种控件如QPushButton、QLable等都是用QPainter画出来的。
(QWidget的控件在绘制时，还增加了qss样式表，让UI定制变得更加方便。)


QWidget+QPainter 示例

QWidget中使用QPainter的方法，是重载paintEvent事件，这里示例绘制一个进度条:

复制代码
  1. //MainWindow.h
  2. #pragma once
  4. #include <QMainWindow>
  6. class MainWindow : public QMainWindow
  7. {
  8.     Q_OBJECT
  10. public:
  11.     MainWindow(QWidget *parent = 0);
  12.     ~MainWindow();
  13. protected:
  14.     void paintEvent(QPaintEvent *event) override;
  15.     void timerEvent(QTimerEvent *event) override;
  16. private:
  17.     QList<QColor> mColorList;
  18.     int mCurrent = 0;
  19. };

复制代码
  1. //MainWindow.cpp
  2. #include "MainWindow.h"
  3. #include <QPainter>
  4. #include <QtMath>
  5. MainWindow::MainWindow(QWidget *parent)
  6.     : QMainWindow(parent)
  7. {
  8.     resize(400, 300);
  9.     mColorList << QColor(51, 52, 54)
  10.                << QColor(75, 85, 86)
  11.                << QColor(87, 103, 103)
  12.                << QColor(95, 119, 121)
  13.                << QColor(101, 132, 134)
  14.                << QColor(104, 146, 145)
  15.                << QColor(104, 158, 158)
  16.                << QColor(101, 169, 168)
  17.                << QColor(92, 182, 180)
  18.                << QColor(79, 194, 191);
  20.     //每秒触发60次定时器，即刷新率60FPS
  21.     startTimer(1000 / 60);
  22. }
  24. MainWindow::~MainWindow()
  25. {
  27. }
  28. void MainWindow::timerEvent(QTimerEvent *) {
  29.     mCurrent =(mCurrent + 3) % 360;
  30.     update();
  31. }
  33. void MainWindow::paintEvent(QPaintEvent *event)
  34. {
  35.     QPainter painter(this);
  36.     painter.setRenderHints(QPainter::Antialiasing|QPainter::TextAntialiasing);
  37.     //原点x坐标
  38.     qreal a = 100;
  39.     //原点y坐标
  40.     qreal b = 100;
  41.     //半径
  42.     qreal r = 80;
  43.     //每个小圆的半径递增值
  44.     qreal roffset = 2;
  45.     //每个小圆的角度递增值
  46.     qreal angleOffset = 30;
  48.     qreal currentangle = mCurrent ;
  50.     for (int i = 0; i < mColorList.length(); i++) {
  51.         qreal r0 = i * roffset;
  52.         qreal angle = currentangle + i * angleOffset;
  54.         qreal x0 = r * cos(qDegreesToRadians(angle)) + a;
  55.         qreal y0 = r * sin(qDegreesToRadians(angle)) + b;
  56.         painter.setPen(mColorList[i]);
  57.         painter.setBrush(QBrush(mColorList[i]));
  58.         painter.drawEllipse(x0  - r0, y0 - r0, 2 * r0, 2 * r0);
  59.     }
  60. }





QQuickPaintedItem+QPainter 示例

QQuickPaintedItem继承自QQuickItem，而QQuickItem就是Qml中的Item。
QQuickPaintedItem通过重载paint函数,就可以使用QPainter绘制。
自定义的QQuickPaintedItem子类需要注册到Qml中才能使用，注册类型或者注册实例都可以，具体可以参考《 Qml组件化编程5-Qml与C++交互》
这里示例QQuickPaintedItem 中使用 QPainter绘制一个阴阳八卦:

复制代码
  1. //PBar.h
  2. #pragma once
  4. #include <QQuickPaintedItem>
  6. class PBar : public QQuickPaintedItem
  7. {
  8.     Q_OBJECT
  9. public:
  10.     PBar(QQuickItem *parent = nullptr);
  12.     void paint(QPainter *painter) override;
  13.     void timerEvent(QTimerEvent *event) override;
  14. private:
  15.     QList<QColor> mColorList;
  16.     int mCurrent = 0;
  17. };

复制代码
  1. //PBar.cpp
  2. #include "PBar.h"
  3. #include <QPainter>
  4. #include <QtMath>
  5. PBar::PBar(QQuickItem *parent) : QQuickPaintedItem (parent)
  6. {
  7.     mColorList << QColor(51, 52, 54)
  8.                << QColor(75, 85, 86)
  9.                << QColor(87, 103, 103)
  10.                << QColor(95, 119, 121)
  11.                << QColor(101, 132, 134)
  12.                << QColor(104, 146, 145)
  13.                << QColor(104, 158, 158)
  14.                << QColor(101, 169, 168)
  15.                << QColor(92, 182, 180)
  16.                << QColor(79, 194, 191);
  18.     //每秒触发60次定时器，即刷新率60FPS
  19.     startTimer(1000 / 60);
  20. }
  22. void PBar::paint(QPainter *painter)
  23. {
  24.     //原点x坐标
  25.     qreal a = 100;
  26.     //原点y坐标
  27.     qreal b = 100;
  28.     //半径
  29.     qreal r = 80;
  31.     qreal r1 = r / 2;
  32.     qreal r2 = r / 6;
  33.     qreal currentangle = mCurrent;
  36.     painter->save();
  37.     painter->setRenderHints(QPainter::Antialiasing|QPainter::TextAntialiasing);
  38.     //red 部分
  39.     {
  40.         painter->setBrush(QBrush(QColor(128, 1, 1)));
  42.         QPainterPath path(QPointF(a + r * cos(qDegreesToRadians( currentangle )), b - r * sin(qDegreesToRadians(currentangle ))));
  43.         path.arcTo(a - r, b - r,
  44.                    r * 2, r * 2,
  45.                    currentangle, 180);
  46.         path.arcTo(a + r1 * cos(qDegreesToRadians(currentangle + 180)) - r1, b - r1 * sin(qDegreesToRadians(currentangle + 180)) - r1,
  47.                    r1 * 2, r1 * 2,
  48.                    currentangle + 180, 180);
  49.         path.arcTo(a + r1*cos(qDegreesToRadians(currentangle)) - r1, b - r1 * sin(qDegreesToRadians(currentangle)) - r1,
  50.                    r1 * 2, r1 * 2,
  51.                    currentangle + 180, -180
  52.                    );
  54.         painter->drawPath(path);
  55.     }
  57.     //blue 部分
  58.     {
  59.         painter->setBrush(QBrush(QColor(1, 1, 128)));
  60.         QPainterPath path(QPointF(a + r * cos(qDegreesToRadians( currentangle )), b - r * sin(qDegreesToRadians(currentangle ))));
  61.         path.arcTo(a - r, b - r,
  62.                    r * 2, r * 2,
  63.                    currentangle, -180);
  64.         path.arcTo(a + r1 * cos(qDegreesToRadians(currentangle + 180)) - r1, b - r1 * sin(qDegreesToRadians(currentangle + 180)) - r1,
  65.                    r1 * 2, r1 * 2,
  66.                    currentangle + 180, 180);
  67.         path.arcTo(a + r1*cos(qDegreesToRadians(currentangle)) - r1, b - r1 * sin(qDegreesToRadians(currentangle)) - r1,
  68.                    r1 * 2, r1 * 2,
  69.                    currentangle + 180, -180
  70.                    );
  72.         painter->drawPath(path);
  73.     }
  74.     {
  75.         // red 小圆
  76.         painter->setBrush(QBrush(QColor(128, 1, 1)));
  77.         QPainterPath path;
  78.         path.addEllipse(a + r1 * cos(qDegreesToRadians(currentangle)) - r2, b - r1 * sin(qDegreesToRadians(currentangle )) - r2,
  79.                         r2 * 2, r2 * 2);
  80.         painter->drawPath(path);
  81.     }
  82.     {
  83.         //blue 小圆
  84.         painter->setBrush(QBrush(QColor(1, 1, 128)));
  85.         QPainterPath path;
  86.         path.addEllipse(a + r1 * cos(qDegreesToRadians(180 + currentangle)) - r2, b - r1 * sin(qDegreesToRadians(180 + currentangle)) - r2,
  87.                         r2 * 2, r2 * 2);
  88.         painter->drawPath(path);
  89.     }
  90.     painter->restore();
  91. }
  93. void PBar::timerEvent(QTimerEvent *event)
  94. {
  95.     (void)event;
  96.     mCurrent =(mCurrent + 3) % 360;
  97.     update();
  98. }

复制代码
  1. //main.cpp
  2. #include <QGuiApplication>
  3. #include <QQmlApplicationEngine>
  4. #include "PBar.h"
  5. int main(int argc, char *argv[])
  6. {
  7.     QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
  9.     QGuiApplication app(argc, argv);
  10.     qmlRegisterType<PBar>("PBar", 1, 0, "PBar");
  11.     QQmlApplicationEngine engine;
  12.     const QUrl url(QStringLiteral("qrc:/main.qml"));
  13.     QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
  14.                      &app, [url](QObject *obj, const QUrl &objUrl) {
  15.                          if (!obj && url == objUrl)
  16.                              QCoreApplication::exit(-1);
  17.                      }, Qt::QueuedConnection);
  18.     engine.load(url);
  20.     return app.exec();
  21. }

复制代码
  1. //main.qml
  2. import QtQuick 2.0
  3. import QtQuick.Window 2.0
  4. import PBar 1.0
  5. Window {
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello PBar")
  11.     PBar {
  12.         anchors.fill: parent
  13.     }
  14. }





关于QPainter

QPainter底层使用CPU做光栅化渲染，这种方式在没有GPU的设备中能够很好地工作。
(我的好友"Qt侠-刘典武"就是这方面的实战专家，他手上有将近150个精美的自绘组件，比官方还要多，有需要的同学可以联系他 QQ517216493)
然而时代在飞速发展，很多设备都带上了GPU，QPainter在GPU设备上，将不能发挥GPU的全部实力。
(刘典武也在积极跟进GPU绘制)
这里提一下，有个叫QUItCoding的组织，开发了一套QNanoPainter，接口和QPainter一致，
在大部分场景下都拥有不错的性能。其底层是基于nanovg的GPU加速。
不过QNanoPainter并没有合并进Qt官方，具体原因不清楚, 有可能是因为性能并不是100%达标的。


Qml Canvas

Qml中提供了Canvas组件，接口和html中的Canvas基本一致，可以直接copy html中的Canvas代码(极少部分不能用)。
当然QPainter实现的功能，也都可以移植到Canvas中。
Canvas渲染性能并不太好，如果有性能要求，还是不要用Canvas了。
这里示例绘制一个笑脸

复制代码
  1. //main.qml
  2. import QtQuick 2.0
  3. import QtQuick.Window 2.0
  5. Window {
  6.     visible: true
  7.     width: 640
  8.     height: 480
  9.     title: qsTr("Hello Canvas")
  11.     Canvas {
  12.         id: canvas
  13.         anchors.fill: parent
  14.         onPaint: {
  16.             var ctx = canvas.getContext('2d');
  18.             ctx.beginPath();
  19.             ctx.arc(75,75,50,0,Math.PI*2,true); // 绘制
  20.             ctx.moveTo(110,75);
  21.             ctx.arc(75,75,35,0,Math.PI,false);   // 口(顺时针)
  22.             ctx.moveTo(65,65);
  23.             ctx.arc(60,65,5,0,Math.PI*2,true);  // 左眼
  24.             ctx.moveTo(95,65);
  25.             ctx.arc(90,65,5,0,Math.PI*2,true);  // 右眼
  26.             ctx.stroke();
  28.         }
  29.     }
  30. }





Qml Shapes

Qt5.10开始，Qml增加了Quick.Shapes功能。这是目前官方提供的自绘途径中，兼顾性能和易用性的最佳选择。
Shapes底层为GPU渲染(基于SceneGraph)，QPainter能绘制的基础图元，都可以用Shapes实现。Shapes再配合上Qml中的
属性绑定和属性动画，可以轻易实现各式各样的动态、酷炫的UI。
(后续的自定义组件，涛哥将会优先使用Shapes。)
这里示例实现一个任意圆角的Rectangle组件:

复制代码
  1. // TRoundRect.qml
  2. import QtQuick 2.12
  3. import QtQuick.Controls 2.5
  4. import QtQuick.Shapes 1.12
  5. Shape {
  6.     id: root
  7.     //左上角是否圆角
  8.     property bool leftTopRound: true
  9.     //左下角是否圆角
  10.     property bool leftBottomRound: true
  11.     //右上角是否圆角
  12.     property bool rightTopRound: true
  13.     //右下角是否圆角
  14.     property bool rightBottomRound: true
  15.     //圆角半径
  16.     property real radius
  17.     //颜色
  18.     property color color: "red"
  20.     //多重采样抗锯齿
  21.     layer.enabled: true
  22.     layer.samples: 8
  23.     
  24.     //平滑处理
  25.     smooth: true
  27.     //反走样抗锯齿
  28.     antialiasing: true
  30.     ShapePath {
  31.         fillColor: color
  32.         startX: leftTopRound ? radius : 0
  33.         startY: 0
  34.         fillRule: ShapePath.WindingFill
  35.         PathLine {
  36.             x: rightTopRound ? root.width - radius : root.width
  37.             y: 0
  38.         }
  39.         PathArc {
  40.             x: root.width
  41.             y: rightTopRound ? radius : 0
  42.             radiusX: rightTopRound ? radius : 0
  43.             radiusY: rightTopRound ? radius : 0
  44.         }
  46.         PathLine {
  47.             x: root.width
  48.             y: rightBottomRound ? root.height - radius : root.height
  49.         }
  50.         PathArc {
  51.             x: rightBottomRound ? root.width - radius : root.width
  52.             y: root.height
  53.             radiusX: rightBottomRound ? radius : 0
  54.             radiusY: rightBottomRound ? radius : 0
  55.         }
  56.         PathLine {
  57.             x: leftBottomRound ? radius : 0
  58.             y: root.height
  59.         }
  60.         PathArc {
  61.             x: 0
  62.             y: leftBottomRound ? root.height - radius : root.height
  63.             radiusX: leftBottomRound ? radius : 0
  64.             radiusY: leftBottomRound ? radius : 0
  65.         }
  67.         PathLine {
  68.             x: 0
  69.             y: leftTopRound ? radius : 0
  70.         }
  71.         PathArc {
  72.             x: leftTopRound ? radius : 0
  73.             y: 0
  74.             radiusX: leftTopRound ? radius : 0
  75.             radiusY: leftTopRound ? radius : 0
  76.         }
  77.     }
  78. }



看一下TRoundRect的用法
复制代码
  1. import QtQuick 2.0
  2. import QtQuick.Controls 2.5
  3. Rectangle {
  4.     width: 800
  5.     height: 600
  7.     Rectangle { //背景红色，衬托一下
  8.         x: 10
  9.         width: 100
  10.         height: 160
  11.         color: "red"
  12.     }
  13.     TRoundRect {
  14.         id: roundRect
  15.         x: 40
  16.         y: 10
  17.         width: 200
  18.         height: 160
  19.         radius: 40
  20.         leftTopRound: lt.checked
  21.         rightTopRound: rt.checked
  22.         leftBottomRound: lb.checked
  23.         rightBottomRound: rb.checked
  24.         color: "#A0333666"      //半透明色
  25.     }
  27.     Grid {
  28.         x: 300
  29.         y: 10
  30.         columns: 2
  31.         spacing: 10
  33.         CheckBox {
  34.             id: lt
  35.             text: "LeftTop"
  36.             checked: true
  37.         }
  38.         CheckBox {
  39.             id: rt
  40.             text: "RightTop"
  41.             checked: true
  42.         }
  43.         CheckBox {
  44.             id: lb
  45.             text: "LeftBottom"
  46.             checked: true
  47.         }
  48.         CheckBox {
  49.             id: rb
  50.             text: "rightBottom"
  51.             checked: true
  52.         }
  53.     }
  54. }





QOpenGLWidget / QOpenGLWindow

有的同学学习过OpenGL这类图形渲染API，Qt为OpenGL提供了便利的窗口和上下文环境。
QOpenGLWidget用来在QWidget框架中集成OpenGL渲染，QOpenGLWindow用在Qml框架。
使用方法都是子类重载下面三个函数：
复制代码
  1. void initializeGL();
  3. void paintGL();
  5. void resizeGL(int w, int h);



这里可以参考官方的示例：
QOpenGLWidget示例
QOpenGLWindow示例
Qt对OpenGL系列的函数都做了封装，一般使用QOpenGLFunctions就够了，QOpenGLFunctions是基于OpenGL ES 2.0 API的跨平台实现，删减了个别API。
相应的有一个未删减的OpenGLES2 的封装：QOpenGLFunctions_ES2。
当然为了兼容所有OpenGL版本，Qt分别封装了相应的类

有特殊版本需要的时候，可以把QOpenGLFunctions换成相应的类。
还有一个OpenGL ES3.0的封装， QOpenGLExtraFunctions，可以在支持OpenGL ES 3.0的设备上使用。
使用这些functions，一定要在有OpenGL上下文环境的地方，先调用一下initializeOpenGLFunctions。有些版本的init有返回值的，要注意判断并处理。


Qml SceneGraph

Qml基于GPU实现了一套渲染框架，这个框架就是SceneGraph。
SceneGraph提供了很多GPU渲染相关的功能，以方便进行自绘制，都是以QSG开头的类，如下图所示：

使用方式是在QQuickItem的子类中，重载updatePaintNode函数：
复制代码
  1. QSGNode *TaoItem::updatePaintNode(QSGNode *node, UpdatePaintNodeData *)
  2.   {
  3.       QSGSimpleRectNode *n = static_cast<QSGSimpleRectNode *>(node);
  4.       if (!n) {
  5.           n = new QSGSimpleRectNode();
  6.           n->setColor(Qt::red);
  7.       }
  8.       n->setRect(boundingRect());
  9.       return n;
  10.   }



在使用Qml框架的程序中，使用这些QSG功能，将自定义渲染直接加入SceneGraph框架的渲染流程，无疑是性能最优的。
不过问题在于，这些QSG有点难以使用。需要有一定的OpenGL或DirectX相关图形学知识，并理解SceneGraph的节点交换机制，才能用好。
而懂OpenGL的人，有更好的选择，就是直接使用OpenGL的API。下面的QQuickFrameBufferObject就是一种途径。


Qml QQuickFrameBufferObject

QQuickFramebufferObject继承于QQuickItem(Qml中将它当作一个Item就可以了)，用来在一个framebuffer object(FBO)上做渲染，
SceneGraph框架会将这个FBO渲染到屏幕上。
使用的方式是，实现一个QQuickFramebufferObject::Renderer类。
这个类里面始终是拥有OpenGL上下文环境的，内存也是被SceneGraph框架管理的，只要理解了渲染流程，用起来还是很方便的。
涛哥在Qml中集成 视频播放器 和 3D模型渲染的时候，就使用了这个FBO。
可以参考这两个例子：
Qml渲染3D模型
FFmpeg解码，Qml/OpenGL转码渲染


Qml ShaderEffect

学习过图形学的人，都应该听说过大名鼎鼎的Shadertoy
只要一点奇妙的Shader代码，就能渲染出各种酷炫的效果。
Qml中提供了ShaderEffect组件，就可以用来做ShaderToy那样的特效。
可以参考qyvlik的代码仓库：
qyvlik-ShaderToy.qml
以及我很久以前写的例子：
Tao-ShaderToy
360能量球
Qml中还有个神奇的ShaderEffectSource，可以用在普通Item的layer.effect中，
比如这个例子，就用ShaderEffectSource做了倒影特效:
倒影特效


QVulkanWindow

OpenGL的下一代，已经进化为vulkan了。
Qt 5.10开始，也提供了vulkan的支持。
涛哥水平有限，这次只提一下，就先不展开说了。


转载声明

文章采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可, 转载请注明出处, 谢谢合作 © 涛哥
文章出自涛哥的博客
涛哥是个Qml高手，著有《Qml组件化编程》《Qml特效》系列教程，见知乎专栏-Qt进阶之路：https://zhuanlan.zhihu.com/TaoQt
或微信公众号：Qt进阶之路
回复
举报
分享到 淘江湖 新浪 QQ微博 QQ空间 开心 人人 豆瓣 网易微博 百度 鲜果 白社会 飞信
离线big_mouse
禁止发言
只看该作者 1楼 发表于: 2020-04-15
回复
举报
发帖 回复
返回列表
快速回复
限100 字节
 
上一个 下一个