jointJS(一)--关于jointJS的初认识
来源:互联网 发布:二式大艇数据 编辑:程序博客网 时间:2024/06/06 08:34
最近由于项目需要,开始接触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的初认识就先到这里啦,加油!
0 0
- jointJS(一)--关于jointJS的初认识
- jointjs
- jointjs
- JointJS
- jointJS(二)--jointJS官方版本的一个改造bottomtopmodel
- jointJS(四)--关于node的左击与右击
- jointJS(五)--关于link连接时鼠标抬起的trigger
- jointJS(三)--找了一万年的link默认样式
- JointJS总结
- JointJS流程图
- jointjs hello world
- JointJS绘制流程图
- Jointjs项目使用总结
- jointjs和mxgraph比较
- jointJS(六)--cell move event&连线获取source/target
- JointJS零基础入门01-JointJS安装&HelloWorld
- JointJS入门实例01-在JOINTJS元素中使用HTML
- javascript绘制静态或者动态的图表、关系表、流程图-JointJS
- 仿京东收货地址三级联动
- tensorflow学习笔记四——实现一个CNN网络
- Lambda 表达式的示例
- MooseFS Master main 函数代码简单学习
- Android listview addHeaderView 和 addFooterView 详解
- jointJS(一)--关于jointJS的初认识
- Centos 7 双系统 引导修复
- 使用JavaMail API发送邮件失败(二)
- Notification通知的使用
- centOS 6.4 升级python 2.6.6 to 2.7.3
- Android LayoutInflater原理分析,带你一步步深入了解View(一)
- 自定义拖动圆
- ExecutorService 的理解与使用
- poj 1258 (kruskal)