用 gojs 搭建流程图框架之绘制基础图形

2024-01-25 01:48:40

引言

在软件开发与设计中，流程图作为一种直观的数据展示方式，广泛应用于项目规划、算法说明等场景。GoJS作为一款功能强大的JavaScript库，专为复杂交互式图表的创建而生，能够帮助开发者快速构建出美观且易于操作的流程图。

本文将介绍如何使用GoJS来搭建流程图框架，并专注于基础图形如节点（Node）、链接（Link）及布局（Layout）的绘制。无论您是初学者还是希望深入了解GoJS的读者，这篇文章都会提供丰富的示例代码帮助理解与实践。

安装与初始化

在开始之前，请确保已经安装了GoJS库。可以通过npm或直接引用CDN的方式引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.59/go.js"></script>

接下来，需要定义一个DOM元素作为图表的容器，并初始化GoJS模型与绘图板。

示例代码

// HTML部分
<div id="myDiagramDiv" style="width: 100%; height: 600px;"></div>

// JavaScript部分
var $ = go.GraphObject.make;

var myDiagram = $(go.Diagram, "myDiagramDiv");

myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, new go.Binding("text", "key"))
    );

绘制基础图形

节点（Node）

在GoJS中，节点是组成流程图的基本单元。可以使用Shape和TextBlock等部件来定义节点的外观。

示例代码

myDiagram.model = new go.Model();
myDiagram.model.nodeDataArray =
[
  { key: "Alpha" },
  { key: "Beta" },
  { key: "Gamma" }
];

链接（Link）

链接用于表示节点之间的关系。通过定义Link模板，可以自定义箭头形状、颜色等属性。

示例代码

myDiagram.linkTemplate =
    $(go.Link,
      $(go.Shape, { stroke: "gray", strokeWidth: 2 }),
      new go.Binding("points", "points"),
      $(go.Shape, { toArrow: "OpenTriangle" })
    );

布局（Layout）

布局定义了节点在图表中的排列方式。GoJS提供了多种预设的布局算法，比如自动布局。

示例代码

myDiagram.layout = $(go.TreeLayout);

完整示例

结合以上部分，一个完整的流程图框架如下：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>GoJS Flowchart Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.1.59/go.js"></script>
</head>
<body>
<div id="myDiagramDiv" style="width: 100%; height: 600px;"></div>

<script>
var $ = go.GraphObject.make;

var myDiagram = $(go.Diagram, "myDiagramDiv");

// 节点模板
myDiagram.nodeTemplate =
    $(go.Node, "Auto",
      $(go.Shape, "RoundedRectangle", { fill: "lightblue" }),
      $(go.TextBlock, new go.Binding("text", "key"))
    );

// 链接模板
myDiagram.linkTemplate =
    $(go.Link,
      $(go.Shape, { stroke: "gray", strokeWidth: 2 }),
      new go.Binding("points"),
      $(go.Shape, { toArrow: "OpenTriangle" })
    );

// 布局
myDiagram.layout = $(go.TreeLayout);

var model = myDiagram.model;
model.nodeDataArray =
[
  { key: "Alpha" },
  { key: "Beta", parent: "Alpha" },
  { key: "Gamma", parent: "Alpha" }
];
</script>
</body>
</html>