JointJS零基础入门01-JointJS1.1 JointJS简介1.2 JointJS组件的下载与加载1.3 简单示例1.4 效果图

65 阅读 0 评论 43 点赞

我是靠谱客的博主激昂金针菇，最近开发中收集的这篇文章主要介绍JointJS零基础入门01-JointJS1.1 JointJS简介1.2 JointJS组件的下载与加载1.3 简单示例1.4 效果图，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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 简单示例

<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();
        var rect2=rect.clone();
        rect1.translate(300);
        rect2.translate(450,100);
 
        var link=new joint.dia.Link({
            source: { id:rect.id },
            target: { id:rect1.id }
        });
        var link1=new joint.dia.Link({
            source: { id:rect.id },
            target: { id:rect2.id }
        });
 
        graph.addCells([rect,rect2,rect1,link,link1]);
 
        rect.on('change:position', function //事件：移动矩形
            (rect) {    //此方法对象只针对当rect的位置发生改变时，弹出对话框，获取其位置信息，对recr1无效果
            alert('QLY rect moved');
            console.log(rect.id, ':', rect.get('position'));
        })
    </script>
  </body>