pyqt之QGraphics系列----节点编辑器(一)

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

此处显示文件增删改的情况

文件情况

效果图

image.png

代码

• main.py
  main.py 后面章节都不会改变 , 之后就不重复发了.

import sys
from PyQt5.QtWidgets import *

from node_editor_wnd import NodeEditorWnd


if __name__ == '__main__':
    app = QApplication(sys.argv)

    wnd = NodeEditorWnd()

    sys.exit(app.exec_())

• node_editor_wnd.py
  可以看到导入了 QDMGraphicsScene 类作为 graphics scene.

from PyQt5.QtWidgets import *

from node_graphics_scene import QDMGraphicsScene


class NodeEditorWnd(QWidget):
    def __init__(self, parent=None):
        super().__init__(parent)

        self.initUI()

    def initUI(self):
        self.setGeometry(200, 200, 800, 600)

        self.layout = QVBoxLayout()
        self.layout.setContentsMargins(0, 0, 0, 0)
        self.setLayout(self.layout)

        # crate graphics scene
        self.grScene = QDMGraphicsScene()

        # create graphics view
        self.view = QGraphicsView(self)
        self.view.setScene(self.grScene)
        self.layout.addWidget(self.view)

        self.setWindowTitle("Node Editor")
        self.show()

• node_graphics_scene.py

  
  网格.png

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


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

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


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

        # settings
        # 上图中为一大格 ， 每一小格的尺寸为20；
        self.gridSize = 20
        self.gridSquares = 5

        self._color_background = QColor("#393939")
        self._color_light = QColor("#2f2f2f")
        self._color_dark = QColor("#292929")

        self._pen_light = QPen(self._color_light)
        self._pen_light.setWidth(1)
        self._pen_dark = QPen(self._color_dark)
        self._pen_dark.setWidth(2)

        self.scene_width, self.scene_height = 64000, 64000
        # 同步view和scene的圆点 。
        self.setSceneRect(-self.scene_width//2, -self.scene_height//2, 
                          self.scene_width, self.scene_height)


        self.setBackgroundBrush(self._color_background)


    def drawBackground(self, painter, rect):
        super().drawBackground(painter, rect)

        # here we create our grid
        left       = int(math.floor(rect.left()))        # -400
        right     = int(math.ceil(rect.right()))       # 400
        top       = int(math.floor(rect.top()))       # -300
        bottom = int(math.ceil(rect.bottom()))  #  300

        first_left = left - (left % self.gridSize)    #-400
        first_top = top - (top % self.gridSize)   #-300

        # compute all lines to be drawn
        #  不是100的整数倍的时候加入亮的 ， 反之加入暗的
        lines_light, lines_dark = [], []
        for x in range(first_left, right, self.gridSize):
            if (x % (self.gridSize*self.gridSquares) != 0): 
                lines_light.append(QLine(x, top, x, bottom))
            else: 
                lines_dark.append(QLine(x, top, x, bottom))

        for y in range(first_top, bottom, self.gridSize):
            if (y % (self.gridSize*self.gridSquares) != 0): 
                lines_light.append(QLine(left, y, right, y))
            else: 
                lines_dark.append(QLine(left, y, right, y))


        # draw the lines
        painter.setPen(self._pen_light)
        painter.drawLines(*lines_light)

        painter.setPen(self._pen_dark)
        painter.drawLines(*lines_dark)