gojs(四)-CFANZ编程社区

构建图形

GoJs 绘制的图表（Diagram）具有两个最基本的元素，就是点和线（Node和Link），并且他们可以自由组合组成一个组（Group）。所有的元素都处在图层（Layer）上，并且可以对它们进行布局（Layout）。

通过常规方式

一个图形可以看做由节点和连线组成，在 GoJs 中，图形元素是 GraphObject，我们可以使用常规方式创建节点：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/gojs/release/go.js"></script>
</head>
<body>
    <div id="diagram" style="border: solid 1px blue; width:400px; height:400px"></div>
    <script>
      // 创建画布
      const diagram = new go.Diagram("diagram");
      // 创建节点 节点中元素的排列方式是 Panel.Auto
      const node = new go.Node(go.Panel.Auto);
      // 创建一个图形
      const shape = new go.Shape();
      // 定义图形的属性
      shape.figure = "RoundedRectangle";
      shape.fill = "lightblue";
      // 将图形加到节点
      node.add(shape);
      // 创建一个文本
      const textblock = new go.TextBlock();
      // 定义文本的属性
      textblock.text = "Hello!";
      textblock.margin = 5;
      // 将文本加到节点
      node.add(textblock);
      // 将节点加到图
      diagram.add(node);
    </script>
</body>
</html>

通过 go.GraphObject.make

常规的编程方法虽然容易理解，但是需要定义大量的中间变量，如果需要创建的元素很多，就会感觉有些冗余，上面的代码可以通过 go.GraphObject.make 简化成如下

const diagram = new go.Diagram("diagram");
const $ = go.GraphObject.make;
diagram.add(
    $(go.Node, go.Panel.Auto,
        $(go.Shape,
            { figure: "RoundedRectangle", fill: "lightblue" }),
        $(go.TextBlock,
            { text: "Hello!", margin: 5 })
    ));

这样会让代码量大幅减少，并且如果给元素赋值了错误的属性，make 函数内部会报出错误。

例如，将 text 写错为 test，会在控制台看到报错：

Uncaught Error: Trying to set undefined property "test" on object: TextBlock("")

模型和模板

每个 Diagram 都是通过数据模型（Model）来填充和确定 Node 的信息和 Link 的所属关系的。并且我们只需要创建好 Node 和 Link 的模板（Template）以及数据模型（Model），其他的是事情都交给 GoJs 去处理，它会自动加载模型并构建元素。

模板（Template）

虽然 go.GraphObject.make 创建图形的方式简单了许多，但是如果要创建很多的 Node，而不同的 Node 之间结构相同，通过上面的方式，扔需要书写大量的重复代码。

如果能定义一个 Node 的模板，然后通过指定参数来定义节点，就会方便很多。

GoJS 中为我们提供了这种模板语法，后面会讲。

模型（Model）

GoJS 是一个 model-view 架构的库，画布里的点和连线是数据的可视化展示，它由模型 Model 进行管理。

GoJS 中模型控制着数据，数据是一个数组，数组中的每一个元素是一个 JavaScript 对象。

把 nodeDataArray 作为构造函数的参数，通过 new go.Model() 创建模型对象的实例，然后再把模型实例赋值给 diagram.model 属性就完成了对 Model 的管理。我们日常中的开发基本上就是在维护 nodeDataArray 这个数组。

语法：

const myModel = new go.Model(nodeDataArray);