jointJs HELLO WORLD

image.png

• 引入jointJs依赖
• 定义graph、paper
• 创建两个矩形
• 创建连线连接两个元素

<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>

参考
Joint tutorial