码迷,mamicode.com
首页 > 其他好文 > 详细

Qt Quick实现的涂鸦程序

时间:2014-11-22 01:57:04      阅读:423      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   http   io   ar   color   os   使用   

之前一直以为 Qt Quick 里 Canvas 才可以自绘,后来发觉不是,原来还有好几种方式都可以绘图!可以使用原始的 OpenGL(Qt Quick 使用 OpenGL 渲染),可以构造QSGNode 来绘图,还可以使用 QPainter !哇, QPainter 我很熟悉啊。于是,我用 QPainter 结合 QML 实现了一个简单的涂鸦程序: PaintedItem 。它有下列功能:

  • 设置线条宽度
  • 设置线条颜色
  • 设置背景颜色
  • 清除涂鸦
  • 无限级undo

    程序很简陋,效果如下:

bubuko.com,布布扣

                               图1 PaintedItem效果图

    程序虽然简单,但也还是有一些新内容之前没有提到:

  • QQuickPaintedItem
  • C++实现QML可视图元(Item)
  • 自定义图元如何处理鼠标事件

    下面咱们一个一个来说一下。

    版权所有 foruok ,转载请注明出处:http://blog.csdn.net/foruok

QQuickPaintedItem

    Qt Quick 的核心是 Scene Graph ,可以在 Qt 帮助的索引模式下以 “Scene Graph” 为关键字来检索学习。 Scene Graph 的设计思想和 QGraphicsView/QGraphicsScene 框架类似,一个场景,很多图元往场景里放。不同之处是 Item 的绘制, QGraphicsView 框架里是通过 View 的绘图事件来驱动 Item 的绘制,QGraphicsItem 有一个 paint() 虚函数,只要你从 QGraphicsItem 继承来的 Item 实现这个 paint() 函数,就可以往 QPaintDevice 上绘制了,逻辑直接;而 Qt Quick 的绘制,其实另有一个渲染线程, Scene 里的 Item 没有 paint() 这种直观的绘图函数,只有一个 updatePaintNode() 方法让你来构造你的 Item 的几何表示,当程序轮转到渲染循环时,渲染循环把所有 Item 的 QSGNode 树取出来绘制。

    updatePaintNode() 这种绘制的方式很不直观,它来自 OpenGL 或者 Direct 3D 的绘图模式:你构造图元的几何表示,别人会在某一个时刻根据你提供的材料帮你绘制,就像你扔一袋垃圾到门口,过一阵子有人会来帮你收走这种感觉。用惯 Qt Widgets 和 QPainter 的开发者可能会不适应这种方式,所以 Qt Quick 提供了一种兼容老习惯的方式:引入 QQuickPaintedItem ,使用 QPainter 绘制。

    一般地,你可以这样理解: QQuickPaintedItem 使用 Qt Widgets 里惯常的 2D 绘图方式,将你想要的线条、图片、文字等绘制到一个内存中的 QImage 上,然后把这个 QImage 作为一个 QSGNode 放在那里等着 Qt Quick 的渲染线程来取走它,把它绘制到实际的场景中。按照这种理解, QQuickPaintedItem 会多个绘图步骤,有性能上的损失!不过为了开发方便,有时候这一点点性能损失是可以承受的——只要你的应用仍然可以流畅运行。

    QQuickPaintedItem 是一切想使用 QPainter 来绘图的 Qt Quick Item 的基类,它有一个纯虚函数—— paint(QPainter * painter)  ,你自定义的 Item 只要实现 paint() 虚函数就可以了。

    QQuickPaintedItem 是 QQuickItem 的派生类, QQuickItem 的 boundingRect() 方法返回一个 Item 的矩形,你可以根据它来绘制你的 Item 。fillColor() 返回 Item 的填充颜色(默认是透明的), Qt Quick 会使用这个颜色在 paint() 方法调用前绘制你的 Item 的背景。 setFillColor()  可以改变填充颜色。

    Qt Quick 提供了一个“Scene Graph - Painted Item”示例来演示 QQuickPaintedItem 的用法,你可以参考。

