Gojs 学习笔记

版权声明：本文为博主原创文章，未经博主允许不得转载，转载请附原文链接说明出处。 https://blog.csdn.net/xupeng874395012/article/details/79713243

样例代码

1、引入Gojs
<script src="go-debug.js"></script>
2、在页面创建个有高宽大小的div
<div id="myDiagramDiv" style="margin:auto;width:300px; height:300px; background-color:#ddd;"></div>
3、创建GO画板
var G = go.GraphObject.make;
 _designer = G(go.Diagram, divId, {
    // 添加 Diagram的一些列属性：下面有一些属性的说明
    // 参考https://gojs.net/latest/api/symbols/Diagram.html

});
4、构建节点源Palette
var x = [
            {
                key: "start",
                text: "开始",
                figure: "Circle",
                fill: "#4fba4f",
                stepType: 1,
            }
        ];
        var myPalette =
            G(go.Palette, divId, // 必须是DIV元素
                {
                    maxSelectionCount: 3,
                    // nodeTemplateMap: _designer.nodeTemplateMap, // 跟设计图共同一套样式模板
                    // model:
                });
         //注入数据
        myPalette.model = new go.GraphLinksModel(x);

        //设置样式模板
        this.updateTemplate = function (template) {
            myPalette.nodeTemplateMap = template;
        }
5、给面板刷新节点和连线
myDiagram.nodeTemplate =
  $(go.Node, "Auto",  // the Shape will go around the TextBlock
    $(go.Shape, "RoundedRectangle",
      // Shape.fill is bound to Node.data.color
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 3 },  // some room around the text
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );

// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);

go.Diagram的属性描述

initialContentAlignment: go.Spot.Center,

布局于面板中心
center the content

allowDrop: true,

must be true to accept drops from the Palette
必须从Palette拖拽

“undoManager.isEnabled”: true

ctrl+z 撤销功能

“grid.visible”: true,

画布中出现方格线用于对其

“clickCreatingTool.archetypeNodeData”: { text: “Node” },

允许在画布上面双击的时候创建节点

“animationManager.isEnabled”: false,

关闭自动动画