簡述

在圖形檢視框架中，QGraphicsScene 提供一個快速的介面，用於管理大量 item，QGraphicsItem 是場景中 item 的基類。

圖形檢視提供了一些典型形狀的標準 item，當然，我們也可以自定義 item。除此之外，QGraphicsItem 還支援以下特性：

• 滑鼠按下、移動、釋放和雙擊事件，以及滑鼠懸浮事件、滾輪事件和上下文選單事件
• 鍵盤輸入焦點和鍵盤事件
• 拖放
• 分組：通過父子關係，或 QGraphicsItemGroup
• 碰撞檢測

下面，一起來看看 QGraphicsScene 對 QGraphicsItem 的管理，主要包括：單擊、選擇、移動、縮放、刪除等。

|

操作細節

為了實現以上功能，我們主要實現了 QGraphicsScene 和 QGraphicsItem 對應的事件，通過滑鼠和鍵盤來操作。

操作細節主要包括：

• 選擇：點選左鍵、按 Shift 鍵可以單選，按下 Ctrl 可進行多選。
• 新增：點選左鍵
• 刪除：點選右鍵，刪除滑鼠下的 item；當按下 Ctrl 選擇多個 items 時，按下 Backspace 鍵，將選中的全部刪除。
• 移動：點選左鍵，選擇 item，然後移動滑鼠；當按下 Ctrl 選擇多個 items 時，可以移動選中的 items。
• 縮放：按 Alt 鍵，然後滑鼠拖拽 item 的邊界。

在對應操作的事件中，我們輸出了一些除錯資訊，以便跟蹤。

示例

效果

原始碼

custom_item.h：

#ifndef CUSTOM_ITEM_H
#define CUSTOM_ITEM_H

#include <QGraphicsRectItem>
#include <QGraphicsScene>

//QGraphicsScene管理QGraphicsItem（單擊/選擇/移動/縮放/刪除）
// 自定義 Item
class CustomItem : public QGraphicsRectItem
{
public:
    explicit CustomItem(QGraphicsItem *parent = 0
 
);
protected:
    // Shift+左鍵：進行選擇  Alt：準備縮放
    void mousePressEvent(QGraphicsSceneMouseEvent *event);
    // Alt+拖拽：進行縮放  移動
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event);
    void mouseReleaseEvent(QGraphicsSceneMouseEvent *event);
    // 使item可使用qgraphicsitem_cast
    int type() const;
private:
    QPointF m_centerPointF;
    bool m_bResizing;
};

// 自定義 Scene
class CustomScene : public QGraphicsScene
{
protected:
    // 左鍵：新增item  右鍵：移除item
    void mousePressEvent(QGraphicsSceneMouseEvent *event);
    void mouseMoveEvent(QGraphicsSceneMouseEvent *event);
    // Backspace鍵移除item
    void keyPressEvent(QKeyEvent *event);
};

#endif // CUSTOM_ITEM_H

custom_item.cpp：

#include <QKeyEvent>
#include <QGraphicsSceneMouseEvent>
#include <QDebug>
#include "custom_item.h"

// 自定義 Item
CustomItem::CustomItem(QGraphicsItem *parent)
    : QGraphicsRectItem(parent)
{
    // 畫筆 - 邊框色
    QPen p = pen();
    p.setWidth(2);
    p.setColor(QColor(0, 160, 230));

    setPen(p);
    // 畫刷 - 背景色
    setBrush(QColor(247, 160, 57));

    // 可選擇、可移動
    setFlags(QGraphicsItem::ItemIsSelectable | QGraphicsItem::ItemIsMovable);
}