C++实现QML可视图元

    Qt Quick 提供的相当一部分图形元素都是在 C++ 中实现后导出到 QML 环境中的,比如 Text 。那我们也可以这么做,只要你从 QQuickItem(对应 QML 中的 Item 元素) 继承来实现你的 C++ 类即可。

    我们的示例要使用 QPainter 绘图,所以从 QQuickPaintedItem 继承,重写 paint() 方法。

    完成了 C++ 类,导出到 QML 环境中,就可以像使用 QML 内建元素一样来使用我们导出的类。如何导出又如何在 QML 中使用,请参看《Qt Quick 之 QML 与 C++ 混合编程详解》。

自定义图元如何处理鼠标事件

    在 QML 中我们一直使用 MouseArea 来处理鼠标事件。 MouseArea 对应 C++ 中的 QQuickMouseArea 类,其实也是 QQuickItem 的派生类。 其实 QQuickItem 定义了一系列处理鼠标事件的虚函数,比如 mousePressEvent 、 mouseMoveEvent 、 mouseMoveEvent 等,它本身就可以处理鼠标事件,只不过 QQuickItem 没有导出这些函数,我们在 QML 中无法使用。而之所以引入 QQuickMouseArea (QML 中的 MouseArea ),是为了方便鼠标事件的处理,你不需要为每个 Item 像 QWidget 那样来重写很多方法,那样真的很烦的, QML 的这种方式虽然多用了一个对象,但是更方便一些。可是我们的 PaintedItem 类,如果绕回到 QML 中使用 MouseArea 来处理鼠标事件,那我们跟踪鼠标轨迹来绘制线条时,就需要不断地将鼠标事件中携带的像素点信息再回传到 C++ 中来,非常麻烦,性能也不好,所以我们直接重写 QQuickItem 的相关虚函数来处理鼠标事件。

    我们知道 MouseArea 有一个 acceptedButtons 属性,可以设置 Item 处理哪个鼠标按键,而实际上,“要处理的鼠标按键”这个信息,是保存在 QQuickItem 中的,通过 setAcceptedMouseButtons() 方法来设置。默认情况下, QQuickItem 不处理任何鼠标按键,所以我们要处理鼠标按键,必须在我们的 PaintedItem 中来设置一下,就像 MouseArea 那样。我们的示例中,在 PaintedItem 的构造函数中做了这件事:

  1. PaintedItem::PaintedItem(QQuickItem *parent)  
  2.     : QQuickPaintedItem(parent)  
  3.     , m_element(0)  
  4.     , m_bEnabled(true)  
  5.     , m_bPressed(false)  
  6.     , m_bMoved(false)  
  7.     , m_pen(Qt::black)  
  8. {  
  9.     setAcceptedMouseButtons(Qt::LeftButton);  
  10. }  


    如代码所示,我们只处理鼠标左键。如果你不设置这个,你收不到任何鼠标事件。

PaintedItem 源码分析

    因为我们实现的功能简单,源码也不复杂。

