QML中繪圖（1、Canvas 2、QPainter與QML結合）

QML中的Canvas和HTML5中Canvas是一樣的，可以參考W3CSchool中的學習方法：HTML 5 Canvas 參考手冊

畫線、刪除線、刪除全部實例：

不過，QML中的Canvas不夠強大，畫線會卡。我們用QPainter來實現畫線，用QML來顯示就好了，

方式如下：

1、先做好QPainter畫線，做我們的類ALPaintedItem：

（1）頭文件

#ifndef ALPAINTEDITEM_H
#define ALPAINTEDITEM_H
#include
#include
#include
#include
#include
#include
#include
#include
#include
class ALPaintedItem : public QQuickPaintedItem
{
Q_OBJECT
Q_PROPERTY(int penWidth READ penWidth WRITE setPenWidth)
Q_PROPERTY(QColor penColor READ penColor WRITE setPenColor)
Q_PROPERTY(bool erasered READ isErasered WRITE setErasered)
public:
ALPaintedItem(QQuickItem *parent = 0);
~ALPaintedItem();
int penWidth() const { return m_penWidth; }
void setPenWidth(int width) { m_penWidth = width; }
QColor penColor() const { return m_brushColor; }
void setPenColor(QColor color) { m_brushColor = color; }
bool isErasered() const{ return m_bErasered; }
void setErasered(bool erasered){ m_bErasered = erasered; }
void paint(QPainter *painter);
Q_INVOKABLE void init();
Q_INVOKABLE void clear();
protected:
void mousePressEvent(QMouseEvent *event);
void mouseMoveEvent(QMouseEvent *event);
void mouseReleaseEvent(QMouseEvent *event);
private:
void drawTmpLine();
void drawBgLine(const QPainterPath &path);
void drawPenStyle(QPainter *painter);
private:
QImage m_bgImage;
QImage m_tempImage;
QColor m_brushColor;
QColor m_eraserColor;
QPointF m_nowPoint;
QPointF m_lastPoint;
QPainterPath *m_pDrawPath;
int m_penWidth;
bool m_bFlag;
bool m_bErasered;
};

#endif // ALPAINTEDITEM_H

（2）源文件

#include “alpainteditem.h”
ALPaintedItem::ALPaintedItem(QQuickItem *parent)
: QQuickPaintedItem(parent),
m_brushColor(QColor(0, 0, 0 ,255)),
m_eraserColor(QColor(255,255,255,255)),
m_bFlag(true),
m_bErasered(false),
m_pDrawPath(NULL),
m_penWidth(NULL)
{
setAcceptedMouseButtons(Qt::LeftButton);
}

ALPaintedItem::~ALPaintedItem()
{
}

void ALPaintedItem::paint(QPainter *painter)
{
if(m_bFlag)
painter->drawImage(QRectF(0,0,m_bgImage.width(),m_bgImage.height()),m_bgImage);
else
{
painter->drawImage(QRectF(0,0,m_tempImage.width(),m_tempImage.height()),m_tempImage);
painter->drawImage(QRectF(0,0,m_bgImage.width(),m_bgImage.height()),m_bgImage);
}
}

void ALPaintedItem::init()
{
m_bgImage = QImage(this->width(),this->height(),QImage::Format_ARGB32);
m_tempImage = QImage(this->width(),this->height(),QImage::Format_ARGB32);
m_bgImage.fill(QColor(255,255,255,0));
m_tempImage.fill(QColor(255,255,255,0));
}

void ALPaintedItem::clear()
{
m_bgImage.fill(QColor(255,255,255,0));
m_tempImage.fill(QColor(255,255,255,0));
update();
}

void ALPaintedItem::mousePressEvent(QMouseEvent *event)
{
if(!(event->button() & acceptedMouseButtons()))
{
QQuickPaintedItem::mousePressEvent(event);
}
else{
if(m_pDrawPath == NULL)
{
m_pDrawPath = new QPainterPath();
}
m_pDrawPath->moveTo(event->localPos());
m_nowPoint = event->localPos();
}
}

void ALPaintedItem::mouseMoveEvent(QMouseEvent *event)
{
m_lastPoint = m_nowPoint;
m_nowPoint = event->localPos();
QPointF tmpPoint = m_nowPoint - m_lastPoint;
if(m_pDrawPath == NULL)
{
return;
}
if(qAbs(tmpPoint.x()) > 0 || qAbs(tmpPoint.y()) >0)
{
m_pDrawPath->quadTo(m_lastPoint.x() , m_lastPoint.y() ,(m_nowPoint.x() + m_lastPoint.x())/2,(m_nowPoint.y() + m_lastPoint.y())/2);
m_bFlag = false;
if(m_bErasered)
drawBgLine(*m_pDrawPath);
else
drawTmpLine(); // 臨時畫
}
QQuickPaintedItem::mouseMoveEvent(event);
}

void ALPaintedItem::mouseReleaseEvent(QMouseEvent *event)
{
if(!(event->button() & acceptedMouseButtons()))
{
QQuickPaintedItem::mousePressEvent(event);
}
else{
if(m_pDrawPath != NULL)
{
m_bFlag = true;
drawBgLine(*m_pDrawPath);
delete m_pDrawPath;
m_pDrawPath = NULL;
}
}
}

void ALPaintedItem::drawTmpLine()
{
QPainter painter(&m_tempImage);
drawPenStyle(&painter);
painter.drawLine(m_lastPoint,m_nowPoint);
qreal rad = this->width()/375.0*170;//點周圍範圍值
qDebug() << “rad:” << rad;
QRect rect = QRect(m_nowPoint.x() - 5, m_nowPoint.y() - 5,10,10);
update(rect.adjusted(-rad,-rad,+rad,+rad));
}

void ALPaintedItem::drawBgLine(const QPainterPath &path)
{
QPainter painter(&m_bgImage);
drawPenStyle(&painter);
painter.drawPath(path);
m_tempImage.fill(QColor(255,255,255,0));
update();
}

void ALPaintedItem::drawPenStyle(QPainter painter)
{
painter->setRenderHint(QPainter::Antialiasing);
QBrush brush(m_brushColor, Qt::SolidPattern);
if(m_bErasered)
{
painter->setCompositionMode(QPainter::CompositionMode_Clear);
painter->setPen(QPen(brush, 5m_penWidth, Qt::SolidLine, Qt::RoundCap,Qt::RoundJoin));
}
else
{
painter->setCompositionMode(QPainter::CompositionMode_SourceOver);
painter->setPen(QPen(brush, m_penWidth, Qt::SolidLine, Qt::RoundCap,Qt::RoundJoin));
}
painter->setBrush(Qt::NoBrush);
}

2、註冊這個類

qmlRegisterType<ALPaintedItem>("ALPaintedItem", 1, 0, "ALPaintedItem");

3、QML中調用

import QtQuick 2.5
import ALPaintedItem 1.0

Rectangle {
id:photoMarkedRoot
color: “transparent”
property alias painter: painter

Component.onCompleted: {
    painter.penWidth = initHeight/647.0*3
    painter.penColor = "red"
    painter.init()
}

ALPaintedItem {
    id: painter;
    width: photoMarkedRoot.width
    height: photoMarkedRoot.height
    onWidthChanged: {
        painter.init()
    }
    onHeightChanged: {
        painter.init()
    }
}

}

原文鏈接：https://blog.csdn.net/u014597198/article/details/52415858