qml for ios 实现二维码扫描功能_Qml组件化编程7-自绘组件

目录

(带个目录方便大家预览，知乎不支持目录，这个目录是从博客粘贴过来的，点击会跳转到博客)

• 简介
• 自绘方案
• QPainter
  • QWidget+QPainter 示例
  • QQuickPaintedItem+QPainter 示例
  • 关于QPainter

• Qml Canvas
• Qml Shapes
• QOpenGLWidget / QOpenGLWindow
• Qml SceneGraph
• Qml QQuickFrameBufferObject
• Qml ShaderEffect
• QVulkanWindow

---

简介

本文是《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事件，这里示例绘制一个进度条:

//MainWindow.h
#pragma once

#include <QMainWindow>

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    MainWindow(QWidget *parent = 0);
    ~MainWindow();
protected:
    void paintEvent(QPaintEvent *event) override;
    void timerEvent(QTimerEvent *event) override;
private:
    QList<QColor> mColorList;
    int mCurrent = 0;
};
//MainWindow.cpp
#include "MainWindow.h"
#include <QPainter>
#include <QtMath>
MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    resize(400, 300);
    mColorList << QColor(51, 52, 54)
               << QColor(75, 85, 86)
               << QColor(87, 103, 103)
               << QColor(95, 119, 121)
               << QColor(101, 132, 134)
               << QColor(104, 146, 145)
               << QColor(104, 158, 158)
               << QColor(101, 169, 168)
               << QColor(92, 182, 180)
               << QColor(79, 194, 191);

    //每秒触发60次定时器，即刷新率60FPS
    startTimer(1000 / 60);
}

MainWindow::~MainWindow()
{

}
void MainWindow::timerEvent(QTimerEvent *) {
    mCurrent =(mCurrent + 3) % 360;
    update();
}

void MainWindow::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing|QPainter::TextAntialiasing);
    //原点x坐标
    qreal a = 100;
    //原点y坐标
    qreal b = 100;
    //半径
    qreal r = 80;
    //每个小圆的半径递增值
    qreal roffset = 2;
    //每个小圆的角度递增值
    qreal angleOffset = 30;

    qreal currentangle = mCurrent ;

    for (int i = 0; i < mColorList.length(); i++) {
        qreal r0 = i * roffset;
        qreal angle = currentangle + i * angleOffset;

        qreal x0 = r * cos(qDegreesToRadians(angle)) + a;
        qreal y0 = r * sin(qDegreesToRadians(angle)) + b;
        painter.setPen(mColorList[i]);
        painter.setBrush(QBrush(mColorList[i]));
        painter.drawEllipse(x0  - r0, y0 - r0, 2 * r0, 2 * r0);
    }
}

QQuickPaintedItem+QPainter 示例

QQuickPaintedItem继承自QQuickItem，而QQuickItem就是Qml中的Item。

QQuick