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月的最后一天,写了这篇文章。以后尽力去更新文章,记录我的技术成长。
最新评论
这个软件有bug的,客户端windows有些键不能用如逗号、句号
没有收到邮件通知
我的评论通知貌似坏掉了,定位一下问题
测试一下重新部署后的邮件功能
居然看到自己公司的MIB库,诚惶诚恐
那可能是RobotFramework-ride的版本问题。我装的1.7.4.2,有这个限制。我有空再尝试下旧版本吧,感谢回复。
你好!我在python2.7中安装RobotFramework-ride的时候提示wxPython的版本最高是2.18.12,用pip下载的wxPython版本是4.10,而且我在那个路径下没有找到2
真的太好了,太感谢了,在bilibili和CSDN上都找遍了,终于在你这里找到了