Gojs 学习笔记

ゝ一世哀愁。 2022-05-28 01:39 261阅读 0赞

# 样例代码 #

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, ###