Qt QGraphicsItem 带有子图标的图形示例

简介

Graphics View是Qt强大的（图形视图〉框架结构，

Graphics View 框架结构的主要特点如下。
( 1 ) Graphics View 框架结构中，系统可以利用Qt 绘图系统的反锯齿、OpenGL工具来改善绘图性能。
( 2 ) Graphics View 支持事件传播体系结构，可以使图元在场景（ scene ）中的交互能力提高一倍，图元能够处理键盘事件和鼠标事件。其中，鼠标事件包括鼠标按下、移动、释放和双击，还可以跟踪鼠标的移动。
( 3 ）在Graphics View 框架中，通过二元空间划分树（ Binary Space Partitioning， BSP ）提供快速的图元查找，这样就能够实时地显示包含上百万个图元的大场景。

Graphics View 框架结构主要包含三个类，场景类（ QGraphicsScene ）、视图类(QGraphicsView ）和图元类(QGraphicsltem ），统称为“ 三元素”。

可交互的图形子项示例

本文介绍了一个用Qt QGraphicsItem作为基类实现的带有子图标的图形项，子图标可以独立响应鼠标悬浮事件和鼠标点击事件，该方法可用于设计具有复杂UI响应的图标。

实例化一个QGraphicsItem的子类HoverChangeButton

其中QGraphicsItem类作为图形项，都通过paint()方法去绘制自身

class HoverChangeButton : public QGraphicsItem
{
public:
    HoverChangeButton();
protected:
    void paint(QPainter* painter,const QStyleOptionGraphicsItem* option,QWidget *widget);
    QRectF boundingRect() const override;
    void hoverEnterEvent(QGraphicsSceneHoverEvent* event) override;
    void hoverMoveEvent(QGraphicsSceneHoverEvent* event) override;
    void mouseReleaseEvent(QGraphicsSceneMouseEvent* event) override;
private:
    void drawRunButton(QPainter* painter);
private:
    QPolygonF runButton_;

    bool isActivated_=false;
};

 绘制主要是绘制边框和底色，以及按钮上的子项

void HoverChangeButton::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
    QRectF rect=this->boundingRect();
    rect.adjust(5,5,-5,-5);

    painter->setBrush(QColor(200,200,210));
    painter->drawRoundRect(rect,15,20);


    this->drawRunButton(painter);
}

 绘制按钮上的子项是通过drawPolygon方法实现，其中为了在交互上能够更改颜色，就设置一个标记值isActivated_，通过它来标记应该采用的颜色值。

void HoverChangeButton::drawRunButton(QPainter *painter)
{
    if(isActivated_)
        painter->setBrush(Qt::green);
    else
        painter->setBrush(Qt::yellow);
    painter->drawPolygon(runButton_);
}

 鼠标移动到按钮上时，鼠标指针形状需要改变，这个通过hoverEnterEvent和hoverMoveEvent来控制鼠标形状。

void HoverChangeButton::hoverEnterEvent(QGraphicsSceneHoverEvent *event)
{
    this->setCursor(Qt::SizeAllCursor);
    QGraphicsItem::hoverEnterEvent(event);
}

void HoverChangeButton::hoverMoveEvent(QGraphicsSceneHoverEvent *event)
{
    if(runButton_.containsPoint(event->pos(),Qt::WindingFill))
    {
        isActivated_=true;
        update(runButton_.boundingRect());
        setCursor(Qt::PointingHandCursor);
    }
    else
    {
        isActivated_=false;
        update(runButton_.boundingRect());
        setCursor(Qt::SizeAllCursor);

    }
    QGraphicsItem::hoverMoveEvent(event);
}

程序目录

HoverChangeButton.h/HoverChangeButton.cpp是该图形类

main.cpp用于在 QGraphicsScene/ QGraphicsView中对该图标功能进行测试

效果展示

 以上图从左到右分别为鼠标未悬浮，鼠标悬浮，鼠标单击后的效果

总结

通过继承QGraphicsItem并且重写部分鼠标响应函数，实现图形上的子图标响应鼠标事件。

示例资源

下面给出一个实现上更加丰富的示例

QGraphicsView-QGraphicsScene支持一个场景绑定多个视图

以下用例绑定两个视图，在操作任意一个视图中的对象时，另外视图中行为保持同步

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
{
    this->resize(500,500);
    QSplitter* splitter = new QSplitter;
    QGraphicsView* view1=new QGraphicsView;
    QGraphicsView* view2=new QGraphicsView;
    QGraphicsScene* scene=new QGraphicsScene;
    HoverChangeButton* btn=new HoverChangeButton;
    btn->setPos(100,100);
    scene->addItem(btn);

    view1->setScene(scene);
    view2->setScene(scene);

    splitter->setOrientation(Qt::Horizontal);
    splitter->addWidget(view1);
    splitter->addWidget(view2);
    this->setCentralWidget(splitter);
}

 

 

源码获取

链接：https://pan.baidu.com/s/1BjsqdAqmrcXQi6SycOLtAw?pwd=ptty 
提取码：ptty

链接：https://pan.baidu.com/s/1_2l4HCb3RbZDgvAa3HLP_w?pwd=ptty 
提取码：ptty