文章目錄

我們在使用QGraphicsView框架的時候，經常需要自定義QGraphicsItem，並且需要實現Item的平移、改變大小和旋轉的效果。接下來介紹他們的一種實現方式

1. 平移

平移效果如下圖所示：

實現方式有兩種方法：

使用QGraphicsItem本身的移動標誌實現。

this->setFlag(QGraphicsItem::ItemIsMovable, true);

通過重寫鼠標的相關事件實現。

這裏需要重寫下面三個函數：

void mousePressEvent(QGraphicsSceneMouseEvent *event) override;
void mouseMoveEvent(QGraphicsSceneMouseEvent *event) override;
void mouseReleaseEvent(QGraphicsSceneMouseEvent *event) override;

這裏只貼出關鍵部分實現代碼：

void mousePressEvent(QGraphicsSceneMouseEvent *event)
{    
	// 獲取場景座標和本地座標
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();
	
	// 保存當前的一些信息
    m_pos = pos;
    m_pressedPos = scenePos;
    m_startPos = this->pos();
    return QGraphicsItem::mousePressEvent(event);
}

void mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
	// 獲取場景座標和本地座標
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();

	// 計算偏移
	qreal xInterval = scenePos.x() - m_pressedPos.x();
    qreal yInterval = scenePos.y() - m_pressedPos.y();

	// 設置在場景中位置
    this->setPos(m_startPos + QPointF(xInterval, yInterval));
    this->update();
}

這裏 mousePressEvent 中保存了鼠標點擊時的狀態信息，包括鼠標點擊時Item的本地座標，場景座標和該Item所在場景的座標。函數 mouseMoveEvent 中，獲取鼠標移動的場景座標位置計算偏移並設置新的Item的位置，從而實現平移效果。

2. 改變尺寸

改變尺寸效果如下圖所示：

這裏同樣時通過重寫 mousePressEvent 、 mouseMoveEvent 和 mouseReleaseEvent 實現。

關鍵部分代碼如下：

void mousePressEvent(QGraphicsSceneMouseEvent *event)
{    
	// 獲取場景座標和本地座標
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();
	
	// 保存當前的一些信息
    m_pos = pos;
    m_pressedPos = scenePos;
    m_startPos = this->pos();
    return QGraphicsItem::mousePressEvent(event);
}

void UICanvasItemBase::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    // 獲取場景座標和本地座標
    QPointF scenePos = event->scenePos();
    QPointF loacalPos = event->pos();

	// 是否允許改變大小
    if (!m_isResizeable)
        return;
        
    // 是否爲等比例修改大小
	qreal ratio = m_ratioValue;
    qreal itemWidth = abs(loacalPos.x()) * 2 - m_nInterval - m_nEllipseWidth;
    qreal itemHeight = abs(loacalPos.y()) * 2 - m_nInterval - m_nEllipseWidth;
    if (m_isRatioScale)
        itemHeight = itemWidth * 1.0 / ratio;

    // 設置圖片的最小大小爲10
    if (itemWidth < 10 || itemHeight < 10)
        return;

    m_size = QSize(itemWidth, itemHeight);
    this->update();
}

因爲我這裏的繪製的大小主要是通過 m_size ，改變 m_size 就是更改了 QGraphicsItem 的顯示尺寸。本例子中的座標系的中心點就是 m_size 的中心點。因此 itemWidth 的計算值爲表示爲：
qreal itemWidth = abs(loacalPos.x()) * 2 - m_nInterval - m_nEllipseWidth;
loacalPos.x() 爲本地座標系的 x 軸座標， *2 正好爲實際的寬度，這裏的 m_nInterval 和 m_nEllipseWidth 表示圖片和選擇框之間的間距和拖拽手柄的半徑。

3. 旋轉

旋轉效果如下圖所示：

本篇文章講述的旋轉方法步驟如下：

