zoukankan      html  css  js  c++  java
  • Qt中添加背景图片的方法

    工作似乎走上正轨了,上周五的工作是做一个界面,用到QFrame和QPushButton,QFrame做主面板,QPushButton为其子控件,需要在主面板上贴背景图片,还需要在QPushButton上贴上相应的图标,弄了一天,再加上今天一小会,终于有一点点结果了

    通过从Google上搜索各种方法(现在才知道Google比Baidu强大很多啊),最后都试了一些,主要有下面几种方法:
    1. QPalette的方法

    #include <QApplication>
    #include <QtGui>

    int main(int argc, char *argv[])
    {
        QApplication app(argc,argv);
        
        QFrame *frame = new QFrame;
        frame->resize(400,700);
        QPixmap pixmap("images/frame.png");
        QPalette   palette;
        palette.setBrush(frame->backgroundRole(),QBrush(pixmap));
        frame->setPalette(palette);
        frame->setMask(pixmap.mask());  //可以将图片中透明部分显示为透明的
        frame->setAutoFillBackground(true);
        frame->show();

        return app.exec();
    }

    注意图片路径怎么表示,我的图片放在该工程下的images文件夹中。
    存在问题:图片可以显示出来,但是图片大小不能和frame大小一致,显示效果不好,具体怎样调整大小,以后再补充,效果如下(设置了透明的,好像很漂亮~透明部分将我的桌面显示出来了~_~):


    2.setStyleSheet方法(非常好用的方法)

    #include <QApplication>
    #include <QtGui>

    int main(int argc, char *argv[])
    {
        QApplication app(argc,argv);
        QFrame *frame = new QFrame;
        frame->setObjectName("myframe");
        frame->resize(400,700);
        frame->setStyleSheet("QFrame#myframe{border-image:url(images/frame.png)}" );
        frame->show();

        return app.exec();
    }

    效果如下:

    注意:很漂亮的效果吧~~注意代码中红线的部分噢,设置ObjectName后,才能保证setStyleSheet只作用在我们的frame上,不影响其子控件的背景设置。之所以用border-image而不用background-image,还是上面的问题,用background-image不能保证图片大小和控件大小一致,图片不能完全显示,这个以后再补充了,现在还没有找到方法。

    3.paintEvent事件方法

    //myframe.h文件
    #ifndef MYFRAME_H
    #define MYFRAME_H

    #include <QWidget>
    #include <QtGui>

    class MyFrame : public QWidget
    {
    public:
        MyFrame();
        void paintEvent(QPaintEvent *event);
    };

    #endif // MYFRAME_H

    //myframe.cpp文件
    #include "myframe.h"

    MyFrame::MyFrame()
    {
    }

    void MyFrame::paintEvent(QPaintEvent *event)
    {
        QPainter painter(this);
        painter.drawPixmap(0,0,400,700,QPixmap("images/frame.png"));
    }

    //main.cpp文件
    #include <QApplication>
    #include <QtGui>

    #include "myframe.h"

    int main(int argc, char *argv[])
    {
        QApplication app(argc,argv);
        
        MyFrame *frame = new MyFrame;
        frame->resize(400,700);
        frame->show();

        return app.exec();
    }

    效果如下:

    注:跟前面一样的效果吧,与前面的差别就是这个背景图片不随着窗口的大小而变化,因为它的固定大小被设置成(400,700)了。重写QWidget的paintEvent事件,当控件发生重绘事件,比如show()时,系统就会自动调用paintEvent函数。


    好了,上面是三种设置背景图片的方法,下面我要说一个设置QPushButton的背景图片的方法,用的是setIcon方法(其实QPushButton设置背景图片也可以用前面三种方法的,不过现在这种Icon方法的看起来也不错)

    #include <QApplication>
    #include <QtGui>

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

        QFrame *frame = new QFrame;
        QPushButton * button0 = new QPushButton(frame);
        QPushButton * button1 = new QPushButton(frame);
        QPushButton * button2 = new QPushButton(frame);
        QPushButton * button3 = new QPushButton(frame);
        QPushButton * button4 = new QPushButton(frame);
        QPushButton * button5 = new QPushButton(frame);

        frame->setObjectName("myframe");
        frame->resize(400,700);
        frame->setStyleSheet("QFrame#myframe{border-image:url(images/frame.png)}" );

        button0->setGeometry(60,150,68,68);
        button1->setGeometry(160,150,68,68);
        button2->setGeometry(260,150,68,68);
        button3->setGeometry(60,280,68,68);
        button4->setGeometry(160,280,68,68);
        button5->setGeometry(260,280,68,68);

        QIcon icon;
        QPixmap pixmap0("images/SMS.png");
        icon.addPixmap(pixmap0);
        button0->setIcon(icon);
        button0->setIconSize(QSize(68,68));
        button0->setFixedSize(pixmap0.size());
        button0->setMask(pixmap0.mask());


        QPixmap pixmap1("images/EMail.png");
        icon.addPixmap(pixmap1);
        button1->setIcon(icon);
        button1->setIconSize(QSize(68,68));
        button1->setFixedSize(pixmap1.size());
        button1->setMask(pixmap1.mask());


        QPixmap pixmap2("images/Contacts.png");
        icon.addPixmap(pixmap2);
        button2->setIcon(icon);
        button2->setIconSize(QSize(68,68));
        button2->setFixedSize(pixmap2.size());
        button2->setMask(pixmap2.mask());

        QPixmap pixmap3("images/Calendar.png");
        icon.addPixmap(pixmap3);
        button3->setIcon(icon);
        button3->setIconSize(QSize(68,68));
        button3->setFixedSize(pixmap3.size());
        button3->setMask(pixmap3.mask());


        QPixmap pixmap4("images/GoogleVoice.png");
        icon.addPixmap(pixmap4);
        button4->setIcon(icon);
        button4->setIconSize(QSize(68,68));
        button4->setFixedSize(pixmap4.size());
        button4->setMask(pixmap4.mask());


        QPixmap pixmap5("images/AndroidMarket.png");
        icon.addPixmap(pixmap5);
        button5->setIcon(icon);
        button5->setIconSize(QSize(68,68));
        button5->setFixedSize(pixmap5.size());
        button5->setMask(pixmap5.mask());


        frame->show();

        return app.exec();
    }

    效果如下:

    注:图标效果不错吧~_~

    好了,今天就写到这里,以后有新的内容再补充。
    补充,这样就可以让图片跟窗口一样大小了。

    int main(int argc, char *argv[])
    {
        QApplication app(argc,argv);
        
        QFrame *frame = new QFrame;
        frame->resize(400,700);

        QImage image1;
        image1.load("images/frame1.jpg");
        QImage image2 = image1.scaled(400,700);

        QPalette   palette;
        palette.setBrush(frame->backgroundRole(),QBrush(image2));
        frame->setPalette(palette);
        frame->setMask(pixmap.mask());  //可以将图片中透明部分显示为透明的
        frame->setAutoFillBackground(true);
        frame->show();

        return app.exec();
    }

    http://www.cppblog.com/qianqian/archive/2010/07/25/121238.html

  • 相关阅读:
    说说VNode节点(Vue.js实现)
    从Vue.js源码角度再看数据绑定
    《Cloud Native Infrastructure》CHAPTER 7(3)
    《Cloud Native Infrastructure》CHAPTER 7(2)
    《Cloud Native Infrastructure》CHAPTER 7 (1)
    《Cloud Native Infrastructure》CHAPTER 4(2)
    《Cloud Native Infrastructure》CHAPTER 4(1)
    《Cloud Native Infrastructure》CHAPTER 2(1)
    《Cloud Native Infrastructure》CHAPTER 1(2)
    《Cloud Native Infrastructure》CHAPTER 1(1)
  • 原文地址:https://www.cnblogs.com/findumars/p/5805088.html
Copyright © 2011-2022 走看看