CUT-BOY 保护眼睛 & 提升质量 & 提高效率

马上而立之年的UI工程师遇到了一个很棘手的问题,年纪大了,老眼昏花,切图切的不太得劲;

比如视频中的这种操作,高度近视的大龄切图仔真是有点力不从心了…

而一些机器学习人工智能神经网络自动根据设计稿生成代码的方案,一直都只听说…从来没见实用…

针对这种情况CUT-BOY诞生了!

主要目的是为了减少UI重构页面时的手工工作量降低设计工具和页面的切换频率,尽可能的实现在设计工具中只需要进行切图复制样式操作。

项目地址 CutBoy

安装

1
npm install cut-boy

安装完成之后目录结构如下:

普通项目

  • HTML页面按照对应的目录引入相关文件;
1
2
3
4
5
<link rel="stylesheet" href="./node_modules/cut-boy/css/debug.css">
<script type="text/javascript" src="./node_modules/cut-boy/lib/tinycolor.js"></script>
<script type="text/javascript" src="./node_modules/cut-boy/lib/opencv.wasm.js"></script>
<script type="text/javascript" src="./node_modules/html2canvas/dist/html2canvas.min.js"></script>
<script type="text/javascript" src="./node_modules/cut-boy/index.js"></script>
  • 初始化
1
2
3
4
5
6
7
<script>
window.onload = function(){
new CutBoy({
pageImageSrc:'./page.png'//原始设计稿图片路径
});
}
</script>

Vue项目

假设该Vue项目使用Vue-cli2构建,那么需要对main.jsApp.vue以及package.json等文件进行一定的修改;

  • main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})

/* cut-boy */
import CutBoy from 'cut-boy'
new CutBoy({
pageImageSrc: '/static/page.jpg' // 原始设计稿图片路径
})

引入组件代码并进行初始化,原始设计稿图片建议放在static目录中。

  • App.vue
1
2
3
<style>
@import '../node_modules/cut-boy/css/debug.css';
</style>

引入组件样式;

  • package.json
1
2
3
4
5
6
7
8
"scripts": {
"dev": "node --max_old_space_size=4096 node_modules/.bin/webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"unit": "jest --config test/unit/jest.conf.js --coverage",
"test": "npm run unit",
"lint": "eslint --ext .js,.vue src test/unit",
"build": "node --max_old_space_size=4096 build/build.js"
},

因为opencvjs文件有10M,为了保证构建打包时内存不溢出,需要增加nodejs的内存限制。

初始化时只需要指定原始设计稿图片路径即可;

所谓原始设计稿图片是指你把PSD或者Sketch转换成的图片:

把设计稿转换成图片时最好不要进行有损压缩

主要功能

1、位置偏移计算

再也不需要手动量位置了!

只需要点击某个元素即可获得其位置偏移量了,根据console中输入的位置偏移量设置CSS属性即可;

另外还可以查看点击元素的匹配结果,如果你对console中的位置偏移量有怀疑,通过匹配结果可以知道是不是程序匹配异常了;

2、颜色获取及分析

在某些时候因为某些原因在设计稿中复制或者查看颜色时可能并没有,因此CUT-BOY提供了颜色获取及分析功能

鼠标点击页面中某个位置之后在console中可以直接看到当前位置在对应设计稿中的颜色以及和周围颜色的RGBA值的方差,如果方差为0则意味着以该点为中心上下左右四个方向2个像素的范围内为纯色。

3、查看还原效果

点击差异比较可以实时查看页面的还原效果;

示例图片中可以清楚的看到有些元素页面中的位置和设计稿中的位置出现了偏差。

完整操作流程如下:

总结

CUT-BOY刚刚开发完成,欢迎大家使用(踩坑)!

因为用到了Webassembly,所以重构页面时最好使用高版本Chrome浏览器!

最后衷心的希望各位大佬深度学习自动重构的究极方案早日进入实用阶段。