計算上一次鼠標移動和本次鼠標移動位置之間的角度。
計算旋轉的方向。
根據計算的角度和方向，計算真正的選中角度（順時針爲正，逆時針爲負），爲 QGraphicsItem 本身設置變換矩陣。

那麼如何計算角度和方向呢？？

通過向量的點乘，計算角度。單位向量點乘的值，正好爲角度的餘弦。
通過向量的叉乘，計算旋轉的方向。叉乘的結果爲與這兩個向量垂直的向量，可以通過Z軸結果判斷，如果結果爲正表示順時針，結果爲負表示逆時針。

關鍵部分代碼如下：

void mousePressEvent(QGraphicsSceneMouseEvent *event)
{    
	m_transform = this->transform();
	
	// 獲取場景座標和本地座標
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();
	
	// 保存當前的一些信息
    m_pos = pos;
    m_pressedPos = scenePos;
    m_startPos = this->pos();
    return QGraphicsItem::mousePressEvent(event);
}

void UICanvasItemBase::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    // 獲取場景座標和本地座標
    QPointF scenePos = event->scenePos();
    QPointF loacalPos = event->pos();
	
	// 獲取並設置爲單位向量
    QVector2D startVec(m_pos.x() - 0, m_pos.y() - 0);
    startVec.normalize();
    QVector2D endVec(loacalPos.x() - 0, loacalPos.y() - 0);
    endVec.normalize();

    // 單位向量點乘，計算角度
    qreal dotValue = QVector2D::dotProduct(startVec, endVec);
    if (dotValue > 1.0)
        dotValue = 1.0;
    else if (dotValue < -1.0)
        dotValue = -1.0;

    dotValue = qAcos(dotValue);
    if (isnan(dotValue))
        dotValue = 0.0;

    // 獲取角度
    qreal angle = dotValue * 1.0 / (PI / 180);

    // 向量叉乘獲取方向
    QVector3D crossValue = QVector3D::crossProduct( \
    	QVector3D(startVec, 1.0), \
    	QVector3D(endVec, 1.0));
    
    if (crossValue.z() < 0)
        angle = -angle;
    m_rotate += angle;

    // 設置變化矩陣
    m_transform.rotate(m_rotate);
    this->setTransform(m_transform);

    m_pos = loacalPos;
    this->update();
}

函數 normalize 表示轉化爲單位向量。
函數 QVector2D::dotProduct 計算兩個向量的點乘結果。
函數 QVector3D::crossProduct 計算兩個向量的叉乘，這裏需要根據向量的Z值計算選裝的方向，把2D的向量轉化了3D向量作爲函數的輸入。

完整代碼如下：
頭文件

#ifndef UICANVASITEMBASE_H
#define UICANVASITEMBASE_H

#include <QObject>
#include <QGraphicsItem>
#include <QPixmap>
#include <QGraphicsObject>

class UICanvasItemBase : public QObject, public QGraphicsItem
{
    Q_OBJECT

public:
    enum ItemOperator
    {
        t_none,
        t_move,
        t_resize,
        t_rotate
    };

    UICanvasItemBase(QGraphicsItem* parentItem = nullptr);
    ~UICanvasItemBase() override;

    // 設置改變大小相關屬性
    void setItemResizeable(bool resizeable);
    void setItemResizeRatio(bool resizeRation, qreal rationValue);

private:
    // 初始化Icon
    void initIcon(void);

    static QImage m_closeIcon;
    static QImage m_resizeIcon;
    static QImage m_rotateIcon;

    QPixmap m_closePixmap;
    QPixmap m_resizePixmap;
    QPixmap m_rotatePixmap;

    // 設置是否能夠更改尺寸
    bool m_isResizeable = true;
    bool m_isRatioScale = true;
    qreal m_ratioValue = 1.0;

protected:
    QRectF boundingRect() const override;
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) final;
    QPainterPath shape() const override;

    void mousePressEvent(QGraphicsSceneMouseEvent *event) override;
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event) override;
    void mouseReleaseEvent(QGraphicsSceneMouseEvent *event) override;

    QVariant itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value) override;

    // 自定義元素繪製
    virtual void customPaint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);

    QSize m_size;
    ItemOperator m_itemOper = t_none;

    // 獲取自定義繪製所需要的矩形
    QRectF getCustomRect(void) const;

