最近由于项目需要，开始接触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]);
那么，一个小小的demo就实现了，是不是挺简单的，接下来我还会陆续分享使用jointjs中的问题以及我找到的最好的方法，jointjs的初认识就先到这里啦，加油!
作者：佳佳嘉嘉嘉
来源：51CTO