自定义 Item

    先看 PaintedItem.h :

  1. #ifndef PAINTEDITEM_H  
  2. #define PAINTEDITEM_H  
  3. #include <QQuickPaintedItem>  
  4. #include <QVector>  
  5. #include <QPointF>  
  6. #include <QLineF>  
  7. #include <QPen>  
  8.   
  9. class ElementGroup  
  10. {  
  11. public:  
  12.     ElementGroup()  
  13.     {  
  14.     }  
  15.   
  16.     ElementGroup(const QPen &pen)  
  17.         : m_pen(pen)  
  18.     {  
  19.     }  
  20.   
  21.     ElementGroup(const ElementGroup &e)  
  22.     {  
  23.         m_lines = e.m_lines;  
  24.         m_pen = e.m_pen;  
  25.     }  
  26.   
  27.     ElementGroup & operator=(const ElementGroup &e)  
  28.     {  
  29.         if(this != &e)  
  30.         {  
  31.             m_lines = e.m_lines;  
  32.             m_pen = e.m_pen;  
  33.         }  
  34.         return *this;  
  35.     }  
  36.   
  37.     ~ElementGroup()  
  38.     {  
  39.     }  
  40.   
  41.     QVector<QLineF> m_lines;  
  42.     QPen m_pen;  
  43. };  
  44.   
  45. class PaintedItem : public QQuickPaintedItem  
  46. {  
  47.     Q_OBJECT  
  48.     Q_PROPERTY(bool enabled READ isEnabled WRITE setEnabled)  
  49.     Q_PROPERTY(int penWidth READ penWidth WRITE setPenWidth)  
  50.     Q_PROPERTY(QColor penColor READ penColor WRITE setPenColor)  
  51.   
  52. public:  
  53.     PaintedItem(QQuickItem *parent = 0);  
  54.     ~PaintedItem();  
  55.   
  56.     bool isEnabled() const{ return m_bEnabled; }  
  57.     void setEnabled(bool enabled){ m_bEnabled = enabled; }  
  58.   
  59.     int penWidth() const { return m_pen.width(); }  
  60.     void setPenWidth(int width) { m_pen.setWidth(width); }  
  61.   
  62.     QColor penColor() const { return m_pen.color(); }  
  63.     void setPenColor(QColor color) { m_pen.setColor(color); }  
  64.   
  65.     Q_INVOKABLE void clear();  
  66.     Q_INVOKABLE void undo();  
  67.   
  68.     void paint(QPainter *painter);  
  69.   
  70. protected:  
  71.     void mousePressEvent(QMouseEvent *event);  
  72.     void mouseMoveEvent(QMouseEvent *event);  
  73.     void mouseReleaseEvent(QMouseEvent *event);  
  74.     void purgePaintElements();  
  75.   
  76. protected:  
  77.     QPointF m_lastPoint;  
  78.     QVector<ElementGroup*> m_elements;  
  79.     ElementGroup * m_element; // the Current ElementGroup  
  80.     bool m_bEnabled;  
  81.     bool m_bPressed;  
  82.     bool m_bMoved;  
  83.     QPen m_pen; // the Current Pen  
  84. };  
  85.   
  86. #endif // PAINTEDITEM_H  


    说下 ElementGroup 这个类,它保存了鼠标左键按下、移动、直到左键释放这一个动作序列产生的需要绘制的线条,保存在成员变量 m_lines 中,而绘制这些线条所用的画笔则由 m_pen 表示。

    在 PaintedItem 中,成员变量 m_elements 表示绘图过程中的所有动作序列。 m_element 则指向当前的动作序列, m_pen 代表用户所配置的画笔。

    其它的方法都比较直观,不再赘述。

    下面是 PaintedItem.cpp :

  1. #include "PaintedItem.h"  
  2. #include <QPainter>  
  3. #include <QPen>  
  4. #include <QBrush>  
  5. #include <QColor>  
  6. #include <QDebug>  
  7.   
  8. PaintedItem::PaintedItem(QQuickItem *parent)  
  9.     : QQuickPaintedItem(parent)  
  10.     , m_element(0)  
  11.     , m_bEnabled(true)  
  12.     , m_bPressed(false)  
  13.     , m_bMoved(false)  
  14.     , m_pen(Qt::black)  
  15. {  
  16.     setAcceptedMouseButtons(Qt::LeftButton);  
  17. }  
  18.   
  19. PaintedItem::~PaintedItem()  
  20. {  
  21.     purgePaintElements();  
  22. }  
  23.   
  24. void PaintedItem::clear()  
  25. {  
  26.     purgePaintElements();  
  27.     update();  
  28. }  
  29.   
  30. void PaintedItem::undo()  
  31. {  
  32.     if(m_elements.size())  
  33.     {  
  34.         delete m_elements.takeLast();  
  35.         update();  
  36.     }  
  37. }  
  38.   
  39. void PaintedItem::paint(QPainter *painter)  
  40. {  
  41.     painter->setRenderHint(QPainter::Antialiasing);  
  42.   
  43.     int size = m_elements.size();  
  44.     ElementGroup *element;  
  45.     for(int i = 0; i < size; ++i)  
  46.     {  
  47.         element = m_elements.at(i);  
  48.         painter->setPen(element->m_pen);  
  49.         painter->drawLines(element->m_lines);  
  50.     }  
  51. }  
  52.   
  53. void PaintedItem::mousePressEvent(QMouseEvent *event)  
  54. {  
  55.     m_bMoved = false;  
  56.     if(!m_bEnabled || !(event->button() & acceptedMouseButtons()))  
  57.     {  
  58.         QQuickPaintedItem::mousePressEvent(event);  
  59.     }  
  60.     else  
  61.     {  
  62.         //qDebug() << "mouse pressed";  
  63.         m_bPressed = true;  
  64.         m_element = new ElementGroup(m_pen);  
  65.         m_elements.append(m_element);  
  66.         m_lastPoint = event->localPos();  
  67.         event->setAccepted(true);  
  68.     }  
  69. }  
  70.   
  71. void PaintedItem::mouseMoveEvent(QMouseEvent *event)  
  72. {  
  73.     if(!m_bEnabled || !m_bPressed || !m_element)  
  74.     {  
  75.         QQuickPaintedItem::mousePressEvent(event);  
  76.     }  
  77.     else  
  78.     {  
  79.         //qDebug() << "mouse move";  
  80.         m_element->m_lines.append(QLineF(m_lastPoint, event->localPos()));  
  81.         m_lastPoint = event->localPos();  
  82.         update();  
  83.     }  
  84. }  
  85.   
  86. void PaintedItem::mouseReleaseEvent(QMouseEvent *event)  
  87. {  
  88.     if(!m_element || !m_bEnabled || !(event->button() & acceptedMouseButtons()))  
  89.     {  
  90.         QQuickPaintedItem::mousePressEvent(event);  
  91.     }  
  92.     else  
  93.     {  
  94.         //qDebug() << "mouse released";  
  95.         m_bPressed = false;  
  96.         m_bMoved = false;  
  97.         m_element->m_lines.append(QLineF(m_lastPoint, event->localPos()));  
  98.         update();  
  99.     }  
  100. }  
  101.   
  102. void PaintedItem::purgePaintElements()  
  103. {  
  104.     int size = m_elements.size();  
  105.     if(size > 0)  
  106.     {  
  107.         for(int i = 0; i < size; ++i)  
  108.         {  
  109.             delete m_elements.at(i);  
  110.         }  
  111.         m_elements.clear();  
  112.     }  
  113.     m_element = 0;  
  114. }  


    说一下“清除”功能的实现,当你点击图1中的“清除”按钮时,会调用 PaintedItem 的 clear() 方法, clear() 内部调用 purgePaintElements() ,把 m_elements 内保存的所有绘图序列都删除,再调用 update() 方法触发重新绘制。

    undo() 方法对应界面上的“撤销”功能,它删除最近的一个绘图序列,然后触发绘制。

    现在我们说一下绘图序列的生成逻辑。

    在 mousePressEvent() 中生成一个新的绘图序列,在 mouseMoveEvent() 中讲当前点和上一个点组合为一条线,加入当前绘图序列( m_element ),当 mouseReleaseEvent() 被调用时,把鼠标左键抬起时的指针位置的坐标也处理了,这样一个完整的绘图序列就生成了。