protected:
    // 處理Item上的類型
    virtual void mouseMoveMoveOperator(const QPointF& scenePos, const QPointF& loacalPos);
    virtual void mouseMoveResizeOperator(const QPointF& scenePos, const QPointF& loacalPos);
    virtual void mouseMoveRotateOperator(const QPointF& scenePos, const QPointF& loacalPos);

    QPointF m_pos;              // 本地所座標點擊的點
    QPointF m_pressedPos;       // 場景座標點擊的點
    QPointF m_startPos;         // Item再場景座標的起始座標
    QTransform m_transform;     // 變換矩陣
    qreal m_rotate = 0.0;       // 當前旋轉角度

signals:
    void onClickedCopyItem(void);

private:
    int m_nInterval = 20;
    int m_nEllipseWidth = 12;    // 半徑

    // 畫筆設置
    QColor m_cPenColor;
    int m_nPenWidth = 1;
    // 畫刷設置
    QColor m_cBrushColor;
};
#endif

源文件：

#include "UICanvasItemBase.h"
#include "Utils.h"
#include <QPainter>
#include <QGraphicsSceneMouseEvent>
#include <QDebug>
#include <QGraphicsView>
#include <QGraphicsScene>
#include <QVector2D>
#include <QVector3D>

#define PI 3.14159265358979

QImage UICanvasItemBase::m_closeIcon;
QImage UICanvasItemBase::m_resizeIcon;
QImage UICanvasItemBase::m_rotateIcon;

UICanvasItemBase::UICanvasItemBase(QGraphicsItem* parentItem)
    :QGraphicsItem(parentItem)
    ,m_cPenColor(255, 0, 0)
    ,m_cBrushColor(200, 100, 100)
{
    this->setFlag(QGraphicsItem::ItemIsSelectable, true);

    initIcon();
}

UICanvasItemBase::~UICanvasItemBase()
{

}

void UICanvasItemBase::setItemResizeable(bool resizeable)
{
    m_isResizeable = resizeable;
}

void UICanvasItemBase::setItemResizeRatio(bool resizeRation, qreal rationValue)
{
    m_isRatioScale = resizeRation;
    m_ratioValue = rationValue;
}

QRectF UICanvasItemBase::boundingRect() const
{
    QRectF rectF = getCustomRect();
    if (!this->isSelected())
        return rectF;

    rectF.adjust(-m_nInterval, -m_nInterval, m_nInterval, m_nInterval);
    rectF.adjust(-m_nEllipseWidth, -m_nEllipseWidth, m_nEllipseWidth, m_nEllipseWidth);

    return rectF;
}

