Qt 基础组件速学 图像处理篇Graphics

学习目标： graphice基本操作

前置环境

运行环境:qt creator 4.12

学习内容：

1.视图管理场景 场景管理图元    视图 > 场景 > 图元   

1. 场景 QGraphicsScene 类:

   • 可以理解为一个"图片资源管理者"。
   • 它负责管理场景中的各种图形元素(图片、形状等),包括它们的位置、大小、层次关系等。
   • 就像一个相册或相框,用于"装载"和管理各种图形资源。

2. 视图 QGraphicsView 类:

   • 可以理解为"图片资源管理者的展现方式"。
   • 它负责将场景中的图形资源渲染并显示在自己的窗口中。
   • 就像一个相框或显示器,用于将管理好的图形资源展现给用户。

3. 图元 QGraphicsItem 类:

   • 可以理解为"封装后的图片资源"。
   • 它是场景中的基本图形单元,可以是图片、形状、文本等各种视觉元素。
   • 就像一张张被"封装"好的图片,可以添加到场景中进行管理和显示。

#include<QGraphicsScene>  //场景
#include<QGraphicsView>        //视图
#include<QGraphicsItem> //图元
#include<QSlider>                //滑块控件
#include<QGroupBox>     

开发目标

 

详细主要代码和运行测试

ui界面主要代码 

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    setWindowTitle("GraphicsView图形视图架构--应用程序测试");
    angle=3;
    scale=3;
    lean=3;

    Widget::setGrraphics();
}
void Widget::setGrraphics(){ //ui界面布局
    QPixmap * p = new QPixmap("C:\\IMG_5039.JPG");
    pix =new pixmapItem(p);
    pix->setPos(0,0);

    QGraphicsScene* sence =new QGraphicsScene;
    sence->setSceneRect(-200,-200,380,380);
    sence->addItem(pix);

    view = new QGraphicsView;
    view->setScene(sence);
    view->setMinimumSize(600,400);

    frame = new QFrame;
    Widget::setGrraphicsRight();

    QHBoxLayout* h =new QHBoxLayout(this);
    h->addWidget(view);
    h->addWidget(frame);

    setLayout(h);
}
void Widget::setGrraphicsRight(){
    QSlider* rotate =new QSlider;
    rotate->setOrientation(Qt::Horizontal);
    rotate->setRange(0,360);
    QHBoxLayout *hrotate=new QHBoxLayout;
    hrotate->addWidget(rotate);
    QGroupBox *rotategroup=new QGroupBox("图形旋转");
    rotategroup->setLayout(hrotate);

    QSlider* scale =new QSlider;
    scale->setOrientation(Qt::Horizontal);
    scale->setRange(0,2*this->scale);
    scale->setValue(this->scale);
    QHBoxLayout *hscale=new QHBoxLayout;
    hscale->addWidget(scale);
    QGroupBox *gscale=new QGroupBox("图形缩放");
    gscale->setLayout(hscale);

    QSlider* lean =new QSlider;
    lean->setOrientation(Qt::Horizontal);
    lean->setRange(0,2*this->lean);
    lean->setValue(this->lean);
    QHBoxLayout *hlean=new QHBoxLayout;
    hlean->addWidget(lean);
    QGroupBox *glean=new QGroupBox("图形倾斜");
    glean->setLayout(hlean);


    QVBoxLayout* v =new QVBoxLayout(this);
    v->addWidget(rotategroup);
    v->addWidget(gscale);
    v->addWidget(glean);

    frame->setLayout(v);
    
    //赋予功能
    connect(rotate,QOverload<int>::of(&QSlider::valueChanged),this,[this](int values){
        view->rotate(values - this->angle);
        angle=values;
    });

    connect(scale,QOverload<int>::of(&QSlider::valueChanged),this,[this](int values){
        qreal qs;
        if(values > this->scale){
            qs = pow(1.1,(values-this->scale));
        }else{
            qs = pow(1/1.1,(this->scale - values));
        }
        view->scale(qs,qs);
        this->scale=values;
    });

    connect(lean,QOverload<int>::of(&QSlider::valueChanged),this,[this](int values){
        view->shear((values-this->lean)/2.0,0);
        this->lean=values;
    });
}

图元类的封装

class pixmapItem : public QGraphicsItem
{
public:
    pixmapItem(QPixmap* p){
        pix=*p;
    }
private:
    QPixmap pix;
public:
    //返回图元的外接矩形,也就是图元所占据的区域大小  返回一个较大的矩形
    QRectF boundingRect() const override{
        //x y w h
        return QRectF(-2-pix.width()/2,-2-pix.height()/2,pix.width()+4,pix.height()+4);
    }
    //绘制图元的内容
    void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget = nullptr) override{
        painter->drawPixmap(-pix.width()/2,-pix.height()/2,pix);//x y w h
    }
};

总结：

图元 场景 视图三者之间的关系

最后附上源代码链接

对您有帮助的话，帮忙点个star

20-QGraphics · jbjnb/Qt demo - 码云 - 开源中国 (gitee.com)