时常可以在网上发现一些能用在工作流中的好工具，包括一些好的工具集成类应用，这些工具往往能在不经意间能提高到工作与学习的效率，今天也来给大伙分享一下，我个人现在自用的一款工具箱，也是我个人开发的一个项目，说说其使用的方法和它背后的一些故事。
先来看看这款的工具箱的全貌
| 形态一 | 形态二 |
|---|---|
如图所示，我将这款工具命名为V工具箱，大体分为两个区域，目前工具箱内集成了三个功能，包括
- 变色台 简单快捷的图像分享处理， 使用场景:方便快捷处理图片发微信,不打开PS的情况下快速处理图片等等
- 配置变换 特定环境下，快速切换项目的开发环境。
- 泥石流 根据指定的标题和URL制作醒目的泥石流大字图。
- 检查更新 支持应用本身的远程热更新
其中变色台和配置变换是已经完成并投入使用的功能，更新模块和另外的泥石流图文分享模块还在进一步完善当中。
从一段脚本说起
V工具盒里的配置变换功能，作用在于能够在选定指定的配置文件后，快速批量替换文件里面的环境变量参数，达到快速切换项目环境的目的。
说到这一功能的实现，还得从一段脚本说起，之前在工作项目开发的时候，笔者写了一些小段的脚本，包括处理一些项目里重复操作或者是简化发布部署流程的需求，其中项目的多环境部署，环境变量切换是一个经常遇到的需求，在经过一段时间的人工穿插多个文件修改的‘原始’方案后，我花了些时间，分析这个场景的共有逻辑，发现其可以抽取为一个公共的配置文件，而后我写了一段脚本，将这一过程变为了直观的命令点选方式，下面是脚本当时的样子
除此之外，脚本还集成了一个项目多国语言字段的新增修改以及检查的功能，在当时来看同样是一个相对变更频繁的需求，我也顺道将它以集成到脚本当中。
下面是脚本两段功能对应修改效果的示例（为方便演示，合成到了一个窗口中）
当脚本执行后，上面对应配置文件的参数就会做出相应的变化，两段脚本的核心逻辑都是对特定配置文件的自动化操作，而在这个过程中，也大大提高了相应场景的工作效率。
支撑这两段脚本功能的实现，主要用到了Node.js本身的特性，以及对commander和inquirer这俩Node中处理命令行的包的组合运用，其中commander负责响应用户在命令行的输入参数，也就是node xbot 后面change或plus字段，而inquirer则接管了对命令行参数的交互形式，以及后续的处理逻辑，交互形式就是说待选参数以列表，多选框，单选框还是怎样的形式去表现，从而与用户交互，做出下一步的参数选择，在上面说到的两段脚本中，就分别用到了list和多次input输入这两种不同形态的交互方式，下面截取了一段相关的代码。
// ----[命令事件]切换开发环境
commander
.command('change')
.description("一键切换开发环境")
.action(function (dir1) {
inquirer.prompt(changeEnvQues).then(result => {
let quesIndex = result.ENV
fs.readFile(configFilePath, 'utf8', (err, myData) => {
// dothings......
})
})
})
/* const changeEnvQues = [{
type: 'list',
message: '要切换到的开发环境?',
name: 'ENV',
choices: [{
value: '0' ,
name:"本地开发环境(192.168.1.1服务器)"
}, {
value: '1' ,
name: "Test环境(XX地区服务器)"
}, { value: '2', name: '其他环境'}]
}, {
type: 'confirm',
message: '确定要切换到这个环境？',
name: 'isChange',
default: true
}] */
可以看到commander能以链式调用的形式，去处理每一步的参数逻辑，而inquire的交互形式，具体选项等参数，可以装载在一个变量数组中，整个流程可以比较清晰的展开出来。
从脚本到工具箱
脚本这块到这里说的差不多，在后面的日常开发过程中，这些脚本大都运行良好，单纯功能上没有太大的问题，与此同时笔者在一段时间内尝试用Electron以前端的技术栈去开发和迁移一些原有的项目，在将脚本与小伙伴们共享的时候，笔者发觉命令行对于一些不熟悉相关操作的人来说，还是显得晦涩了一些，如果能将部分脚本以界面UI的形式操作，可能也是一种很好的方式去使用，于是在经过一段时间的迁移开发后，也就有了V工具盒的第一个功能-配置变换。
可以看到，从脚本'变身'为工具盒的一部分后，保留了脚本原有的大部分功能，相对脚本也改进了几个方面：
- 页面操作对于环境切换这一场景来说，似乎变得更方便了
- 配置文件可选，之前脚本的时候，配置文件路径必须在代码写好，不灵活
- 支持新增新的环境，相比之前脚本的环境列表这块也只能提前固定写好
总的来说，在将脚本迁移到前端页面的形式过程中，能真实感受到两种技术，或者说交互形式的异同，对于两者来说没有绝对的谁更适合，只有在不同场景下，不同人群的使用中，对谁更友好的区别，如果说这两种交互形式，对于笔者自用哪种更好，笔者我可能还是会选脚本的形式，毕竟自用来说，命令行无论从开发效率还是使用效率来说，还是比界面操作更为方便，关于这点，有不同想法的小伙伴也可以在评论留言，如果有更好的实现方式，也欢迎小伙伴们一起分享分享。
关于变色台
终于来到了变色台这块，这功能原本笔者想命名为变色龙，但发现市面上变色龙这词用的人实在有点多，而且在一些领域也有部分贬义，所以后面就改为了变色台。变色台的灵感来源于在生活中需要分享图片的时候，受制于手机本身编辑图片的不方便，而一些小的需改打开PS往往又显得臃肿而麻烦了，在学习canvas相关知识的过程中，笔者想着不如试着做一款简便的图片微调工具，方便日常分享照片的同时也能一窥canvas在前端的绘图机制，也是个不错的方法，于是也便有了变色台的诞生。
可以看到，一些照片分享中常用的黑白，减曝光，复古等处理，能让图片呈现出不同的效果，合理地运用相信能在日常社交的图文分享中发挥出不少用处，这里主要运用了Canvas2D的绘图能力，也是笔者对Cnavas学习之后的一次实践，说到Canvas这块网上有不少案例可供参考，不过在实现的过程中，也遇到了不少困难。
这里是变色台实现拖拽操作的过程
我们可以看到，这里实现了对上传图片的鼠标拖拽以及滑动缩放的操作，整个效果看起来还算流畅跟手，不然而在之前初期的开发过程中，图片的拖拽并没有像现在那样跟手，表现为鼠标推拽图片时总会慢一拍，而且在拖拽过程中鼠标准心并不会一直落在图片的正中心，整个画面能看出肉眼的卡顿感。
解决方法
经过一段时间的研究摸索，发现影响拖拽效果的因素主要有两个，一个是画布图片坐标与窗口坐标的定位，另一个是如何精准获取鼠标实时的坐标，及相对于图片的位置，这里牵扯到坐标系统和图片位置的计算，在一般页面的坐标中，我们一般可以通过下面的方法获取:
// body展示的宽度，表示body在浏览器内显示的区域宽度。
document.body.clientWidth
// body展示的高度，表示body在浏览器内显示的区域高度。
document.body.clientHeight
可以看到通过鼠标事件获取的坐标，与窗口client坐标系统是对等的，这里不用作太多转换，由于项目同时需要缩放预览的功能，这也是一个需要解决的问题。我的做法是在页面坐标中先获取到鼠标的位置，然后根据鼠标位置与图片的宽高差值，再和图片当前的宽高作比例，这样能获得相对准确的鼠标移动后的定位，同时也能确定好图片拖拽后的新的落脚位置，从实际效果看，这个转换方法也许还不够严谨，但是拖拽体验比之前得到了提升，消除了卡顿现象，代码行数也能控制在客观的范围内。
下面贴上我在这个项目里相关方法的思路（此处为伪代码）
canImg.x //图片X坐标（窗口）
canImg.y //图片Y坐标（窗口）
canImg.w = imgW //图片宽
canImg.h = imgH // 图片高
mouse.x //鼠标坐标X（移动前）
mouse.y // 鼠标坐标Y（移动前）
position.x // 鼠标坐标X（移动后，当前实时）
position.y // 鼠标坐标Y（移动后，当前实时）
let MouseRatioImageX = (mouse.x - canImg.x) / canImg.w // 计算X轴图片缩放比例
let MouseRatioImageY = (mouse.y - canImg.y) / canImg.h // 计算Y轴图片缩放比例
let newX = position.x - canImg.w * MouseRatioImageX // 图片Canvavs中新的绘制坐标X
let newY = position.y - canImg.h * MouseRatioImageY // 图片Canvavs中新的绘制坐标Y
另外前段时间，也记录了另外一个关于变色台的优化过程，详见 记录一次Canvas绘图优化的过程
Todo & 后记
写到这里，不知道大家对这款工具盒有些什么看法，关于V工具盒的点点滴滴，还有不少可以分享的地方，后续也会抽时间在这篇文章补充更多的使用或是开发心得，这里先放上工具盒的下载地址，下载安装后即可体验。
关于以后的计划，笔者打算在遇到合适的灵感/功能需求，或是学习了新的知识后，适时给工具盒添加更多的功能，让它变得更像一个多功能的趁手的工具盒~
也希望各位点进来的小伙伴们，可以分享自己的想法，如果能在我的心得分享中找到共鸣有所收获，那这篇文章也是有意义的😋
