jointJS系列之一：jointJS的的初步使用

一、jointJS简介

jointJS是一个基于svg的图形化工具库，在画布上画出支持拖动的svg图形，而且可以导出JSON，也能通过JSON配置导入直接生成图形。

可以基于jointJS开发出流程图、UML图以及图表等。由于jointJS是基于svg的，因此对svg有一定的了解会对jointJS的理解和使用有较大帮助。

由于jointJS是基于backbone的，因此有view（视图）和model（模型）的概念。

使用jointJS需要引入jQuery、backbone、lodash以及jointJS的包，可以通过script标签引入，也可以通过npm安装。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.0/joint.js"></script>
![arch.png][1]

jointJS的核心概念有三个，每个概念分别对应view和model两种概念（前后分别是model和view概念）：元素（element,elementView）、连线(link,linkView)、画布(graph,paper)。

这三个概念之间的关系如上图所示，分别有model和view的概念，我们可以通过改变model的配置，从而改变页面画布的显示。

也能通过页面上的操作，触发view的事件，通过回调函数获取model，进行想要的操作。

jointJS中，视图和模型是分离的，不同概念的模型和视图之间是不能发生联系的，比如把元素添加到画布上，可以使用element.addTo(graph) 或者 graph.add(element) ，但是不能使用element.addTo(paper)这样的操作，因为element是model概念，而paper是视图概念，两者不能直接操作。

接下来介绍比较关键graph、paper、element、link.

1.graph

画布的model概念，创建一个可以挂载的画布,作为图形的容器。通过joint.dia.Graph实例化生成。

let graph = new joint.dia.Graph;

2.paper

画布的view概念，由graph挂载在页面的某个dom上生成，是页面上的图形操作区域。通过joint.dia.Paper实例化，传入配置生成。

let paper = new joint.dia.Paper({
            // 挂载的dom元素
            el: document.getElementById('container'),
            // 关联声明的graph
            model: graph,
            width: 600,
            height: 100,
            gridSize: 1
        });

3.element

元素的model概念，就是图形显示的主体，可以有各种不同的形状，jointJS预设有常用的矩形、椭圆、平行四边形等。除了joint预设的形状以外，我们还可以自定义图形。

元素在实例化时可以配置多种属性，比如元素的大小、在画布中的位置、线条粗细、颜色、填充颜色、文字内容、字体大小等。

元素通过实例化joint.shapes.standard.xxx(xxx是指图形的种类，如Rectangle等），传入配置生成，也可以在自定义的构造方法中传入参数生成（此处代码示例是通过实例化joint预设的形状生成元素），然后添加到graph上。

// 实例化rect
        let rect = new joint.shapes.standard.Rectangle();
        
        // 设置rect的位置和大小
        rect.position(100, 30);
        rect.resize(100, 40);
        
        // 设置rect的主体颜色和标签样式
        rect.attr({
            body: {
                fill: 'blue'
            },
            label: {
                text: 'Hello',
                fill: 'white'
            }
        });
        
        // 将rect添加到画布上
        rect.addTo(graph);
        
        //克隆生成另一个rect,并添加到画布上
        let rect2 = rect.clone();
        rect2.addTo(graph);

4.link

连线的model概念，是表示图形之间的连接关系的工具，也有joint预设和自定义两种，目前只介绍默认的link。

元素通过实例化joint.shapes.standard.Link或者joint.dia.Link，传入配置生成，也可以在自定义的构造方法中传入参数生成，然后添加到graph上。

// 实例化link
        let link = new joint.shapes.standard.Link();
        // 设置link的起始元素
        link.source(rect);
        // 设置link的指向元素
        link.target(rect2);
        // 将link添加到画布上
        link.addTo(graph);