jointjs Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Joint JS Demo</title>
    <link rel="stylesheet" href="../libs/joint.min.css">
    <script src="../libs/jquery.js"></script>
    <script src="../libs/lodash.js"></script>
    <script src="../libs/backbone.js"></script>
    <script src="../libs/joint.js"></script>
</head>
<body>
<div id="myholder"></div>
<div id="myholder-small"></div>
<script type="text/javascript">

    var graph = new joint.dia.Graph;

    var paper = new joint.dia.Paper({
        el: $('#myholder'),
        width: 600,
        height: 100,
        model: graph,
        gridSize: 1
    });

    var rect = new joint.shapes.basic.Rect({
        position: { x: 100, y: 30 },
        size: { width: 100, height: 30 },
        attrs: { rect: { fill: 'blue' }, text: { text: 'my box', fill: 'white','text-transform': 'capitalize' } }
    });

    var rect2 = rect.clone();
    rect2.translate(30);       // 向x轴正方向偏移300px
    rect2.translate(0, 20);    // 向y轴正方向偏移200px

    var rect3 = rect.clone();
    rect3.translate(30,10);

    var link = new joint.dia.Link({
        source: { id: rect.id },
        target: { id: rect2.id }
    });

    var link1 = new joint.dia.Link({
        source: { id: rect2.id },
        target: { id: rect3.id }
    });

    graph.addCells([rect, rect2, rect3, link,link1]);

    rect2.on('change', function(element){
        console.log(element.id, element.get('position'));
    })

</script>
</body>
</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

jointjs Demo

jointjs Demo

推荐阅读更多精彩内容

友情链接更多精彩内容