QGraphicsView

QT开发(三十九)——GraphicsView框架

    def __init__(self):
        # 创建视图
        self.view = QGraphicsView()
        self.view.resize(500, 400)
        # 无边框
        self.view.setStyleSheet("padding: 0px; border: 0px;")
        # 隐藏水平条
        self.view.setHorizontalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
        # 隐藏竖条
        self.view.setVerticalScrollBarPolicy(QtCore.Qt.ScrollBarAlwaysOff)
        # 创建场景
        self.scence = QGraphicsScene()
        self.scence.setBackgroundBrush(QtCore.Qt.red)
        # 将场景添加到视图里面
        self.view.setScene(self.scence)
        # 创建图像图元
        img = QtGui.QPixmap("../image/beautiful.jpg").scaled(400, 300)
        self.img_item = QGraphicsPixmapItem(img)
        # 将图元添加到场景里面
        self.scence.addItem(self.img_item)
        # 设置图元可移动
        self.img_item.setFlags(QGraphicsItem.ItemIsMovable | QGraphicsItem.ItemIsSelectable)
        # 设置图元上的光标形状
        self.img_item.setCursor(QtCore.Qt.ClosedHandCursor)
        # # 设置对齐方式
        self.view.setAlignment(QtCore.Qt.AlignLeft | QtCore.Qt.AlignTop)

QGraphicsItem图元

"""
    QGraphicsItem是图元的基类。QGraphics View框架提供了多种标准的图元: 
    QGraphicsEllipseItem 椭圆图元
	QGraphicsLineItem     直线图元
    QGraphicsPathItem     路径图元
    QGraphicsPixmapItem   图像图元
    QGraphicsPolygonItem  多边形图元
    QGraphicsRectItem     矩形图元
    QGraphicsSimpleTextItem 简单文本图元
    QGraphicsTextItem     文本浏览图元
    用户可以继承QGraphicsItem实现自定义的图元。
"""

QGraphicsItem图元移动

  1. 没有键盘事件的时候,设置图元可移动
  2. Qt图形视图框架:QGraphicsItem详解(长文)
   #QGraphicsItem.ItemIsSelectable---可选择
   #QGraphicsItem.ItemIsFocusable---可设置焦点
   #QGraphicsItem.ItemIsMovable---可移动

键盘事件

def __init__(self):
  self.img_item.mouseMoveEvent = self.move
  self.img_item.mousePressEvent = self.press
  self.img_item.mouseReleaseEvent = self.release
  self.view.mouseDoubleClickEvent = self.double_click
  self.img_item.wheelEvent = self.wheel
# 重新写事件函数,根据在init 里面的事件前面设计的,对应视图或场景或条目不同的事件
def move(self, event):
	pass
def press(self, event):
	pass
def release(self, event):
	pass
def double_click(self, event):
	pass
class QMyGraphicsView(QGraphicsView):
    sigMouseMovePoint=pyqtSignal(QPoint)
    #自定义信号sigMouseMovePoint,当鼠标移动时,在mouseMoveEvent事件中,将当前的鼠标位置发送出去
    #QPoint--传递的是view坐标
    def __init__(self,parent=None):
        super(QMyGraphicsView,self).__init__(parent)

    def mouseMoveEvent(self, evt):
        pt=evt.pos()  #获取鼠标坐标--view坐标
        self.sigMouseMovePoint.emit(pt) #发送鼠标位置
        QGraphicsView.mouseMoveEvent(self, evt)

class MainWindow(QMainWindow):
    def __init__(self):
        super(MainWindow, self).__init__()
		....
		....
		....
		self.view.sigMouseMovePoint.connect(self.slotMouseMovePoint)
		
    def slotMouseMovePoint(self,pt):
        self.labviewcorrd.setText('view坐标:{},{}'.format(pt.x(),pt.y()))
        ptscene=self.view.mapToScene(pt)  #把view坐标转换为场景坐标
        self.labscenecorrd.setText('scene坐标:{:.0f},{:.0f}'.format(ptscene.x(),ptscene.y()))
        item=self.scene.itemAt(ptscene,self.view.transform())  #在场景某点寻找图元--最上面的图元
        #返回值:图元地址
        #参数1 场景点坐标
        #参数2 ????
        if item != None:
            ptitem=item.mapFromScene(ptscene)  #把场景坐标转换为图元坐标
            self.labitemcorrd.setText('item坐标:{:.0f},{:.0f}'.format(ptitem.x(),ptitem.y()))
   def __init__(self):
	   self.img_item.mouseMoveEvent = self.move
	   self.img_item.mousePressEvent = self.press
       self.img_item.mouseReleaseEvent = self.release
	   self.view.mouseDoubleClickEvent = self.double_click
	   self.img_item.wheelEvent = self.wheel
       self.flage = False
       self.scale_vale = 1
       self.zoom_scale = 1
   def press(self, event):
       if event.button() == QtCore.Qt.LeftButton:
           self.startPos = event.pos()
           self.flage = True

   def move(self, event):
       if self.flage:
           point = event.pos() - self.startPos
           self.img_item.moveBy(point.x(), point.y())

   def release(self, event):
       self.flage = False

   def double_click(self, event):

       p_view = event.pos()
       print('view坐标:{},{}'.format(p_view.x(), p_view.y()))
       p_scene = self.view.mapToScene(p_view)  # 把view坐标转换为场景坐标
       # print(p_scene.pos())
       print('scence坐标:{},{}'.format(p_scene.x(), p_scene.y()))
       item = self.scence.itemAt(p_scene, self.view.transform())
       if item != None:
           p_item = item.mapFromScene(p_scene)  # 把场景坐标转换为图元坐标
           print('item坐标:{},{}'.format(p_item.x(), p_item.y()))

   def wheel(self, event):
   	   # 在WheelEvent中使用
       # delta = event.angleDelta()
	   # delta.y() > 0 或 delta.y() < 0
       if event.delta() > 0 and self.scale_vale >= 5:  # 只能放大50倍
           return
       if event.delta() < 0 and self.scale_vale <= self.zoom_scale:
           self.scale_vale = self.zoom_scale
           self.img_item.setScale(self.scale_vale)
           self.img_item.setPos(0,0)
       else:
           scale = self.scale_vale
           if event.delta() > 0:
               self.scale_vale *= 1.1  # 每次放大10%
           else:
               self.scale_vale *= 0.9  # 每次缩小10%
           self.img_item.setScale(self.scale_vale)
           # print(scale, self.scale_vale)
           # 移动值:x * scale * 1.3 - x * scale = x * scale * 0.3
           if event.delta() > 0:
               # moveBy指的是item左上角移动的相对距离,相对原始左上角,原始值为(0, 0)向上向右为负数
               self.img_item.moveBy(-event.pos().x() * scale * 0.1, -event.pos().y() * scale * 0.1)
           else:
               self.img_item.moveBy(event.pos().x() * scale * 0.1, event.pos().y() * scale * 0.1)

上一篇:Openlayers笔记之图片偏移的完整解决方案


下一篇:HTML+JS+CSS 实现随机跳转到一个网址