GOJS 二次开发入门教学（二）

上一篇文章介绍了gojs引入和初始化画布，画布有了怎么在上面加上自己想要的图形呢？

本章介绍一下重要的属性以及个人理解。

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

  diagram.nodeTemplate =
    $(go.Node, "Auto",
      new go.Binding("location", "loc", go.Point.parse),
      $(go.Shape, "RoundedRectangle", { fill: "lightgray" }),
      $(go.TextBlock, { margin: 5 },
        new go.Binding("text", "key"))
    );

  diagram.linkTemplate =
    $(go.Link,       // the whole link panel
      $(go.Shape)  // the link shape, default black stroke
    );

  var nodeDataArray = [
    { key: "Alpha", loc: "0 0" }, //loc就是位置，在画布上的位置
    { key: "Beta", loc: "100 50" }
  ];
  var linkDataArray = [
    { from: "Alpha", to: "Beta" }//理解为从哪个节点，连接到哪个节点。根据key值来
  ];
  diagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

效果图：

代码可见：

diagram有三个属性，model，nodeTemplate和linkTemplate

nodeTemplate：这个属性负责 节点会长成什么样子。具体再说

linkTemplate：这个属性负责 节点之间连接线长什么样子。具体再说

model：就是画布上所有用到的数据，这个model，会根据你的操作动态改变。

如果需要保存你操作的位置，大小等。可以读取diagram.model,自己处理下后台需要的数据结构存到数据库。

new go.GraphLinksModel(nodeDataArray, linkDataArray); 其中linkDataArray为[] 节点之间没有连接线，nodeDataArray为[]就空白,画布上什么也没有。

节点就是上图那个灰色背景的方框

精髓在于nodeTemplate和linkTemplate怎么弄，怎么画出不同形状，你想要的东西。下一章详细介绍。