void CustomItem::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    if (event->button() == Qt::LeftButton) {
        if (event->modifiers() == Qt::ShiftModifier) {
            qDebug() << "Custom item left clicked with shift key.";
            // 選中 item
            setSelected(true);
        } else if (event->modifiers() == Qt::AltModifier) {
            qDebug() << "Custom item left clicked with alt key.";
            // 重置 item 大小
            double radius = boundingRect().width() / 2.0;
            QPointF topLeft = boundingRect().topLeft();
            m_centerPointF = QPointF(topLeft.x() + pos().x() + radius, topLeft.y() + pos().y() + radius);
            QPointF pos = event->scenePos();
            qDebug() << boundingRect() << radius << this->pos() << pos << event->pos();
            double dist = sqrt(pow(m_centerPointF.x()-pos.x(), 2) + pow(m_centerPointF.y()-pos.y(), 2));
            if (dist / radius > 0.8) {
                qDebug() << dist << radius << dist / radius;
                m_bResizing = true;
            } else {
                m_bResizing = false;
            }
        } else {
            qDebug() << "Custom item left clicked.";
            QGraphicsItem::mousePressEvent(event);
            event->accept();
        }
    } else if (event->button() == Qt::RightButton) {
        qDebug() << "Custom item right clicked.";
        event->ignore();
    }
}

void CustomItem::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    if ((event->modifiers() == Qt::AltModifier) && m_bResizing) {
        QPointF pos = event->scenePos();
        double dist = sqrt(pow(m_centerPointF.x()-pos.x(), 2) + pow(m_centerPointF.y()-pos.y(), 2));
        setRect(m_centerPointF.x()-this->pos().x()-dist, m_centerPointF.y()-this->pos().y()-dist, dist*2, dist*2);
    } else if(event->modifiers() != Qt::AltModifier) {
        qDebug() << "Custom item moved.";
        QGraphicsItem::mouseMoveEvent(event);
        qDebug() << "moved" << pos();
    }
}

void CustomItem::mouseReleaseEvent(QGraphicsSceneMouseEvent *event)
{
    if ((event->modifiers() == Qt::AltModifier) && m_bResizing) {
        m_bResizing = false;
    } else {
        QGraphicsItem::mouseReleaseEvent(event);
    }
}

int CustomItem::type() const
{
    return UserType + 1;
}

// 自定義 Scene
void CustomScene::mousePressEvent(QGraphicsSceneMouseEvent *event)
{
    qDebug() << "Custom scene clicked.";
    QGraphicsScene::mousePressEvent(event);
    if (!event->isAccepted()) {
        if (event->button() == Qt::LeftButton) {
            // 在 Scene 上新增一個自定義 item
            QPointF point = event->scenePos();
            CustomItem *item = new CustomItem();
            item->setRect(point.x()-25, point.y()-25, 60, 60);
            addItem(item);
        } else if (event->button() == Qt::RightButton) {
            // 檢測游標下是否有 item
            QGraphicsItem *itemToRemove = NULL;
            foreach (QGraphicsItem *item, items(event->scenePos())) {
                if (item->type() == QGraphicsItem::UserType+1) {
                    itemToRemove = item;
                    break;
                }
            }
            // 從 Scene 上移除 item
            if (itemToRemove != NULL)
                removeItem(itemToRemove);
        }
    }
}

void CustomScene::mouseMoveEvent(QGraphicsSceneMouseEvent *event)
{
    qDebug() << "Custom scene moved.";
    QGraphicsScene::mouseMoveEvent(event);
}

void CustomScene::keyPressEvent(QKeyEvent *event) {
    if (event->key() == Qt::Key_Backspace) {
        // 移除所有選中的 items
        qDebug() << "selected items " << selectedItems().size();
        while (!selectedItems().isEmpty()) {
            removeItem(selectedItems().front());
        }
    } else {
        QGraphicsScene::keyPressEvent(event);
    }
}

使用很簡單，將 item 新增至 scene 中，通過 view 顯示即可。

#include <QApplication>
#include <QGraphicsView>
#include "custom_item.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    // 建立 item
    CustomItem *pItem = new CustomItem();
    pItem->setRect(20, 20, 60, 60);

    // 將 item 新增至場景中
    CustomScene scene;
    scene.setSceneRect(0, 0, 400, 300);
    scene.addItem(pItem);

    // 為檢視設定場景
    QGraphicsView view;
    view.setScene(&scene);
    view.show();

    return a.exec();
}