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

amuqiao 发布于2019-08-23 10:56 / 3822人阅读

摘要：由于是基于的，因此对有一定的了解会对的理解和使用有较大帮助。由于是基于的，因此有视图和模型的概念。挂载的元素关联声明的元素的概念，就是图形显示的主体，可以有各种不同的形状，预设有常用的矩形椭圆平行四边形等。

一、jointJS简介

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

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

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

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





![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);

云服务器 GPU云服务器 JointJs java的的使用数据分析之一 webrtc学习之一开篇

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96835.html

jointJS(一）--关于jointJS的初认识

摘要：最近由于项目需要，开始接触，妥妥不停刷文档模式，先写一下对于的粗浅认识吧。我们可以使用已提供的图元素绘图，也可根据需求自定义一些图元素。另外，它极易上手且操作简单，并且支持所有的现代浏览器。最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，Joi...

jas0n 2019-08-20 11:24 评论0 收藏0
在vue中使用jointjs

摘要：在中引入的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。通过这样引入还不够，可能会遇到图可以正常加载，但无法拖拽的问题，遇到这些问题一般是和自己项目中的环境冲突了，导致无法读取或者读取错误。在vue中引入joint.js的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。首先，我参考了一篇来自stackove...

李昌杰 2019-08-30 14:12 评论0 收藏0
在vue中使用jointjs

摘要：在中引入的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。通过这样引入还不够，可能会遇到图可以正常加载，但无法拖拽的问题，遇到这些问题一般是和自己项目中的环境冲突了，导致无法读取或者读取错误。在vue中引入joint.js的问题，之前在网上搜了很多，都没有给出一个确切的答案，捣鼓了两天终于弄明白了，做个记录。首先，我参考了一篇来自stackove...

junfeng777 2019-08-22 15:37 评论0 收藏0
1.JointJs Paper

摘要：在该模式下，所有的和会多一个属性，就行中的阴影有一个属性表示层级。为了控制哪些元素可以，需要配置。如果允许被潜入到，返回默认所有元素都可以到其他元素中当设置为的时候，用户将不能将移动到边界之外。关于JointJs的介绍，有一篇比较好JointJS介绍第一个类Paperjoint.dia.Paper 属性 el css选择器，Paper将在该Css选择的Container下画SV...

rose 2019-08-19 17:48 评论0 收藏0