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 HelloWorld

<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();
        rect1.translate(300);

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

        graph.addCells([rect,rect1,link]);

    </script>
</body>

1.4 效果图

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

JointJS零基础入门01-JointJS安装&HelloWorld

1.2 JointJS组件的下载与加载

1.2.1 JointJS组件下载

1.2.2 JointJS组件加载

1.3 HelloWorld

1.4 效果图

猜你喜欢