pyqt之QGraphics系列----节点编辑器(八,九,十)

仓库地址 https://gitlab.com/pavel.krupala/pyqt-node-editor-tutorials.git

八

九

十

效果图

无
完成node之间的连接线 , 并移动的时候刷新连接线.

代码

• node_editor_wnd.py
  实例化连接线

  
  
  

  image.png

from node_graphics_edge import *

#直线
EDGE_TYPE_DIRECT = 1
#三次方贝塞尔曲线
EDGE_TYPE_BEZIER = 2

DEBUG = True

class Edge:
    def __init__(self, scene, start_socket, end_socket, edge_type=EDGE_TYPE_DIRECT):

        self.scene = scene

        self.start_socket = start_socket
        self.end_socket = end_socket

        self.start_socket.edge = self
        if self.end_socket is not None:
            self.end_socket.edge = self
        
        # 看实例化传入的是需要哪种类型的连接线
        self.grEdge = QDMGraphicsEdgeDirect(self) \
                            if edge_type == EDGE_TYPE_DIRECT \
                            else QDMGraphicsEdgeBezier(self)
        # 刷新连接线位置
        self.updatePositions()
        if DEBUG: print("Edge: ", self.grEdge.posSource, "to", self.grEdge.posDestination)
        self.scene.grScene.addItem(self.grEdge)

    def updatePositions(self):
        """
        刷新连接线位置
        """
        source_pos = self.start_socket.getSocketPosition()
        source_pos[0] += self.start_socket.node.grNode.pos().x()
        source_pos[1] += self.start_socket.node.grNode.pos().y()
        self.grEdge.setSource(*source_pos)
        if self.end_socket is not None:
            end_pos = self.end_socket.getSocketPosition()
            end_pos[0] += self.end_socket.node.grNode.pos().x()
            end_pos[1] += self.end_socket.node.grNode.pos().y()
            self.grEdge.setDestination(*end_pos)
        if DEBUG: print(" SS:", self.start_socket)
        if DEBUG: print(" ES:", self.end_socket)
        self.grEdge.update()

    def remove_from_sockets(self):
        if self.start_socket is not None:
            self.start_socket.edge = None
        if self.end_socket is not None:
            self.end_socket.edge = None
        self.end_socket = None
        self.start_socket = None

    def remove(self):
        # revove1
        self.remove_from_sockets()
        # revove2
        self.scene.grScene.removeItem(self.grEdge)
        self.grEdge = None
        # revove3
        self.scene.removeEdge(self)

• node_graphics_edge.py
  直线和曲线的样式细节

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


class QDMGraphicsEdge(QGraphicsPathItem):
    """
    连接线的样式基类
    """
    def __init__(self, edge, parent=None):
        super().__init__(parent)

        self.edge = edge

        self._color = QColor("#001000")
        self._color_selected = QColor("#00ff00")
        self._pen = QPen(self._color)
        self._pen_selected = QPen(self._color_selected)
        self._pen.setWidthF(2.0)
        self._pen_selected.setWidthF(2.0)

        self.setFlag(QGraphicsItem.ItemIsSelectable)

        self.setZValue(-1)

        self.posSource = [0, 0]
        self.posDestination = [200, 100]

    def setSource(self, x, y):
        self.posSource = [x, y]

    def setDestination(self, x, y):
        self.posDestination = [x, y]


    def paint(self, painter, QStyleOptionGraphicsItem, widget=None):
        self.updatePath()

        painter.setPen(self._pen if not self.isSelected() else self._pen_selected)
        painter.setBrush(Qt.NoBrush)
        painter.drawPath(self.path())

    def updatePath(self):
        """ Will handle drawing QPainterPath from Point A to B """
        raise NotImplemented("This method has to be overriden in a child class")


class QDMGraphicsEdgeDirect(QDMGraphicsEdge):
    """
    直线
    """
    def updatePath(self):
        path = QPainterPath(QPointF(self.posSource[0], self.posSource[1]))
        path.lineTo(self.posDestination[0], self.posDestination[1])
        self.setPath(path)


class QDMGraphicsEdgeBezier(QDMGraphicsEdge):
    """
    贝塞尔曲线
    """
    def updatePath(self):
        s = self.posSource
        d = self.posDestination
        dist = (d[0] - s[0]) * 0.5
        if s[0] > d[0]: dist *= -1

        path = QPainterPath(QPointF(self.posSource[0], self.posSource[1]))
        path.cubicTo( s[0] + dist, s[1], d[0] - dist, d[1], self.posDestination[0], self.posDestination[1])
        self.setPath(path)

但是这样只是初始化的时候用edge把node连接起来, node一移动 , 先的位置还是不变化 , 所以需要这样 , 增加mouseMoveEvent:

image.png