飘零博客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月的最后一天，写了这篇文章。以后尽力去更新文章，记录我的技术成长。
![[译] Lesson 01: Theano简介-飘零博客](https://www.liangz.org/wp-content/uploads/2017/12/s-20171208-220926.png)
最新评论
没有收到邮件通知
我的评论通知貌似坏掉了，定位一下问题
测试一下重新部署后的邮件功能
居然看到自己公司的MIB库，诚惶诚恐
那可能是RobotFramework-ride的版本问题。我装的1.7.4.2，有这个限制。我有空再尝试下旧版本吧，感谢回复。
你好！我在python2.7中安装RobotFramework-ride的时候提示wxPython的版本最高是2.18.12，用pip下载的wxPython版本是4.10，而且我在那个路径下没有找到2
真的太好了，太感谢了，在bilibili和CSDN上都找遍了，终于在你这里找到了
看到下面的链接了，不用了。