jquery实现流程图绘制工具——展现红警三建造出兵操作 ——一简介

作为一名红警三玩家，为了提高自己的技术，我会时不时的看一些别人的录像来学习，所以想要对录像的信息进行一定的记录。
单纯用文字是很麻烦的，且不够直观，容易啰嗦。
故而我有这样一个想法：
能否用图表比较详细又直观的展示玩家的操作，让萌新能够方便又高效的学习大佬的操作呢？
基于这一想法，我做了一个流程图绘制工具，希望能够去记录并展示玩家的一些操作。
流程图绘制工具技术路线：html + css + js, 使用框架jquery

总目录

一、简介

二、代码初步介绍

三、代码细节介绍

======================= 大爽歌作，made by big shuang =======================

一、该流程图主要用于记录展示玩家建造和出兵的操作。

其他的操作看后续是否能够整合进来，因为有的操作流程图可以整合进来展示，
有的则不好弄（比如具体到兵和敌人的对战操作，这个看后面是否发现新的适合展示的图表形式吧）

流程图绘制工具使用演示见本人投稿：https://www.bilibili.com/video/BV1ZK4y1h7Po

流程图绘制效果如下

流程图绘制出来的效果如下（以下图片经过简单的ps裁剪）：
【红警三】无限岛盟军vs凶残欧列格流程图剪辑展示：

开局一兵营，一狗一工兵，5PK5标枪，连着出，一矿两电再一电，搬基地，开海矿
开完海矿上高地，一矿一电升T2，建机场，PK标枪接着出。
机场建好三冰冻，敌有米格出菠萝，建完重工补个电，出坦克，护小兵
一个守护开激光，PK标枪不要停
狂出坦克补冰冻，敌有空军爆标枪，最后来个acv，干掉海矿就靠它！
（其实维和更不错，可惜UP建晚了）

对应的录像视频是BV1GE411r79W

本项目1.1 版本已完成（未详细测试）
对应github地址：
https://github.com/BigShuang/Red-Alert-3-Battle-Flow-Chart

二、当前进度与功能。

目前的版本为1.1版本
1.1版本新增功能：自动读取录像

使用方法

用浏览器（推荐chromw）打开主页.html 即可开始绘制
使用ra3autohander\主程序.exe可自动读取录像文件信息，导出流程图信息;
如果你安装了python3（无需安装任何第三方库），也可以运行ra3autohander\main_zh.py, 效果一样。

现有限制：

录像自动读取分析程序不能保证完全准确。
只能展示盟军和苏联的，不能兼容帝国，帝国的出兵方式特殊

常见问题

绘制完成后如何截图?

我没有实现图片导出功能，不过你可以用chrome自带的截图api来截图，方法如下:
在chrome中, CTRL+SHIFT+I 打开开发者工具（DevTools）,
在开发者工具（DevTools）中，CTRL+SHIFT+P打开命令菜单（Command Menu）,
在命令菜单中输入 screenshot,
单击capture full size screenshot即完成截图。

时间线：

2020年9月4日
已经做好了大部分了，还有些也是很重要的功能要补充，预计这两周内应该就能好（希望不是flag）。
2020-9-10
1.0 版本已完成（未详细测试）
2020-9-30
1.1 版本已完成（未详细测试）
ra3autohander\主程序.exe 可自动读取录像文件信息，导出流程图信息
如果你安装了python3（无需安装任何第三方库），也可以运行ra3autohander\main_zh.py, 效果一样。
目前限制：
1 - 不支持帝国阵营
2 - 不支持地图自带多基地或者除基地外有其他出兵建筑的录像。
3 - 不支持玩家占领敌人建筑出兵的录像

jquery实现流程图绘制工具——展现红警三建造出兵操作 ——一 简介

总目录