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⊙)!