GoJS入门笔记（1）

摘要：能干什么，废话不多说，进传送门看看。在中，我们可以在中设置控件与控件之间的关系有点不同使用方法使用第六步样式通过设置连接线的样式没有箭头连接线样式箭头样式运行结果

GoJS能干什么，废话不多说，进传送门看看。传送门

    var $ = go.GraphObject.make;
    var myDiagram =
        $(go.Diagram, "myDiagramDiv", {
            "undoManager.isEnabled": true // CTRL-Z撤销操作，CTRL-Y恢复操作
        });

    // 新建模型
    var myModel = $(go.Model);
    
    // 在模型数据中，每个节点由JavaScript对象表示
    myModel.nodeDataArray = [
        { key: "Alpha" },
        { key: "Beta" },
        { key: "Gamma" }
    ];
    myDiagram.model = myModel;

生成三个可拖拽的对象

单击并拖动上图中的背景以平移视图
单击一个节点来选择它，或者按下并拖动一个节点来移动它
使用CTRL-C和CTRL-V 或 按住CTRL然后控件拖放来复制
用Delete键删除选中控件, 戳我查看更多快捷键

如果撤消管理器已启用，CTRL-Z撤销操作,CTRL-Y恢复操作

我们可以修改节点的样式种类：

形状: Shape
文本块: TextBlock
图片: Picture
容器面板: Panel

// 使用介绍 
// 第一个参数 go.Node，由面板和本身的其他节点本身的其他图形对象组成
// 第二个参数 "Auto", 对应面板的类型，
myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    // 然后将元素定义在这个面班中：Shap,TextBlock等
    
    $(go.TextBlock,
      // TextBlock的内容和节点数据对象中的key绑定
      new go.Binding("text", "key"))
  );

var model = $(go.Model);

model.nodeDataArray =
[
  { key: "text", source: "cat1.png" }
];
myDiagram.model = model;

代码示例：

    var $ = go.GraphObject.make;
    var myDiagram =
        $(go.Diagram, "myDiagramDiv", {
            "undoManager.isEnabled": true 
        });

    myDiagram.nodeTemplate =
        $(go.Node, "Horizontal",
            // 整个控件是蓝色背景
            { background: "#44CCFF" },
            
            $(go.Picture,
                // 通常情况下，图片需要有明确的宽度。当没有设置图片路径 或者 图片是透明的时候会显示红色背景，
                { margin: 10, width: 50, height: 50, background: "red" },
                new go.Binding("source")),
                
            $(go.TextBlock,
                "Default Text", 
                { margin: 12,  stroke: "white", font: "bold 16px sans-serif" }, // 初始化文本样式
                
                new go.Binding("text", "name"))   // 绑定数据的key
        );

    var model = $(go.Model);
    model.nodeDataArray = [ 
        {
            name: "Don Meow",
            source: "1.png"
        },
        {
            name: "Copricat",
            source: "2.png"
        },
        {
            name: "Demeter",
            source: "3.png"
        },
        { /* Empty node data */ }
    ];
    myDiagram.model = model;

运行结果：

  如果我们想要实现图像模型之间的联系，基础模型是满足不了我们的需求的，我们看看其他的模型吧。
  (GraphLinksModel and TreeModel)
  

1. GraphLinksModel

在GraphLinksModel中，我们可以在model.linkDataArray中设置控件与控件之间的关系

var model = $(go.GraphLinksModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B" },
  { key: "C" }
];
model.linkDataArray =
[
  { from: "A", to: "B" },
  { from: "B", to: "C" }
];
myDiagram.model = model;

2. TreeModel
TreeModel有点不同

// 使用方法
var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "A" },
  { key: "B", parent: "A" },
  { key: "C", parent: "B" }
];
myDiagram.model = model;

// TreeModel使用
var model = $(go.TreeModel);
model.nodeDataArray =
[ 
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;

// 通过linkTemplate设置连接线的样式

myDiagram.linkTemplate =
 $(go.Link, 
    { routing: go.Link.Orthogonal, corner: 5 },
    $(go.Shape, { strokeWidth: 3, stroke: "#555" })); // 没有箭头
    /*
        $(go.Shape, {strokeWidth:2},
          new go.Binding("stroke", "color")  // 连接线样式
        ),
        $(go.Shape, {toArrow: "Standard", stroke:null},   // 箭头样式
          new go.Binding("fill", "color")
        )
    */
  );
var model = $(go.TreeModel);
model.nodeDataArray =
[
  { key: "1",              name: "Don Meow",   source: "cat1.png" },
  { key: "2", parent: "1", name: "Demeter",    source: "cat2.png" },
  { key: "3", parent: "1", name: "Copricat",   source: "cat3.png" },
  { key: "4", parent: "3", name: "Jellylorum", source: "cat4.png" },
  { key: "5", parent: "3", name: "Alonzo",     source: "cat5.png" },
  { key: "6", parent: "2", name: "Munkustrap", source: "cat6.png" }
];
myDiagram.model = model;

运行结果