Designer中的Graphics View部件是个图形视图部件,对应类为QGraphicsView,其功能不是简单的显示图形,老猿认为这是一种特殊的视图,它与QGraphicsScene配套实现了相似Model/View的架构。html
本节不介绍QGraphicsView和QGraphicsScene的全部属性、方法,你们能够参考官方文档,另外老猿推荐《Qt绘图之QGraphicsScene QGraphicsView QGraphicsItem详解》供你们参考。python
QGraphicsView主要是用于界面显示图形的,显示的内容由QGraphicsScene决定。QGraphicsView支持鼠标的拖拽、点击、滚动等事件,能够根据滚动条策略控制滚动条的出现,提供视图、场景的坐标映射,支持设置对齐方式。web
具体属性、方法、信号能够参考官方文档以及上面推荐的博文,在此须要重点说明以下几点:架构
QGraphicsScene用于管理一个须要绘制的图形对象,每一个对象称为图元(基类为QGraphicsItem),若是理解QGraphicsScene为一个Model对象的话,QGraphicsItem就是Model中的项。svg
QGraphicsItem具体属性、方法、信号能够参考官方文档以及上面推荐的博文,在此须要重点说明以下几点:学习
在案例中须要在界面上显示以下内容:
并实现除HELLO外的部分随鼠标点击移动位置。上面的内容包括图片、文字、直线、椭圆以及曲线。ui
界面UI设计很是简单,就是一个窗口中放置了一个QGraphicsView,如图:
窗口命名为mainWin,图形视图命名为graphicsView。spa
构造方法中除了图形界面初始化外,还将图形视图的内边距和边界去除、改变图形视图的对齐方式、设置场景大小和图形视图大小一致,并绘制图形,同时接管图形场景的mousePressEvent 方法。具体代码以下:.net
class mainWin(QtWidgets.QWidget,ui_mainWin.Ui_mainWin): def __init__(self): super().__init__() self.setupUi(self) self.graphicsView.setStyleSheet("padding: 0px; border: 0px;")#内边距和边界去除 self.scene = QtWidgets.QGraphicsScene(self) self.graphicsView.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop) #改变对齐方式 self.graphicsView.setSceneRect(0,0,self.graphicsView.viewport().width(),self.graphicsView.height()) #设置图形场景大小和图形视图大小一致 self.graphicsView.setScene(self.scene) self.addScenes() #调用绘制图形的方法 self.scene.mousePressEvent = self.mousePressEvent #接管图形场景的鼠标事件
def addScenes(self): #绘制图形 originX,originY = 40,60 #坐标基点 self.itemHELLO = self.scene.addText("HELLO!") #输出hello self.itemHELLO.setPos(0, 0) #绘制矩形 pen = QtGui.QPen(QtGui.QColor(QtCore.Qt.red)) rectF = QtCore.QRectF(originX+300-8, originY-25, 20, 50) self.elpItem = self.scene.addEllipse(rectF, pen) # 绘制曲线 pen.setColor(QtGui.QColor(QtCore.Qt.blue)) path = QtGui.QPainterPath() path.moveTo(originX,originY) path.cubicTo(originX+100, originY-150, originX+200, originY+150,originX+300,originY) myGradient = QtGui.QLinearGradient() myFont = QtGui.QFont() textPoint = QtCore.QPointF(originX+35,originY-4) path.addText(textPoint, myFont, "老猿Python") self.itemPath = self.scene.addPath(path,pen,myGradient) #绘制下划线 pen.setColor(QtGui.QColor(QtCore.Qt.darkRed)) line = QtCore.QLineF(QtCore.QPointF(originX+190, originY-20), QtCore.QPointF(originX+275, originY-20)) self.itemLine = self.scene.addLine(line, pen) self.itemLine.setPos(0,originY-20) #绘制文字 self.itemText = self.scene.addText("跟老猿学Python!") self.itemText.setPos(originX+185,originY+1) #绘制图片 pixmap = QtGui.QPixmap(r"F:\coffeDog\咖啡狗小图.jpg") self.pixmapItem = self.scene.addPixmap(pixmap) self.pixmapItem.setPos(originX-34,originY-16) #绘制x轴 pen.setColor(QtGui.QColor(QtCore.Qt.red)) self.xLine = self.scene.addLine(originX,originY, originX+300, originY, pen)
注意这个方法不要命名为mousePressEvent,由于这样不但会接管图形场景的鼠标按键事件,并且会接管主窗口的鼠标按键事件,而两者的参数类型是不一样的,对应属性也不一样。设计
def myMousePressEvent(self,mouseEvent): print("myMousePressEvent",mouseEvent.type(),mouseEvent.scenePos()) point = mouseEvent.scenePos() if point: self.movePath(point) #移动相关图元,方法单独实现 else:print("not valid point")
在该方法中须要将相关图元的位置同步移动,因此在绘制方法中记录下来了全部图元对象。移动图元是参考图片的坐标。
老猿关于PyQt的付费专栏《使用PyQt开发图形界面Python应用》只须要9.9元,该部分与第十五章的内容基本对应,但一样内容在付费专栏上整体来讲更详细、案例更多。本节内容对应付费专栏的《第四十章、PyQt显示部件:QGraphicsView图形视图和QGraphicsScene图形场景简介及应用案例
》。若是有兴趣也愿意支持老猿的读者,欢迎购买付费专栏。