未加星标

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

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 2016 | 作者 红领巾 ] 0人收藏点击收藏

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

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

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

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

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

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

<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"> <title></title> <linkrel="stylesheet"type="text/css"href="css/joint.css"/> <scriptsrc="js/lib/jquery.min.js"type="text/javascript"charset="utf-8"></script> <scriptsrc="js/lib/lodash.min.js"></script> <scriptsrc="js/lib/backbone-min.js"></script> <scriptsrc="js/lib/joint.js"></script> </head> <body> <divid="myholder"></div> </body> <scriptsrc="js/createjoint.js"type="text/javascript"charset="utf-8"></script> </html>

JS代码如下: 首先是定义画板和画布

vargraph=newjoint.dia.Graph; varpaper=newjoint.dia.Paper({ el:$('#myholder'),//此处是你要放graph的容器 width:1300, height:800, model:graph, gridSize:1 });

接下来,就先画个简单的矩形,想要改变一些默认样式的话需要了解元素的SVG DOM结构:

varrect=newjoint.shapes.basic.Rect({ position:{ x:100, y:30 }, size:{ width:200, height:30 }, attrs:{ //attrSVGattrprop-customdata rect:{ fill:'rgb(238,244,247)', 'stroke':'rgb(47,152,223)', 'stroke-width':'1px' //svg上色fillstroke }, text:{ text:'mybox', fill:'black' } } });

跟矩形相似,我们也可以画个椭圆,代码如下:

varellipse=newjoint.shapes.basic.Rect({ position:{ x:100, y:30 }, size:{ width:200, height:30 }, attrs:{ //attrSVGattrprop-customdata rect:{ fill:'rgb(238,244,247)', 'stroke':'rgb(47,152,223)', 'stroke-width':'1px', 'rx':'10px', 'ry':'30px' //svg上色fillstroke }, text:{ text:'ellipse', fill:'pink' } } });

要让他们有一定的距离

ellipse.translate(300);//两块的距离

接下来,再来画个连线:

varlink=newjoint.dia.Link({ source:{ id:rect.id }, target:{ id:ellipse.id } });

最后,把前面造的对象都放到画板中:

graph.addCells([rect,rect2,link]);

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

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: HTML浏览器矩形UT需求
分页:12
转载请注明
本文标题:jointJS(一)--关于jointJS的初认识
本站链接:http://www.codesec.net/view/480353.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(34)