JointJS零基础入门01-JointJS安装&HelloWorld
来源:互联网 发布:动感影集制作软件 编辑:程序博客网 时间:2024/06/06 02:19
1.1 JointJS简介
JointJS是用Backbone MVC库构建的,基于是基于jQuery,Underscore,Backbone 和 SVG。图表由与链接相连的元素组成,JointJS中的图表由模型(joint.dia.Graph)表示,然后该模型收集单元格(即元素和链接)。因此,单元格可以是元素(joint.dia.Element或其继承者)或链接(joint.dia.Link)。在JointJS(从版本0.6开始),您操纵模型,而不是视图。
1.2 JointJS组件的下载与加载
1.2.1 JointJS组件下载
下载链接:点击打开链接/http://pan.baidu.com/s/1miKFmY0 密码:rlhh
1.2.2 JointJS组件加载
<head> <meta charset="UTF-8"> <title>MyJointJS01</title> <link rel="stylesheet" href="css/joint.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/lodash.js"></script><!--注意加载顺序--> <script type="text/javascript" src="js/backbone.js"></script> <script type="text/javascript" src="js/joint.js"></script></head>
1.3 HelloWorld
<body> <div id="myDiv"></div> <script type="text/javascript"> var graph=new joint.dia.Graph; //创建模型 var paper=new joint.dia.Paper({ el: $('#myDiv'), //纸放在哪 width: 1000, //纸多大 height: 500, model: graph, //纸里有什么 gridSize: 1 }); //注意Paper,js对大小写敏感 var rect=new joint.shapes.basic.Rect({ //绘制元素 position:{x: 100 , y: 70}, size: {width: 100 ,height: 30}, attrs: {rect: {fill: 'pink' }, text: {text: 'QLY' , fill: 'white'} } }); var rect1=rect.clone(); rect1.translate(300); var link=new joint.dia.Link({ source: { id:rect.id }, target: { id:rect1.id } }); graph.addCells([rect,rect1,link]); </script></body>
1.4 效果图
ps:注意
1、注意组件加载顺序,尤其是backbone.js的位置,第一或第二;
2、注意方法调用的大小写;
3、注意英文分号;
4、喜欢就自己敲一遍效果最佳哦(⊙o⊙)!
1、注意组件加载顺序,尤其是backbone.js的位置,第一或第二;
2、注意方法调用的大小写;
3、注意英文分号;
4、喜欢就自己敲一遍效果最佳哦(⊙o⊙)!
阅读全文
1 0
- JointJS零基础入门01-JointJS安装&HelloWorld
- JointJS零基础入门02-事件处理
- JointJS零基础入门03-元素样式
- JointJS零基础入门04-链接样式
- JointJS零基础入门05-创建自定义元素
- jointjs
- jointjs
- JointJS
- JointJS入门实例01-在JOINTJS元素中使用HTML
- JointJS总结
- JointJS流程图
- jointjs hello world
- JointJS绘制流程图
- Jointjs项目使用总结
- jointjs和mxgraph比较
- jointJS(一)--关于jointJS的初认识
- jointJS(二)--jointJS官方版本的一个改造bottomtopmodel
- 用jointjs绘制微博关系图
- 解决Targeting ES5 with TypeScript in Visual Studio
- 本地计算机上的XXX服务启动后又停止了——Windows Service服务调试
- UVA-1422(贪心+二分+优先队列)
- js工具-合并对象
- webStorage是html5中用于本地化存储的一种方式
- JointJS零基础入门01-JointJS安装&HelloWorld
- day_07_QT网络编程
- 盘面分化严重发出重磅信号大盘暗藏玄机
- nginx常用命令
- Http
- 深入理解javascript原型和闭包(1)——一切都是对象
- ruby on rails html杂记
- HDU 6127 Hard challenge
- Java中static代码块、普通代码块和构造代码块的执行顺序