void UICanvasItemBase::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    painter->setRenderHint(QPainter::Antialiasing, true);
    painter->setRenderHint(QPainter::SmoothPixmapTransform, true);
    painter->setRenderHint(QPainter::TextAntialiasing, true);

    // 自定義繪製
    customPaint(painter, option, widget);

    if (!this->isSelected())
        return;

    // 設置畫筆
    QPen pen;
    pen.setWidth(m_nPenWidth);
    pen.setColor(m_cPenColor);
    pen.setStyle(Qt::DashLine);
    painter->setPen(pen);

    QRectF itemRect = this->getCustomRect();

    // 繪製輪廓線
    QRectF outLintRect = itemRect.adjusted(-m_nInterval, -m_nInterval, m_nInterval, m_nInterval);
    painter->drawRect(outLintRect);

    painter->setPen(Qt::NoPen);
    painter->setBrush(m_cBrushColor);

    // 繪製控制點
    painter->drawEllipse(outLintRect.topRight(), m_nEllipseWidth, m_nEllipseWidth);
    if (!m_closePixmap.isNull())
        painter->drawPixmap(QRect(outLintRect.topRight().x() - m_nEllipseWidth / 2, \
                                  outLintRect.topRight().y() - m_nEllipseWidth / 2, \
                                  m_nEllipseWidth, m_nEllipseWidth), m_closePixmap);

    painter->drawEllipse(outLintRect.bottomLeft(), m_nEllipseWidth, m_nEllipseWidth);
    if (!m_rotatePixmap.isNull())
        painter->drawPixmap(QRect(outLintRect.bottomLeft().x() - m_nEllipseWidth / 2, \
                                  outLintRect.bottomLeft().y() - m_nEllipseWidth / 2, \
                                  m_nEllipseWidth, m_nEllipseWidth), m_rotatePixmap);

    painter->drawEllipse(outLintRect.bottomRight(), m_nEllipseWidth, m_nEllipseWidth);
    if (!m_resizePixmap.isNull())
        painter->drawPixmap(QRect(outLintRect.bottomRight().x() - m_nEllipseWidth / 2, \
                                  outLintRect.bottomRight().y() - m_nEllipseWidth / 2, \
                                  m_nEllipseWidth, m_nEllipseWidth), m_resizePixmap);
}

QPainterPath UICanvasItemBase::shape() const
{
    QPainterPath path;
    path.addRect(boundingRect());

    return path;
}

void UICanvasItemBase::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    m_transform = this->transform();

    QRectF itemRect = this->getCustomRect();
    QRectF outLintRect = itemRect.adjusted(-m_nInterval, -m_nInterval, m_nInterval, m_nInterval);

    // 獲取當前模式
    QPointF pos = event->pos();
    QPointF scenePos = event->scenePos();
    if (itemRect.contains(pos))
        m_itemOper = t_move;
    else if (g_utilTool->getDistance(pos, outLintRect.topRight()) <= m_nEllipseWidth)
        emit onClickedCopyItem();
    else if (g_utilTool->getDistance(pos, outLintRect.bottomLeft()) <= m_nEllipseWidth)
        m_itemOper = t_rotate;
    else if (g_utilTool->getDistance(pos, outLintRect.bottomRight()) <= m_nEllipseWidth)
        m_itemOper = t_resize;

    // 保存當前的一些信息
    m_pos = pos;
    m_pressedPos = scenePos;
    m_startPos = this->pos();
    return QGraphicsItem::mousePressEvent(event);
}

void UICanvasItemBase::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    // 獲取場景座標和本地座標
    QPointF scenePos = event->scenePos();
    QPointF pos = event->pos();

    if (m_itemOper == t_move)
    {
        // 處理移動
        mouseMoveMoveOperator(scenePos, pos);
    }
    else if (m_itemOper == t_resize)
    {
        // 處理更改大小
        mouseMoveResizeOperator(scenePos, pos);
    }
    else if (m_itemOper == t_rotate)
    {
        // 處理旋轉
        mouseMoveRotateOperator(scenePos, pos);
    }

    return QGraphicsItem::mouseMoveEvent(event);
}

void UICanvasItemBase::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
{
    m_itemOper = t_none;
    return QGraphicsItem::mouseReleaseEvent(event);
}

QVariant UICanvasItemBase::itemChange(QGraphicsItem::GraphicsItemChange change, const QVariant &value)
{
    if (change == QGraphicsItem::ItemSelectedChange)
        prepareGeometryChange();

    return QGraphicsItem::itemChange(change, value);
}

void UICanvasItemBase::mouseMoveMoveOperator(const QPointF& scenePos, const QPointF& loacalPos)
{
    qreal xInterval = scenePos.x() - m_pressedPos.x();
    qreal yInterval = scenePos.y() - m_pressedPos.y();

    this->setPos(m_startPos + QPointF(xInterval, yInterval));
    this->update();
}

