欢迎光临!
若无相欠,怎会相见

JointJS入门之 Hello World!

 JointJS做可拖拽流程图

这学期,好像是学院要求吧,每个人都得有综合课程设计,我也不例外。不过还好,我的导师很民主,问我擅长什么?我说我擅长前端,建设网站,导师就让我使用JointJS做一个可拖拽的流程图。

Hello World

一般我们学任何语言的时候,第一个程序一般就是 “向世界问好”,表示我入门了!这个也不例外,我们做一幅图表示入门了!虽然我的项目已经完成了一小部分,但是,我还是从头来写一遍,加深印象。好记性,不如烂笔头!

依赖文件

JointJS的官方网站是 : www.jointjs.com,rappid是收费的,但是,我们需要的JointJS是开源免费的。在这里:https://www.jointjs.com/opensource 页面的接近最下方,可以看到依赖文件有:jQuery,lodash,backbone。

然后,按照上面的方式引入js和css文件。

开始编写

官网给了一个Hello World的例子,链接:http://resources.jointjs.com/tutorial/hello-world 。我们仿照例子来写。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/joint.min.css" />       
        <script src="js/jquery_3.1.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/lodash_3.10.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/backbone_1.3.3.js" type="text/javascript" charset="utf-8"></script>            
        <script src="js/joint.min.js" type="text/javascript" charset="utf-8"></script>
    </head> 
    <body>
	    <div id="myholder"></div>
		<script type="text/javascript">
		
		    var graph = new joint.dia.Graph;
		
		    var paper = new joint.dia.Paper({
		        el: $('#myholder'),  //画布所在的地方
		        width: 600,
		        height: 200,
		        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' } 
		        }
		    });
		
		    var rect2 = rect.clone();
		    rect2.translate(300);
		
		    var link = new joint.dia.Link({
		        source: { id: rect.id },
		        target: { id: rect2.id }
		    });
		
		    graph.addCells([rect, rect2, link]);
		
		</script>
    </body>
    
</html>

上面的结果如图:

而且还可以拖拽成这样:

当然,我们做的只是最简单的功能,其他功能还得慢慢添加。

注意事项

我在查找文档、教程的时候,发现有前辈给出警告,说:

1、注意组件加载顺序,尤其是backbone.js的位置,第一或第二;

但实际中,我测试的时候,backbone.js放在第一位,用 HBuilder 查看的时候,会报错,放在第二位,也是。因此我还是用的官方给的方式。就这样,完成了入门仪式。。。

补充

这个月真的很忙,一直忙着找工作,到处找机会去听宣讲会,投简历,笔试。终于在9月的最后一天,写了这篇文章。以后尽力去更新文章,记录我的技术成长。

赞(0) 打赏
转载请注明:飘零博客 » JointJS入门之 Hello World!
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

欢迎光临