gojs-one

104 阅读1分钟

引入go(这里是自己的gojs文件)

import go from xxxx

开始绘制(需要在DOM渲染之后,在mounted中)

      var $ = go.GraphObject.make;//这里相当于获取画笔,$只是一个变量名,也可以变为任何字符,方便后续调用
      var myDiagram =
        $(go.Diagram, "picture"(会寻找id为picture的节点,将之后内容绘制到节点内),
          {
            "undoManager.isEnabled": true // 是否可以使用 Ctrl-Z to undo and Ctrl-Y to redo
          });

      var myModel = $(go.Model);//节点数据
      myModel.nodeDataArray = [
        { key: "Alpha" },
        { key: "Beta" },
        { key: "Gamma" }
      ];
      myDiagram.model = myModel;

设置节点样式内容

*gojs中的api使用$(api名,特殊参数,{配置(如位置等,key:value格式)},new go.Binnding('xx','xx'))

//go.Node是节点,go.TextBlock是文本块,go.Binding是将数据绑定在节点上
myDiagram.nodeTemplate =
  $(go.Node,
    $(go.TextBlock,
      new go.Binding("text", "key"))//这里代表将数据中的key属性绑定在文本块的text中,文本块的text也就是文本块展示的内容
  );