void UICanvasItemBase::mouseMoveResizeOperator(const QPointF& scenePos, const QPointF& loacalPos)
{
    if (!m_isResizeable)
        return;

    qreal ratio = m_ratioValue;
    qreal itemWidth = abs(loacalPos.x()) * 2 - m_nInterval - m_nEllipseWidth;
    qreal itemHeight = abs(loacalPos.y()) * 2 - m_nInterval - m_nEllipseWidth;
    if (m_isRatioScale)
        itemHeight = itemWidth * 1.0 / ratio;

    // 設置圖片的最小大小爲10
    if (itemWidth < 10 || itemHeight < 10)
        return;

    m_size = QSize(itemWidth, itemHeight);
    this->update();
}

void UICanvasItemBase::mouseMoveRotateOperator(const QPointF& scenePos, const QPointF& loacalPos)
{
    // 獲取並設置爲單位向量
    QVector2D startVec(m_pos.x() - 0, m_pos.y() - 0);
    startVec.normalize();
    QVector2D endVec(loacalPos.x() - 0, loacalPos.y() - 0);
    endVec.normalize();

    // 單位向量點乘，計算角度
    qreal dotValue = QVector2D::dotProduct(startVec, endVec);
    if (dotValue > 1.0)
        dotValue = 1.0;
    else if (dotValue < -1.0)
        dotValue = -1.0;

    dotValue = qAcos(dotValue);
    if (isnan(dotValue))
        dotValue = 0.0;

    // 獲取角度
    qreal angle = dotValue * 1.0 / (PI / 180);

    // 向量叉乘獲取方向
    QVector3D crossValue = QVector3D::crossProduct(QVector3D(startVec, 1.0),QVector3D(endVec, 1.0));
    if (crossValue.z() < 0)
        angle = -angle;
    m_rotate += angle;

    // 設置變化矩陣
    m_transform.rotate(m_rotate);
    this->setTransform(m_transform);

    m_pos = loacalPos;
    this->update();
}

void UICanvasItemBase::customPaint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{

}

QRectF UICanvasItemBase::getCustomRect(void) const
{
    QPointF centerPos(0, 0);
    return QRectF(centerPos.x() - m_size.width() / 2, centerPos.y() - m_size.height() / 2, \
                  m_size.width(), m_size.height());
}

void UICanvasItemBase::initIcon(void)
{
    if (m_closeIcon.isNull())
        m_closeIcon.load("./Images/close.png");
    if (m_resizeIcon.isNull())
        m_resizeIcon.load("./Images/resize.png");
    if (m_rotateIcon.isNull())
        m_rotateIcon.load("./Images/rotate.png");

    m_closePixmap = QPixmap::fromImage(m_closeIcon);
    m_resizePixmap = QPixmap::fromImage(m_resizeIcon);
    m_rotatePixmap = QPixmap::fromImage(m_rotateIcon);
}

函數 mouseMoveMoveOperator 、 mouseMoveResizeOperator 、 mouseMoveRotateOperator 就是平移、改變尺寸、旋轉的處理函數

作者：douzhq
個人主頁：不會飛的紙飛機

自定義QGraphicsItem實現平移、改變尺寸和旋轉

文章目錄

1. 平移

2. 改變尺寸

3. 旋轉

工作中用到的腳本合集

微服務實踐Aspire項目發佈到遠程k8s集羣

通過f-string編寫簡潔高效的Python格式化輸出代碼

[轉帖]20個常用的Linux工具命令

[轉帖]PostgreSQL從小白到高手教程 - 第46講：poc-tpch測試

24-5-18 X

Qt中的模態、非模態、半模態對話框

基於QGraphicsView的簡易畫板EasyCanvas -- 第一版

c++11學習筆記（8）- 可變參數宏、函數、模板

使用Qt QJSEngine實現JavaScript與C++混合編程

QtConcurrent多線程 - run()與QFuture

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結