[PyQt5-Node-Editor][基础篇]从零开始使用Pyqt5制作节点编辑器(4)——结构规划，建设场景

最新推荐文章于 2024-09-13 21:41:36 发布

mahuatengmmp

最新推荐文章于 2024-09-13 21:41:36 发布

阅读量3k

点赞数 4

分类专栏： pyqt5 节点编辑器文章标签：拖拽式编程 pyqt pyqt5 qt 节点编辑器

本文链接：https://blog.csdn.net/mahuatengmmp/article/details/118163532

版权

本文介绍了如何使用PyQt5从零开始制作节点编辑器，详细阐述了QT Graphics View框架中的关系，以及节点编辑器所需功能。包括自定义Scene尺寸、定义Node方法和运行逻辑的调整。文章提供了代码示例，如删除原尺寸定义，创建新方法以增强代码可读性，并展示了main.py、node_graphics_scene.py、node_graphics_view.py等文件的改动。

摘要由CSDN通过智能技术生成

接下来应该做什么

QT结构与节点编辑器

图片来源于原作者的教程
在这里插入述
首先来讲这张图的左边，左边为QT里关于Graphics View的框架中各类的关系，这与我们即将设计的节点编辑器有关
Item是设置在Scene中的
Scene想要显示出来，需要借助View
最后View是一个Widget，可以放在QT的界面里

这是一条分界线————————————————

再来讲右边的这副图，也就是我们想要实现的节点编辑器，而一个node由以下元素组成

Node:
	|--title
	|--input
	|--output
	|--socket
	|--edge

socket是接口，而edge是线(大概)

Node编辑器需要的功能

在这里插入图片描述

我们需要为专门定义一系列方法，来实现上述的计划，比如

定义Scene的尺寸
为Scene添加Node[列表]
为Scene添加Edge[列表]
保存Scene中的Item[列表]

对于代码上的改动

自定义Scene尺寸

删除原尺寸定义代码，定义新方法：

def setGrScene(self, width, height):
    self.setSceneRect(-width // 2, -height // 2, width, height)

定义专门的node方法

为了增强代码可读性，我添加了新文件node_scene.py来专门设置node的处理方法，代码如下

from  node_graphics_scene import QDMGraphicsScene

class Scene:
    def __init__(self):
        self.nodes = []
        self.edges = []

        self.scene_width, self.scene_height = 64000, 64000
        self.initUI()

    def initUI(self):
        self.grScene = QDMGraphicsScene(self)
        self.grScene.setGrScene(self.scene_width,self.scene_height)

    def addNode(self,node):
        self.nodes.append(node)

    def addEdge(self,edge):
        self.edges.append(edge)

    def removeNode(self,node):
        self.nodes.remove(node)

    def removeEdge(self,edge):
        self.nodes.remove(edge)

运行上的逻辑更改

node_scene.py将直接调用QDMGraphicsScene，然后设置Scene尺寸，main.py不在调用node_graphics_scene.py而是调用node_scene.py

当前各文件代码

main.py

import sys
from PyQt5.QtWidgets import *
from  node_edit_window import *
from node_scene import Scene
from PyQt5.QtGui import *
from PyQt5.QtCore import *

from node_graphics_view import QDMGraphicsView


class NodeEditWind(QMainWindow,Ui_MainWindow):
    def __init__(self,parent=None):
        super(NodeEditWind,self).__init__(parent)
        self.setupUi(self)
        #create graphics scene
        self.scene = Scene()
        self.grScene = self.scene.grScene

        # create graphics view
        self.view = QDMGraphicsView(self.grScene,self)
        self.Layout_node