导出自定义Item

    直接看代码(main.cpp ):

  1. int main(int argc, char *argv[])  
  2. {  
  3.     QGuiApplication app(argc, argv);  
  4.     qmlRegisterType<PaintedItem>("an.qml.Controls", 1, 0, "APaintedItem");  
  5.   
  6.     QQmlApplicationEngine engine;  
  7.     engine.load(QUrl(QStringLiteral("qrc:///main.qml")));  
  8.   
  9.     return app.exec();  
  10. }  

 

QML文档

    有两个 QML 文档, main.qml 负责主界面, ColorPicker.qml 实现了颜色选择按钮。

main.qml

    main.qml 文档没什么好说的了,PaintedItem 导出为 APaintedItem ,它的使用与一般的 QML 元素一致。下面是完整的 main.qml :

[javascript] view plaincopybubuko.com,布布扣bubuko.com,布布扣
  1. import QtQuick 2.2  
  2. import QtQuick.Window 2.1  
  3. import an.qml.Controls 1.0  
  4. import QtQuick.Controls 1.2  
  5. import QtQuick.Layouts 1.1  
  6. import QtQuick.Controls.Styles 1.2  
  7.   
  8. Window {  
  9.     visible: true;  
  10.     minimumWidth: 600;  
  11.     minimumHeight: 480;  
  12.   
  13.     Rectangle {  
  14.         id: options;  
  15.         anchors.left: parent.left;  
  16.         anchors.right: parent.right;  
  17.         anchors.top: parent.top;  
  18.         implicitHeight: 70;  
  19.         color: "lightgray";  
  20.         Component{  
  21.             id: btnStyle;  
  22.             ButtonStyle {  
  23.                 background: Rectangle {  
  24.                     implicitWidth: 70;  
  25.                     implicitHeight: 28;  
  26.                     border.width: control.hovered ? 2 : 1;  
  27.                     border.color: "#888";  
  28.                     radius: 4;  
  29.                     gradient: Gradient {  
  30.                         GradientStop { position: 0 ; color: control.pressed ? "#ccc" : "#eee" }  
  31.                         GradientStop { position: 1 ; color: control.pressed ? "#aaa" : "#ccc" }  
  32.                     }  
  33.                 }  
  34.   
  35.                 label: Text {  
  36.                     text: control.text;  
  37.                     font.pointSize: 12;  
  38.                     color: "blue";  
  39.                     horizontalAlignment: Text.AlignHCenter;  
  40.                     verticalAlignment: Text.AlignVCenter;  
  41.                 }  
  42.             }  
  43.         }  
  44.         ColorPicker {  
  45.             id: background;  
  46.             anchors.left: parent.left;  
  47.             anchors.leftMargin: 4;  
  48.             anchors.verticalCenter: parent.verticalCenter;  
  49.             text: "背景";  
  50.             selectedColor: "white";  
  51.             onColorPicked: painter.fillColor = clr;  
  52.         }  
  53.         ColorPicker {  
  54.             id: foreground;  
  55.             anchors.left: background.right;  
  56.             anchors.top: background.top;  
  57.             anchors.leftMargin: 4;  
  58.             text: "前景";  
  59.             selectedColor: "black";  
  60.             onColorPicked: painter.penColor = clr;  
  61.         }  
  62.         Rectangle {  
  63.             id: splitter;  
  64.             border.width: 1;  
  65.             border.color: "gray";  
  66.             anchors.left: foreground.right;  
  67.             anchors.leftMargin: 4;  
  68.             anchors.top: foreground.top;  
  69.             width: 3;  
  70.             height: foreground.height;  
  71.         }  
  72.         Slider {  
  73.             id: thickness;  
  74.             anchors.left: splitter.right;  
  75.             anchors.leftMargin: 4;  
  76.             anchors.bottom: splitter.bottom;  
  77.             minimumValue: 1;  
  78.             maximumValue: 100;  
  79.             stepSize: 1.0;  
  80.             value: 1;  
  81.             width: 280;  
  82.             height: 24;  
  83.             onValueChanged: if(painter != null)painter.penWidth = value;  
  84.         }  
  85.   
  86.         Text {  
  87.             id: penThickLabel;  
  88.             anchors.horizontalCenter: thickness.horizontalCenter;  
  89.             anchors.bottom: thickness.top;  
  90.             anchors.bottomMargin: 4;  
  91.             text: "画笔:%1px".arg(thickness.value);  
  92.             font.pointSize: 16;  
  93.             color: "steelblue";  
  94.         }  
  95.   
  96.         Text {  
  97.             id: minLabel;  
  98.             anchors.left: thickness.left;  
  99.             anchors.bottom: thickness.top;  
  100.             anchors.bottomMargin: 2;  
  101.             text: thickness.minimumValue;  
  102.             font.pointSize: 12;  
  103.         }  
  104.   
  105.         Text {  
  106.             id: maxLabel;  
  107.             anchors.right: thickness.right;  
  108.             anchors.bottom: thickness.top;  
  109.             anchors.bottomMargin: 2;  
  110.             text: thickness.maximumValue;  
  111.             font.pointSize: 12;  
  112.         }  
  113.         Rectangle {  
  114.             id: splitter2;  
  115.             border.width: 1;  
  116.             border.color: "gray";  
  117.             anchors.left: thickness.right;  
  118.             anchors.leftMargin: 4;  
  119.             anchors.top: foreground.top;  
  120.             width: 3;  
  121.             height: foreground.height;  
  122.         }  
  123.   
  124.         Button {  
  125.             id: clear;  
  126.             anchors.left: splitter2.right;  
  127.             anchors.leftMargin: 4;  
  128.             anchors.verticalCenter: splitter2.verticalCenter;  
  129.             width: 70;  
  130.             height: 28;  
  131.             text: "清除";  
  132.             style: btnStyle;  
  133.             onClicked: painter.clear();  
  134.         }  
  135.   
  136.         Button {  
  137.             id: undo;  
  138.             anchors.left: clear.right;  
  139.             anchors.leftMargin: 4;  
  140.             anchors.top: clear.top;  
  141.             width: 70;  
  142.             height: 28;  
  143.             text: "撤销";  
  144.             style: btnStyle;  
  145.             onClicked: painter.undo();  
  146.         }  
  147.   
  148.         Rectangle {  
  149.             border.width: 1;  
  150.             border.color: "gray";  
  151.             width: parent.width;  
  152.             height: 2;  
  153.             anchors.bottom: parent.bottom;  
  154.         }  
  155.     }  
  156.   
  157.     APaintedItem {  
  158.         id: painter;  
  159.         anchors.top: options.bottom;  
  160.         anchors.left: parent.left;  
  161.         anchors.right: parent.right;  
  162.         anchors.bottom: parent.bottom;  
  163.     }  
  164. }  


    不必多说了……

