JointJS入门

# JointJS

JointJS 是一个开源的前端流程图框架，基于 SVG 进行绘制

# 快速开始

引入基本的 JS 文件

<link rel="stylesheet" type="text/css" href="./joint.css" />
<script src="./jquery.js"></script>
<script src="./lodash.js"></script>
<script src="./backbone.js"></script>
<script src="./joint.js"></script>

1
2
3
4
5

初始化模型

var graph = new joint.dia.Graph();

初始化画布

var paper = new joint.dia.Paper({
  el: document.getElementById("myholder"),
  model: graph,
  width: 600,
  height: 100,
  gridSize: 1,
});

1
2
3
4
5
6
7

绘制模块

var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
  body: {
    fill: "blue",
  },
  label: {
    text: "Hello",
    fill: "white",
  },
});
rect.addTo(graph);

1
2
3
4
5
6
7
8
9
10
11
12
13

复制模块并链接

var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr("label/text", "World!");
rect2.addTo(graph);

var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);

1
2
3
4
5
6
7
8
9

# 点击事件

joint 可以为画布绑定事件，其中包括点击空白，双击空白，点击线，点击模块，双击模块，点击连接点等事件

文档地址 (opens new window)

paper.on("blank:pointerdblclick", function () {
  resetAll(this);

  info.attr("body/visibility", "hidden");
  info.attr("label/visibility", "hidden");

  this.drawBackground({
    color: "orange",
  });
});

1
2
3
4
5
6
7
8
9
10

# 增加输入输出点


(function() {

    var graph = new joint.dia.Graph;
    new joint.dia.Paper({ el: $('#paper-create'), width: 650, height: 200, gridSize: 1, model: graph });

    var m1 = new joint.shapes.devs.Model({
        position: { x: 50, y: 50 },
        size: { width: 90, height: 90 },
        inPorts: ['in1','in2'],
        outPorts: ['out'],
        ports: {
            groups: {
                'in': {
                    attrs: {
                        '.port-body': {
                            fill: '#16A085'
                        }
                    }
                },
                'out': {
                    attrs: {
                        '.port-body': {
                            fill: '#E74C3C'
                        }
                    }
                }
            }
        },
        attrs: {
            '.label': { text: 'Model', 'ref-x': .5, 'ref-y': .2 },
            rect: { fill: '#2ECC71' }
        }
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

# 微视图

微视图

<div style="position: relative; padding-bottom: 100px;">
  <div
    class="paper"
    id="paper-multiple-papers"
    style="position: absolute;"
  ></div>
  <div
    class="paper"
    id="paper-multiple-papers-small"
    style="position: absolute; top: 75px; left: 450px;"
  ></div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12

(function multiplePapers() {
  // shared graph model
  var graph = new joint.dia.Graph();

  // main paper view
  new joint.dia.Paper({
    el: document.getElementById("paper-multiple-papers"),
    model: graph,
    width: 600,
    height: 100,
    gridSize: 1,
  });

  // minimap paper view
  var paperSmall = new joint.dia.Paper({
    el: document.getElementById("paper-multiple-papers-small"),
    model: graph,
    width: 150,
    height: 25,
    gridSize: 1,
    interactive: false,
  });
  paperSmall.scale(0.25);

  // graph contents
  var rect = new joint.shapes.standard.Rectangle();
  rect.position(100, 30);
  rect.resize(100, 40);
  rect.attr({
    body: {
      fill: "blue",
    },
    label: {
      text: "Hello",
      fill: "white",
    },
  });
  rect.addTo(graph);

  var rect2 = rect.clone();
  rect2.translate(300, 0);
  rect2.attr("label/text", "World!");
  rect2.addTo(graph);

  var link = new joint.shapes.standard.Link();
  link.source(rect);
  link.target(rect2);
  link.addTo(graph);
})();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

# 转化为 json 数据

graph.toJSON();

上次更新: 2024/01/18, 10:44:15

lottie动态图标以及超图中的使用→