PyQt5入门2——添加一个画布并且显示特定的图片

学习前言

搞搞可视化界面哈，虽然不一定有用，但是搞一下。

使用到的PyQt5类

创建画布需要使用到QLabel。QLabel是QT界面中的标签类，它从QFrame下继承，QLabel 类代表标签，它是一个用于显示文本或图像的窗口部件。

使用前需要从QtWidgets导入进来：

from PyQt5.QtWidgets import QApplication, QTextBrowser, QWidget, QLabel
1

使用如下指令可以创建QLabel。

self.label_show_camera = QLabel(self)
1

QLabel具有多个方法，比较常用的有以下几种：

1、.move方法用于移动窗口：

self.label_show_camera.move(10, 50)
1

2、.setFixedSize设置窗口大小：

self.label_show_camera.setFixedSize(610, 300)
1

3、.setText设置窗口中的问题：

self.label_show_camera.setText("TextLabel")
1

4、.setStyleSheet设置初始窗口颜色：

self.label_show_camera.setStyleSheet("QLabel{background:white;}")
1

5、.setPixmap设置图片：

self.label_show_camera.setPixmap(QPixmap.fromImage(showImage))
1

设置图片前需要准备好需要放上去的图片，我们可以使用QImage类来获得需要放上去的图片

showImage = QImage(np.array(show), np.shape(show)[1],  np.shape(show)[0], QImage.Format_RGB888)
1

6、.clear清除缓存：

self.label_show_camera.clear()
1

7、.setObjectName设置组件名称：

self.label_show_camera.setObjectName("image_show")
1

实例使用

1、窗口构建

a、构建基础类

首先绘制一个画布在上一步构建的Example中。

self.label_h = 300
self.label_w = 300
self.label_show_camera = QLabel(self)
self.label_show_camera.move(10, 50)
self.label_show_camera.setFixedSize(self.label_w, self.label_h)
self.label_show_camera.setText("TextLabel")
self.label_show_camera.setStyleSheet("QLabel{background:white;}")
self.label_show_camera.setObjectName("image_show")
1
2
3
4
5
6
7
8

b、读取已有的图片并且显示

总的步骤如下：

• 准备一个图片，把图片的名字设置为photo.jpg，和py文件放一个文件夹：
  
• 使用PIL或者cv2读取图片，这里我们使用PIL。
• 由于上面我们规定了QLabel的大小，我们需要对图片进行resize。

show        = Image.open("photo.png").convert("RGB")
show        = show.resize([self.label_w, self.label_h])
showImage   = QImage(np.array(show), np.shape(show)[1],  np.shape(show)[0], QImage.Format_RGB888)
self.label_show_camera.setPixmap(QPixmap.fromImage(showImage))
1
2
3
4

2、主程序运行

这个是调用上述创建的Example，细节不必纠结，只需要知道这样便可以调用PyQt5即可。

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
1
2
3
4

全部代码

import sys
import numpy as np
from PIL import Image

from PyQt5.QtGui import QImage, QPixmap
from PyQt5.QtWidgets import QApplication, QTextBrowser, QWidget, QLabel


class Example(QWidget):
    def __init__(self):
        QWidget.__init__(self)
    
        #-----------------------------#
        #   界面显示相关内容
        #-----------------------------#
        self.initUI()

    def initUI(self):
        #-----------------------------#
        #   初始化标题，界面大小
        #-----------------------------#
        self.resize(640, 480)
        self.setWindowTitle('Hello World!')

        #-----------------------------#
        #   写一段话
        #   放到10,10
        #   拉伸长度为620,200
        #-----------------------------#
        self.text_browser = QTextBrowser(self)
        self.text_browser.move(10, 10)
        self.text_browser.resize(620, 30)
        self.text_browser.setText("The Hello World Before!")

        self.label_h = 300
        self.label_w = 300
        self.label_show_camera = QLabel(self)
        self.label_show_camera.move(10, 50)
        self.label_show_camera.setFixedSize(self.label_w, self.label_h)
        self.label_show_camera.setText("TextLabel")
        self.label_show_camera.setStyleSheet("QLabel{background:white;}")
        self.label_show_camera.setObjectName("image_show")
        
        show        = Image.open("photo.png").convert("RGB")
        show        = show.resize([self.label_w, self.label_h])
        showImage   = QImage(np.array(show), np.shape(show)[1],  np.shape(show)[0], QImage.Format_RGB888)
        self.label_show_camera.setPixmap(QPixmap.fromImage(showImage))

        self.show()

if __name__ == '__main__':
    app = QApplication(sys.argv)
    ex = Example()
    sys.exit(app.exec_())
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54