当前位置：首页 > 人工智能

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]);

那么，一个小小的demo就实现了，是不是挺简单的，接下来我还会陆续分享使用jointjs中的问题以及我找到的***的方法，jointjs的初认识就先到这里啦，加油!

jointJS(一）--关于jointJS的初认识

相关推荐

3.dns修改成功后，点击“域名解析”，按提示进行操作。解析格式一般如下：

终于把Redis场景设计搞清楚了，需要掌握的都在这了

gRPC11# 超时问题定位

想必大家还不知道，网址域名尽然还可以用表情

第六：这个圈子里的域名确实是赚钱的一些大玩家，至于小米农，有多少赚钱？几乎没有，也就是说，轿子里只有一个人，而且大多数人都抬着轿子。

函数计算GB镜像秒级启动：下一代软硬件架构协同优化揭秘