[TOC] # PSD自动切图 psd2vuep提供psd文件直接转换为vuep组件和resource的功能 ## 准备工作 1. 整理psd文件 每一个单page对应一个psd文件，如`p1.psd`,`p2.psd`.... 2. 整理psd文件中的分层 如果有需求可以对分层文件进行命名，如action_btn，默认会对图层进行自动命名，格式为layer_(递增数字) 3. psd文件中可以存在分组，目前最多只能有一层。 4. 不需要的图层可以隐藏，隐藏的图层会被过滤。 5. 图层可以通过queryString的方式设置特殊处理，如设置为背景、使用bottom对齐等等，全部可用的特殊处理方法参考图层magic 6. 图层不能有滤镜效果，html无法尺寸滤镜效果。如果背景超出画布尺寸，可以进行适当裁剪。 7. 自动切图可以处理图片图层，文字图层，未栅格化的图层，图层分组。其他带有特效或者遮罩、蒙版、样式的图层请预先合并为普通图层。 例子：  导出结果： ```html <Page name="p1start" :enter="enterEffect" :leave="leaveEffect" @swipeUp="nextPage('p2rule')" bg="bg"> <Grouper layer="bottoms"> <Imager layer="shadow"></Imager> <Imager layer="layer_9"></Imager> <Imager layer="startbtn"></Imager> </Grouper> <Grouper layer="logos"> <Imager layer="layer_8"></Imager> <Imager layer="layer_7"></Imager> <Imager layer="layer_6"></Imager> </Grouper> <Grouper layer="loves"> <Imager layer="wahts"></Imager> <Imager layer="booom"></Imager> <Imager layer="players"></Imager> <Imager layer="point"></Imager> <Imager layer="layer_5"></Imager> <Imager layer="layer_4"></Imager> <Imager layer="layer_3"></Imager> <Imager layer="layer_2"></Imager> <Imager layer="layer_1"></Imager> <Imager layer="layer"></Imager> <Imager layer="usera"></Imager> <Imager layer="iloveyou"></Imager> </Grouper> <Grouper layer="tops"> <Imager layer="rulebtn"></Imager> <Imager layer="fly"></Imager> <Imager layer="logo"></Imager> </Grouper> </Page> ``` ## 图层Magic 可以给图层添加magic。以支持图层导出的定制化，magic的添加格式为 `图层名称?magic=值`，如`btn?mode=bottom` **支持的magic 列表** - `center` 提供对齐功能，可选值[x,y,xy]. 如`btn?center=x` - `mode` 提供布局的一些模式，可选值[bottom],如`btn?mode=bottom` - `bg` 提供背景设置功能，一个psd只能设置一个背景，默认以当前图层作为背景，如果背景是纯色，可以设置背景色值，如`bg?bg`，或者 `bg?bg=#ff0000` > 注：背景可以串联，比如按钮居下居中对齐，可以设置为`btn?mode=bottom&center=x` ## 开始自动切图 ```bash Usage: psd2vuep [options] Options: -h, --help output usage information -V, --version output the version number -s, --src <path> 添加psd所在目录，默认为当前目录下的psd文件夹 -o, --out <path> 输出文件夹路径，默认为当前目录下的dist文件夹 -p, --prefix <value> 图层命名前缀，在修改页面时很有用处 -t, --template <value> 选择使用的模板名称 -u, --usename <value> 是否使用图层名称做为图片名 -b, --base64 [path] 将小于15kb的文件使用base64进行编码 ``` 将psd文件下的pages切图到dist目录下： `psd2vuep -s ./psd -o ./dist` ## 上线前的优化 ## 1.对于小图片（目前为<= 15kb），提供自动合成base64的功能，在项目目录下执行：`psd2vuep -b`可以在assets目录下生成`vuep-base64-config.js`文件，在页面的`app.js`之前引入即可。 2.对于特别大的png背景图片可以考虑转换为jpeg格式进行二次压缩。