Go.js的简单使用方法

882 阅读1分钟

一、简单使用:

1、引入方法:

(1)下载GoJs,本地引入:

<script src="go-debug.js"></script>

(2)通过CDNJS提供的方式引入:

<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.7.15/go-debug.js"></script>

2、创建盒子,创建一个明确尺寸的div

<div id="myDiagramDiv" style="width:700px; height:600px; background-color: #f40;"></div>

3、在javaScript代码中,制定在div下创建图标

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

这样就创建好一个空的图标。

以上三个步骤是使用GO.JS创建开始必须要做的三个步骤。

注意,go是命名空间,所有的GoJs的类型都依赖于它,所有使用GoJs的类例如Diagram 、Node 、 Panel 、Shape 、 TextBlock都需要加前缀go.。

4、完整例子代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
      <div id="myDiagramDiv" style="width:700px; height:600px; background-color: #DAE4E4;"></div>
  <script>
    var $ = go.GraphObject.make;
    var myDiagram = $(go.Diagram"myDiagramDiv");
  </script>
</body>
</html>

5、一个完整的案例,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="https://unpkg.com/gojs/release/go-debug.js"></script>
</head>
<body>
  <div id="myDiagramDiv" style="width:700px; height:600px; background-color: #DAE4E4;"></div>
  <script>
    var $ = go.GraphObject.make;
    var myDiagram =
      $(go.Diagram"myDiagramDiv", {
        "undoManager.isEnabled"true// enable Ctrl-Z to undo and Ctrl-Y to redo
        layout: $(go.TreeLayout// specify a Diagram.layout that arranges trees
          {
            angle90,
            layerSpacing35
          })
      });
    // the template we defined earlier
    myDiagram.nodeTemplate =
      $(go.Node"Horizontal", {
          background"#44CCFF"
        },
        $(go.Picture, {
            margin10,
            width50,
            height50,
            background"red"
          },
          new go.Binding("source")),
        $(go.TextBlock"Default Text", {
            margin12,
            stroke"white",
            font"bold 16px sans-serif"
          },
          new go.Binding("text""name"))
      );
    // define a Link template that routes orthogonally, with no arrowhead
    myDiagram.linkTemplate =
      $(go.Link, {
          routing: go.Link.Orthogonal,
          corner5
        },
        $(go.Shape, {
          strokeWidth3,
          stroke"#555"
        })); // the link shape
    var model = $(go.TreeModel);
    model.nodeDataArray = [{
        key"1",
        name"Don Meow",
        source"/images/learn/cat1.png"
      },
      {
        key"2",
        parent"1",
        name"Demeter",
        source"/images/learn/cat2.png"
      },
      {
        key"3",
        parent"1",
        name"Copricat",
        source"/images/learn/cat3.png"
      },
      {
        key"4",
        parent"3",
        name"Jellylorum",
        source"/images/learn/cat4.png"
      },
      {
        key"5",
        parent"3",
        name"Alonzo",
        source"/images/learn/cat5.png"
      },
      {
        key"6",
        parent"2",
        name"Munkustrap",
        source"/images/learn/cat6.png"
      }
    ];
    myDiagram.model = model;
  </script>
</body>
</html>

如想深度学习请在(gojs.net.cn/intro/index…) 上进行学习。