如何创建可展示带可移动节点图论图的UIView？

嘿，这个实现思路很靠谱啊！我来帮你把具体的代码细节和注意事项梳理清楚，确保你能顺利搭建出可拖拽节点的图论可视化视图：

首先得把SEDraggable集成进来，在你的Podfile里加上：

pod 'SEDraggable'

然后自定义NodeView，既要实现基础的节点外观，还要通过SEDraggable开启拖拽能力，同时要和图论里的节点数据绑定，方便后续同步位置：

import UIKit
import SEDraggable

class NodeView: UIView {
    // 关联图论节点的唯一标识
    let nodeId: String
    // 节点的位置，和视图中心绑定
    var position: CGPoint {
        didSet {
            center = position
        }
    }
    
    init(nodeId: String, position: CGPoint) {
        self.nodeId = nodeId
        self.position = position
        super.init(frame: CGRect(x: 0, y: 0, width: 40, height: 40))
        setupAppearance()
        enableDragging()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupAppearance() {
        backgroundColor = .systemBlue
        layer.cornerRadius = bounds.width / 2
        layer.shadowColor = UIColor.black.cgColor
        layer.shadowOpacity = 0.2
        layer.shadowOffset = CGSize(width: 0, height: 2)
        
        // 添加节点标识标签
        let label = UILabel(frame: bounds)
        label.text = nodeId
        label.textColor = .white
        label.textAlignment = .center
        label.font = UIFont.systemFont(ofSize: 14, weight: .medium)
        addSubview(label)
    }
    
    private func enableDragging() {
        // 开启SEDraggable的拖拽功能
        makeDraggable()
        // 限制拖拽范围在父视图内（可选）
        dragBounds = superview?.bounds ?? bounds
        
        // 拖拽结束后同步位置到外部数据模型
        onDragEnded = { [weak self] in
            guard let self = self else { return }
            self.position = self.center
            // 这里可以通过闭包/代理通知GraphView更新节点数据
        }
    }
}

这个类是整个图的载体，负责管理所有节点视图、绘制边，并且通过graph属性来驱动视图更新：

首先先定义图论的基础数据模型：

import UIKit

struct Graph {
    // 图论中的节点模型
    struct Node {
        let id: String
        var position: CGPoint
    }
    // 图论中的边模型
    struct Edge {
        let fromNodeId: String
        let toNodeId: String
    }
    
    var nodes: [Node]
    var edges: [Edge]
}

然后实现GraphView：

class GraphView: UIView {
    // 存储所有节点视图，方便快速查找
    private var nodeViewMap: [String: NodeView] = [:]
    
    // 核心的graph属性，设置时触发重绘
    var graph: Graph? {
        didSet {
            redrawEntireGraph()
        }
    }
    
    private func redrawEntireGraph() {
        // 先清空旧的子视图和缓存
        subviews.forEach { $0.removeFromSuperview() }
        nodeViewMap.removeAll()
        
        guard let graph = graph else { return }
        
        // 添加所有节点视图
        graph.nodes.forEach { node in
            let nodeView = NodeView(nodeId: node.id, position: node.position)
            // 绑定拖拽结束的回调，实时更新graph数据并刷新边
            nodeView.onDragEnded = { [weak self] in
                guard let self = self, var mutableGraph = self.graph else { return }
                if let nodeIndex = mutableGraph.nodes.firstIndex(where: { $0.id == node.id }) {
                    mutableGraph.nodes[nodeIndex].position = nodeView.position
                    self.graph = mutableGraph // 触发重绘边
                }
            }
            addSubview(nodeView)
            nodeViewMap[node.id] = nodeView
        }
        
        // 触发边的绘制
        setNeedsDisplay()
    }
    
    // 重写draw方法绘制所有边
    override func draw(_ rect: CGRect) {
        super.draw(rect)
        guard let graph = graph, let context = UIGraphicsGetCurrentContext() else { return }
        
        // 设置边的样式
        context.setStrokeColor(UIColor.systemGray.cgColor)
        context.setLineWidth(2.0)
        context.setLineCap(.round)
        
        // 遍历所有边，绘制节点间的连线
        graph.edges.forEach { edge in
            guard let fromNode = nodeViewMap[edge.fromNodeId],
                  let toNode = nodeViewMap[edge.toNodeId] else { return }
            
            context.move(to: fromNode.center)
            context.addLine(to: toNode.center)
            context.strokePath()
        }
    }
}

• 拖拽范围限制：如果不想让节点拖出GraphView，可以在enableDragging里把dragBounds设置为self.superview?.bounds，或者自定义边界逻辑。
• 性能优化：如果节点数量很多，每次拖拽结束都重新设置graph触发全量重绘可能有点卡，可以改成在拖拽过程中实时更新边的位置，而不是等拖拽结束再刷新。
• 数据一致性：一定要保证NodeView的position和Graph.Node的position始终同步，这里用了拖拽回调+graph属性更新的方式，也可以用Combine或者KVO来实现更响应式的同步。

内容的提问来源于stack exchange，提问作者Sweeper