jointJS怎么用

本文主要向您展示如何使用“jointJS”。内容简单易懂，条理清晰。希望能帮你解开疑惑。让边肖带领大家学习《如何使用jointJS》这篇文章。

最近因为项目需要，开始接触jointJS，一直在适当刷文档模式。首先，我想写下我对jointjs的粗浅理解。

我们可以用JointJS提供的图形元素进行绘制，也可以根据需要定制一些图形元素。另外，JointJS创建的图是SVG图。如果想更改图形样式，只需转到GoogleSVG相关语法。此外，它易于使用和操作，并支持所有现代浏览器。

让我们通过一个小演示来展示jointjs的使用~

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

先看HTML代码。主体中只有一个div#myholder来存放我的画板图。这里肯定有人会问什么是图。请往下看。

！doctypehtmlhtmltownetacharset=' UTF-8 ' title/title linkrel='样式表' 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 src=' js/lib/backbone-min . js '/script script src

vargraph=new joint . dia . graph；var paper=new joint . dia . paper({ El : $(' # my holder ')，//这里是容器宽度33601300，高度：800，型号3360 graph，grid size :1 })；接下来，画一个简单的矩形。如果您想更改一些默认样式，您需要知道元素的SVG DOM结构：

varrect=new joint . shapes . basic . rect({ position :100 { x:100，y:30}，size:{width:200，height:nbsp

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