image.png
- 引入
jointJs依賴 - 定義
graph吟税、paper - 創(chuàng)建兩個(gè)矩形
- 創(chuàng)建連線連接兩個(gè)元素
<link rel="stylesheet" type="text/css" href="/my/joint/joint.css" />
<script src="/my/joint/jquery.js"></script>
<script src="/my/joint/lodash.js"></script>
<script src="/my/joint/backbone.js"></script>
<script src="/my/joint/joint.js"></script>
<div id="myholder"> </div>
<script>
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: document.getElementById('myholder'),
model: graph,
width: 600,
height: 100,
gridSize: 1
});
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
body: {
fill: 'blue'
},
label: {
text: 'hello',
fill: 'white'
}
});
rect.addTo(graph);
var rect2 = rect.clone();
rect2.translate(300, 0);
rect2.attr('label/text', 'world!');
rect2.addTo(graph);
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.addTo(graph);
</script>