颜色选择按钮的实现

    也比较直观,直接上代码了:

[javascript] view plaincopybubuko.com,布布扣bubuko.com,布布扣
  1. import QtQuick 2.2  
  2. import QtQuick.Dialogs 1.0  
  3.   
  4. Rectangle {  
  5.     id: colorPicker;  
  6.     width: 64;  
  7.     height: 60;  
  8.     color: "lightgray";  
  9.     border.width: 2;  
  10.     border.color: "darkgray";  
  11.     property alias text: label.text;  
  12.     property alias textColor: label.color;  
  13.     property alias font: label.font;  
  14.     property alias selectedColor: currentColor.color;  
  15.     property var colorDialog: null;  
  16.   
  17.     signal colorPicked(color clr);  
  18.   
  19.     Rectangle {  
  20.         id: currentColor;  
  21.         anchors.top: parent.top;  
  22.         anchors.topMargin: 4;  
  23.         anchors.horizontalCenter: parent.horizontalCenter;  
  24.         width: parent.width - 12;  
  25.         height: 30;  
  26.     }  
  27.   
  28.     Text {  
  29.         id: label;  
  30.         anchors.bottom: parent.bottom;  
  31.         anchors.bottomMargin: 4;  
  32.         anchors.horizontalCenter: parent.horizontalCenter;  
  33.         font.pointSize: 14;  
  34.         color: "blue";  
  35.     }  
  36.       
  37.     MouseArea {  
  38.         anchors.fill: parent  
  39.         onClicked: if(colorDialog == null){  
  40.             colorDialog = Qt.createQmlObject("import QtQuick 2.2;import QtQuick.Dialogs 1.0; ColorDialog{}",  
  41.                                              colorPicker, "dynamic_color_dialog");  
  42.             colorDialog.accepted.connect(colorPicker.onColorDialogAccepted);  
  43.             colorDialog.rejected.connect(colorPicker.onColorDialogRejected);  
  44.             colorDialog.open();  
  45.         }  
  46.     }  
  47.     function onColorDialogAccepted(){  
  48.         selectedColor = colorDialog.color;  
  49.         colorPicked(colorDialog.color);  
  50.         colorDialog.destroy();  
  51.         colorDialog = null;  
  52.     }  
  53.   
  54.     function onColorDialogRejected(){  
  55.         colorPicked(color);  
  56.         colorDialog.destroy();  
  57.         colorDialog = null;  
  58.     }  


    ColorPicker 内部调用 ColorDialog 来选择颜色。 ColorDialog 是使用 Qt.createQmlObject() 动态创建的,具体用法请参考《Qt Quick 组件与对象动态创建详解》。

    用户选择了一个颜色后,按钮上半部分的矩形的填充颜色会变化,同时也会发出 colorPicked() 信号。如果用户取消选择,则使用默认的颜色。

Qt Quick实现的涂鸦程序

标签:des   style   blog   http   io   ar   color   os   使用   

原文地址:http://www.cnblogs.com/yuyanbian/p/4114545.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!