[PyQt5-Node-Editor][基础篇]从零开始使用Pyqt5制作节点编辑器(1)——绘制网格背景

[基础篇]Pyqt5制作节点编辑器（目录）

从零开始使用Pyqt5制作节点编辑器(1)——绘制网格背景
从零开始使用Pyqt5制作节点编辑器(2)——为场景中添加一些物品吧
从零开始使用Pyqt5制作节点编辑器(3)——拖拽场景和缩放场景
从零开始使用Pyqt5制作节点编辑器(4)——结构规划，建设场景
从零开始使用Pyqt5制作节点编辑器(5)——来制作第一个节点吧
从零开始使用Pyqt5制作节点编辑器(6)——为节点添加内容，以及Styles
从零开始使用Pyqt5制作节点编辑器(7)——写个socket(插口)
从零开始使用Pyqt5制作节点编辑器(8)——放置Edge(一)
从零开始使用Pyqt5制作节点编辑器(9)——放置Edge(二)
从零开始使用Pyqt5制作节点编辑器(10)——完成Edge放置，并且增加socket样式

前排提醒

看本系列内容需要你对QGraphicsView和QGraphicsScene和QGraphicsItem有一定了解

没了解可以看下别的博主博客或者官方文档了解一下

在这里我就简单的打个比方
QGraphicsScene：盒子以及盒子里的内容
QGraphicsView：展示盒子内容的方式(各种滤镜，通过它可以将Scene显示到layout)
QGraphicsItem：盒子里的物品(塞到盒子里去)

1.建立一个Scene

为了拥有更直观的显示效果，我打算将Scene设置为一个网格背景的Scene，但首先需要建立这个Scene类：

node_graphics_scene.py sence文件

class QDMGraphicsScene(QGraphicsScene):def __init__(self, parent=None):super().__init__(parent)

库的引入：

from PyQt5.QtWidgets import *
from PyQt5.QtCore import *
from PyQt5.QtGui import *
import math

2.设置网格大小，背景颜色，网格颜色，场景尺寸

设置网格大小，使用QColor设置背景颜色以及网格颜色，使用QPen设置画笔

self.gridSize = 20self._color_background = QColor("#393939")
self._color_light = QColor("#2f2f2f")
self._color_drak = QColor("#292929")self._pen_light = QPen(self._color_light)
self._pen_light.setWidth(1)
self._pen_drak = QPen(self._color_drak)
self._pen_drak.setWidth(2)
#设置背景
self.setBackgroundBrush(self._color_background)

PyQt设置场景尺寸

self.scene_width, self.scene_height = 64000, 64000
self.setSceneRect(-self.scene_width // 2, -self.scene_height // 2, self.scene_width, self.scene_height)

官方文档对setSceneRect的介绍

3.绘制背景，重写drawBackGround

对当前窗口绘制网格

def drawBackground(self, painter, rect):super().drawBackground(painter, rect)left = int(math.floor(rect.left()))right = int(math.ceil(rect.right()))top = int(math.floor(rect.top()))bottom = int(math.ceil(rect.bottom()))first_left = left - (left % self.gridSize)first_top = top - (top % self.gridSize)lines_light, lines_drak = [], []for x in range(first_left, right, self.gridSize):if (x % 100 != 0):lines_light.append(QLine(x, top, x, bottom))else:lines_drak.append(QLine(x, top, x, bottom))for y in range(first_top, bottom, self.gridSize):if (y % 100 != 0):lines_light.append(QLine(left, y, right, y))else:lines_drak.append(QLine(left, y, right, y))painter.setPen(self._pen_light)# painter.drawLine(lines_light)for i in lines_light:painter.drawLine(i)painter.setPen(self._pen_drak)for i in lines_drak:painter.drawLine(i)

通过捕捉窗口左侧和上侧从窗口外绘制第一条网格线，这样既节省了资源，又在移动整个场景时网格线会实时刷新

4.将Scene显示在View上，并且显示在PYQT里

由于Scene不能直接显示，所以需要View来将Scene转化为具体可以显示的“图像”

main.py 主文件

class NodeEditWind(QMainWindow,Ui_MainWindow):def __init__(self,parent=None):super(NodeEditWind,self).__init__(parent)self.setupUi(self)#create graphics sceneself.grScene = QDMGraphicsScene()# create graphics viewself.view = QGraphicsView(self)self.view.setScene(self.grScene)self.Layout_node.addWidget(self.view)

我写了个界面，并且定义了一个布局layout_node(这个布局自由发挥，想咋样定义都行)
之后将之前写的Scene引入，定义一个View为Scene提供渲染，将View放入layout_node里，运行主程序可看到效果。
到此，完成了背景的编写。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！