jointJS(一）--关于jointJS的初认识
最近由于项目需要，认识开始接触jointJS，认识妥妥不停刷文档模式，认识先写一下对于jointjs的认识粗浅认识吧。
我们可以使用JointJS已提供的认识图元素绘图，也可根据需求自定义一些图元素。认识除此之外，认识JointJS创建的认识图表就是SVG图形，想改变图形样式，认识就去GoogleSVG相关语法就好啦。认识另外，认识它极易上手且操作简单，认识并且支持所有的认识现代浏览器。
下面先通过一个小的认识demo来展示jointjs的使用~
首先先去官网下载一下这些文件，IT技术网详见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的初认识就先到这里啦，加油!
本文地址：http://www.bhae.cn/news/083d23199685.html
版权声明
本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。