JointJS零基础入门01-JointJS

作者：小小林熬夜学编程 | 2024-05-02 21:51:56

踩

jointjs

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
2
3
4
5
6
7
8
9

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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

1.4 效果图

在这里插入图片描述

ps:注意

1、注意组件加载顺序，尤其是backbone.js的位置，第一或第二；
2、注意方法调用的大小写；
3、注意英文分号；
4、喜欢就自己敲一遍效果最佳哦(⊙o⊙)！

本文转载链接如下

本文转载链接
https://blog.csdn.net/u013411654/article/details/77248474

如有侵权请联系删除，作为自己以后学习资料使用

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小小林熬夜学编程/article/detail/526286