python编程使用PyQt制作预览窗口游戏中的小地图_开发_开发者

写作思路

1、简述实现原理

2、部分代码解析

3、位置同步解析（①上下两屏位置同步②编辑屏位置保持不变）

效果图如下：

版本1：

python编程使用PyQt制作预览窗口游戏中的小地图

这就是我们常见的预览窗口，上面预览窗口移动/缩放小方框都会导致下面的编辑界面位置发生变化，同理，下面的编辑界面的移动/缩放也会导致上面的小方框变化，并且上面预览图是编辑窗口的同比例缩放

版本2：

python编程使用PyQt制作预览窗口游戏中的小地图

在版本1的基础上，加入了点的删除和增加，并对画布进行了扩展，同时保持编辑界面的画面位置不变

1、简述实现原理

首www.cppcns.com先最重要的，要知道我们这些是用QGraphicsView、QGraphicsscene、QGraphicsRectItem http://www.cppcns.com这三个基类实现的

实现方法如下：

①QGraphicsScene.render渲染编辑窗口获得image，将image按照预览窗口的比例进行缩放并放入overView

②创建一个矩形框，框是按照编辑器窗口和image的比例进行绘制的

③拖动或者缩放预览窗口的时候，编辑窗口按照同样的比例移动缩放，拖动或者缩放预览窗口的时候同理

2、部分代码解析

①方框的完整代码

from PyQt5.QtCore import Qt, QRectF
from PyQt5.QtGui import QBrush, QPainterPath, QPainter, QColor, QPen
from PyQt5.QtWidgets import QGraphicsRectItem, QGraphicsItem
class GraphicsRectItem(QGraphicsRectItem):
    def __init__(self, scene, *args):
        super().__init__(*args)
        self.scene = scene
        self.setFlag(QGraphicsItem.ItemIsMovable, True)
        self.setFlag(QGraphicsItem.ItemIsSelectable, True)
        self.setFlag(QGraphicsItem.ItemSendsGeometryChanges, True)
        self.setFlag(QGraphicsItem.ItemIsFocusable, True)
    def shape(self):
        path = QPainterPath()
        path.addRect(self.rect())
        return path
    def paint(self, painter, option, widget=None):
        # 框选出来的方形
        painter.setBrush(QBrush(QColor(0, 0, 0, 0)))
        painter.setPen(QPen(QColor(0, 0, 0), 0.1, Qt.SolidLine))
        painter.drawRect(self.rect())
        x = self.rect().x()
        y = self.rect().y()
        width = self.rect().width()
        height = self.rect().height()
        otherColor = QColor(150,http://www.cppcns.com 150, 150, 50)
        painter.setBrush(QBrush(otherColor))
        # 下面这部分代码是使得小方框以外的地方多一层蒙皮
        painter.setPen(QPen(QColor(0, 0, 0, 0), 1.0, Qt.SolidLine))
        painter.drawRect(QRectF(x-10000, y, 20000+width, -20000+height)) #上
        painter.drawRect(QRectF(x-10000, y+height, 20000+width, 20000+height)) #下
        painter.drawRect(QRectF(x, y, -20000, height)) #左
        pai编程客栈nter.drawRect(QRectF(x+width, y, 20000, height)) #右
        painter.setRenderHint(QPainter.Antialiasing)
        painter.setBrush(QBrush(QColor(255, 0, 0, 255)))
        painter.setPen(QPen(QColor(0, 0, 0, 255), 1.0, Qt.SolidLine, Qt.RoundCap, Qt.RoundJoin))

这就是前面提到的 “item” 《scene view item的使用》，QGraphicsRectItem 也是继承自QGraphicsItem的，这里的方框就是我们要加到OverView界面中的那个定位方框

②编辑界面

class GraphicsWindow(QGraphicsView):
	def __init__(self, parent=None):
        super(GraphicsWindow, self).__init__(parent)
        ......
        self.scene = ViewPortGraphScene(self)
        self.setScene(self.scene)
        ......
        self.setSceneRect(-1 << 30, -1 << 30, 1 <&编程客栈lt; 31, 1 << 31)
        self.setHorizontalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
        self.setVerticalScrollBarPolicy(Qt.ScrollBarAlwaysOff)
	def addPoint(self, x, y):
        self.scene.addEllipse(x, y, 16, 16, QPen(QColor(Qt.red)), QBrush(QColor(Qt.red)))
	def mousePressEvent(self, mouseEvent):
		......
        if mouseEvent.button() == Qt.LeftButton:
            if isinstance(self.itemAt(mouseEvent.pos()), QGraphicsEllipseItem):
                self.scene.removeItem(self.itemAt(mouseEvent.pos()))
                self.parent.changeView()
        ......
        super(GraphicsWindow, self).mousePressEvent(mouseEvent)
class ViewPortGraphScene(QGraphicsScene):
    def __init__(self, parent=None):
    	super(ViewPortGraphScene, self).__init__(parent)
    	......
	def drawBackground(self, painter, rect):
		# 自己去画格子吧 hhh

熟悉的操作：

1、创建scene

2、把scene放到view

3、把item放到scene，其中这里的item是点也就是QGraphicsEllipseItem，也是继承自QGraphicsRectItem

使屏幕可以拖动： self.setSceneRect(-1 << 30, -1 << 30, 1 << 31, 1 << 31)，因为scene很大，在view里面装不下，所以就可以拖动啦~

**添加点：**如上的addPoint方法

**删除点：**如上的mousePressEvent方法，其中self.itemAt(mouseEvent.pos())可以获取当前鼠标位置是什么东西

③预览窗口

class OverViewGraphicsWindow(QGraphicsView):
    def __init__(self, parent=None):
        super(OverViewGraphicsWindow, self).__init__(parent)
        ......
        self.scene = OverViewGraphScene(self)
        self.item = GraphicsRectItem(self.scene, 0, 0, 50, 25)
        self.scene.addItem(self.item)
        ......
......
class OverViewGraphScene(QGraphicsScene):
    def __init__(self, parent=None):
        super(OverViewGraphScene, self).__init__(parent)

同样的套路：

1、创建scene

2、把scene放到view

3、把item放到scene，其中这里的item是点也就是QGraphicsRectItem，继承自QGraphicsRectItem