[PyQt5-Node-Editor][基础篇]从零开始使用Pyqt5制作节点编辑器(10)——完成Edge放置,并且增加socket样式

2021/6/27 22:20:20

本文主要是介绍[PyQt5-Node-Editor][基础篇]从零开始使用Pyqt5制作节点编辑器(10)——完成Edge放置,并且增加socket样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

导航

  • 目标
    • Edge能够完全跟着Node走,并且socket有多种样式或者说种类
  • 实现
    • 使Edge跟着socket走,也就是跟着Node走
    • 多样式socket
  • 考试周,暂时不更

目标

Edge能够完全跟着Node走,并且socket有多种样式或者说种类

在这里插入图片描述
其中不同颜色的socket就是不同样式的socket,用

Node(scene, title=“Undefined Node”, inputs=[], outputs=[])

中的inputs和outputs表示

实现

使Edge跟着socket走,也就是跟着Node走

在上次程序中我定义了一个方法updatePosition来更新两个socket间的连线,为了让Edge跟着Node走也就要当Node位置发生更新时,updatePosition将会被调用

在node_graphics_node.py添加以下代码

    def mouseMoveEvent(self, event):
        super().mouseMoveEvent(event)
        self.node.updateConnectedEdges()

在鼠标拖动Node的时候,则调用node.updateConnectedEdges()这个方法

在node_node.py添加updateConnectedEdges()方法

    def updateConnectedEdges(self):
        for socket in self.inputs + self.outputs:
            if socket.hasEdge():
                socket.edge.updatePosition()

它会将输入输出的socket全部扫描一遍,并通过hasEdge()方法判断是否更新

在node_socket.py添加hasEdge()方法

    def hasEdge(self):
        return self.edge is not None

通过判断这个socket是否有edge来决定是否更新

多样式socket

首先,为Socket类添加一个新参数socket_type,他将决定socket样式

Socket(node, index=0,position=LEFT_TOP,socket_type=1)

并添加新属性

self.socket_type = socket_type

并且QDMGraphicsSocket将接收self.socket_type

QDMGraphicsSocket(self.node.grNode,self.socket_type)

在node_graphics_socket.py修改以下代码

class QDMGraphicsSocket(QGraphicsItem):
    def __init__(self, parent=None,socket_type=1):
        super().__init__(parent)

将背景颜色代码改为

        self._color = [
            QColor("#FFFF7700"),
            QColor("#FF52e220"),
            QColor("#FF0056a6"),
            QColor("#FFa86db1"),
            QColor("#FFb54747"),
            QColor("#FFdbe220"),

        ]
        self._color_background = self._color[socket_type]

这样就会根据socket_type来决定socket的背景颜色

最后对应在Main程序中,修改inputs和outputs就能修改对应的节点

node1 = Node(self.scene,"这是一个节点",inputs = [0,0,0],outputs = [3])
node2 = Node(self.scene, "这是第二个节点", inputs=[1, 1, 1], outputs=[3])
node3 = Node(self.scene, "这是第三个节点", inputs=[2, 2, 2], outputs=[3])

考试周,暂时不更



这篇关于[PyQt5-Node-Editor][基础篇]从零开始使用Pyqt5制作节点编辑器(10)——完成Edge放置,并且增加socket样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程