这篇文章主要为大家展示了“jointJS怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jointJS怎么用”这篇文章吧。
最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。
我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，想改变图形样式，就去GoogleSVG相关语法就好啦。另外，它极易上手且操作简单，并且支持所有的现代浏览器。
下面先通过一个小的demo来展示jointjs的使用~
首先先去官网下载一下这些文件，详见HTML代码块head里的内容： 一切准备好就绪，我们就开始了。
先看HTML代码，body就一个div#myholder用来盛放我的画板graph，这里肯定有人会问什么是graph，憋急，请往下看。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/joint.css" /> <script src="js/lib/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/lib/lodash.min.js"></script> <script src="js/lib/backbone-min.js"></script> <script src="js/lib/joint.js"></script> </head> <body> <div id="myholder"></div> </body> <script src="js/createjoint.js" type="text/javascript" charset="utf-8"></script> </html>
JS代码如下： 首先是定义画板和画布
var graph = new joint.dia.Graph; var paper = new joint.dia.Paper({ el: $('#myholder'),//此处是你要放graph的容器 width: 1300, height: 800, model: graph, gridSize: 1 });接下来，就先画个简单的矩形，想要改变一些默认样式的话需要了解元素的SVG DOM结构：
var rect = new joint.shapes.basic.Rect({ position: { x: 100, y: 30 }, size: { width: 200, height: 30 }, attrs: { //attr SVG attr prop- custom data rect: { fill: 'rgb(238,244,247)', 'stroke': 'rgb(47,152,223)', 'stroke-width': '1px' //svg上色 fill stroke }, text: { text: 'my box', fill: 'black' } } });跟矩形相似，我们也可以画个椭圆，代码如下：
var ellipse = new joint.shapes.basic.Rect({ position: { x: 100, y: 30 }, size: { width: 200, height: 30 }, attrs: { //attr SVG attr prop- custom data rect: { fill: 'rgb(238,244,247)', 'stroke': 'rgb(47,152,223)', 'stroke-width': '1px', 'rx': '10px', 'ry': '30px' //svg上色 fill stroke }, text: { text: 'ellipse', fill: 'pink' } } });要让他们有一定的距离
ellipse.translate(300); //两块的距离
接下来，再来画个连线：
var link = new joint.dia.Link({ source: { id: rect.id }, target: { id: ellipse.id } });把前面造的对象都放到画板中：
graph.addCells([rect, rect2, link]);
以上是“jointJS怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
