阿坝州网站建设公司

jointJS怎么用

这篇文章主要为大家展示了“jointJS怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“jointJS怎么用”这篇文章吧。

成都创新互联是一家专业提供即墨企业网站建设,专注与网站设计制作、成都网站制作、H5场景定制、小程序制作等业务。10年已为即墨众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。

最近由于项目需要，开始接触jointJS，妥妥不停刷文档模式，先写一下对于jointjs的粗浅认识吧。

我们可以使用JointJS已提供的图元素绘图，也可根据需求自定义一些图元素。除此之外，JointJS创建的图表就是SVG图形，想改变图形样式，就去GoogleSVG相关语法就好啦。另外，它极易上手且操作简单，并且支持所有的现代浏览器。

下面先通过一个小的demo来展示jointjs的使用~

首先先去官网下载一下这些文件，详见HTML代码块head里的内容： 一切准备好就绪，我们就开始了。

先看HTML代码，body就一个div#myholder用来盛放我的画板graph，这里肯定有人会问什么是graph，憋急，请往下看。

                        
      

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怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


分享名称：jointJS怎么用
分享路径：http://azwzsj.com/article/iegppj.html

其他资讯