创新实训可视化展示篇3——《图谱展示功能实现》-CSDN博客

本文链接：https://blog.csdn.net/m0_62303445/article/details/139183688

引言

在现代应用中，图谱展示功能是一种有效的可视化方式，用于展示节点之间的关系和结构。它在知识图谱、社交网络分析、物联网等领域有着广泛的应用。在本篇博客中，我们将讲解图谱展示功能的设计思路，介绍如何实现图谱节点和关系的可视化展示，并探讨如何实现图谱的拖拽和缩放功能。

图谱展示功能的设计思路

在设计图谱展示功能时，我们需要考虑以下几个方面：

数据结构：如何存储节点和关系的数据。
可视化展示：如何将数据以图形的形式展示出来。
交互操作：如何实现对图谱的拖拽、缩放等交互操作。
性能优化：如何在展示大量数据时保持良好的性能。

数据结构设计

在前面的博客中，我们已经设计了数据库表结构，包括人物、关系、朝代、地点和诗词等数据表。在图谱展示中，我们需要将这些数据加载到内存中，并转化为图形节点和边的数据结构。

class Node {
  final String id;
  final String label;
  final Offset position;

  Node({required this.id, required this.label, required this.position});
}

class Edge {
  final String from;
  final String to;
  final String label;

  Edge({required this.from, required this.to, required this.label});
}

我们使用Node类表示图谱中的节点，Edge类表示节点之间的关系边。

可视化展示实现

在Flutter中，我们可以使用CustomPaint和CustomPainter来实现图谱的可视化展示。首先，我们需要定义一个GraphPainter类，继承自CustomPainter，用于绘制节点和边。

class GraphPainter extends CustomPainter {
  final List<Node> nodes;
  final List<Edge> edges;
  final double scale;
  final Offset offset;

  GraphPainter(this.nodes, this.edges, this.scale, this.offset);

  @override
  void paint(Canvas canvas, Size size) {
    // 绘制边
    for (var edge in edges) {
      final fromNode = nodes.firstWhere((node) => node.id == edge.from);
      final toNode = nodes.firstWhere((node) => node.id == edge.to);
      final paint = Paint()
        ..color = Colors.black
        ..strokeWidth = 2.0;

      canvas.drawLine(
        fromNode.position * scale + offset,
        toNode.position * scale + offset,
        paint,
      );

      // 绘制关系标签
      final textSpan = TextSpan(
        text: edge.label,
        style: TextStyle(color: Colors.black, fontSize: 12 / scale),
      );
      final textPainter = TextPainter(
        text: textSpan,
        textDirection: TextDirection.ltr,
      );
      textPainter.layout();
      final textOffset = (fromNode.position + toNode.position) * scale / 2 + offset - Offset(textPainter.width / 2, textPainter.height / 2);
      textPainter.paint(canvas, textOffset);
    }

    // 绘制节点
    for (var node in nodes) {
      final paint = Paint()
        ..color = Colors.blue
        ..style = PaintingStyle.fill;

      canvas.drawCircle(node.position * scale + offset, 20.0 * scale, paint);

      // 绘制节点标签
      final textSpan = TextSpan(
        text: node.label,
        style: TextStyle(color: Colors.white, fontSize: 14 / scale),
      );
      final textPainter = TextPainter(
        text: textSpan,
        textDirection: TextDirection.ltr,
      );
      textPainter.layout();
      final textOffset = node.position * scale + offset - Offset(textPainter.width / 2, textPainter.height / 2);
      textPainter.paint(canvas, textOffset);
    }
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

在这个GraphPainter类中，我们分别绘制了边和节点，并在每个节点和边上添加了标签。

交互操作实现

为了实现图谱的拖拽和缩放功能，我们需要在Flutter应用中处理手势事件。我们可以使用GestureDetector来监听手势，并通过Transform组件来实现图谱的拖拽和缩放。

class GraphScreen extends StatefulWidget {
  @override
  _GraphScreenState createState() => _GraphScreenState();
}

class _GraphScreenState extends State<GraphScreen> {
  List<Node> nodes = [];
  List<Edge> edges = [];
  double scale = 1.0;
  Offset offset = Offset.zero;
  Offset startFocalPoint = Offset.zero;
  Offset startOffset = Offset.zero;

  @override
  void initState() {
    super.initState();
    _loadData();
  }

  void _loadData() {
    // 模拟加载数据
    nodes = [
      Node(id: '1', label: '李白', position: Offset(100, 100)),
      Node(id: '2', label: '杜甫', position: Offset(300, 200)),
    ];
    edges = [
      Edge(from: '1', to: '2', label: '朋友'),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('图谱展示'),
      ),
      body: GestureDetector(
        onScaleStart: (details) {
          startFocalPoint = details.focalPoint;
          startOffset = offset;
        },
        onScaleUpdate: (details) {
          setState(() {
            scale = details.scale;
            offset = startOffset + (details.focalPoint - startFocalPoint);
          });
        },
        child: CustomPaint(
          painter: GraphPainter(nodes, edges, scale, offset),
          child: Container(),
        ),
      ),
    );
  }
}

在这个示例中，我们使用了GestureDetector来监听缩放手势，并更新图谱的缩放比例和偏移量。通过CustomPaint和GraphPainter，我们将图谱节点和边绘制在屏幕上，并实现了基本的拖拽和缩放功能。