目录
- 写作思路
- 1、简述实现原理
- 2、部分代码解析
- ①方框的完整代码
- ②编辑界面
- ③预览窗口
- 3、位置同步解析
- ①上下两屏位置同步、编辑屏位置保持不变
写作思路
1、简述实现原理
2、部分代码解析
3、位置同步解析（①上下两屏位置同步②编辑屏位置保持不变）
效果图如下：
版本1：
这就是我们常见的预览窗口，上面预览窗口移动/缩放小方框都会导致下面的编辑界面位置发生变化，同理，下面的编辑界面的移动/缩放也会导致上面的小方框变化，并且上面预览图是编辑窗口的同比例缩放
版本2：
在版本1的基础上，加入了点的删除和增加，并对画布进行了扩展，同时保持编辑界面的画面位置不变
1、简述实现原理
首先最重要的，要知道我们这些是用qgraphicsview、qgraphicsscene、qgraphicsrectitem 这三个基类实现的
实现方法如下：
①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, 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)) #左
painter.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 << 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
3、位置同步解析
①上下两屏位置同步、编辑屏位置保持不变
1、两个pyqtsignal 分别去响应上下两个屏幕的移动和缩放
2、scene的的左上角到当前屏幕中心的长宽来定位（主要用到scene.itemsboundingrect()、view.maptoscene()、view.mapfromscene()这几个方法），屏幕中心的scene位置可以通过编辑窗口长宽的一半并通过view.maptoscene()来转化
以上就是python使用pyqt制作预览窗口游戏中的小地图的详细内容，更多关于pyqt制作预览游戏小地图窗口的资料请关注www.887551.com其它相关文章！
