对于设计师和开发而言,「切片」已经是一个非常熟悉且常用的功能。切片的使用方式简单快捷,开发可以通过切片功能快速得到前端需要的切图。
功能入口
在左侧组件栏点击「切片」,或使用快捷键S
,可开启切片模式。
开启后,可在画布中创建任意切片。
如何使用切片
创建切片内容
与画矩形的操作相同,可以通过画框来控制切片需要切取的范围大小。
画框可以随时修改宽高及层级位置。
导出切片选项
导出切片时,可以选择是否使用切片的实际大小导出该切片包含的内容; 如果勾选「裁剪透明像素边缘」,可以选择只导出该切片下的有效内容,去除周围的透明像素。
当直接在画板中创建切片时,右侧画板将显示导出画板背景色的选项。如果需要应用或取消导出画板背景色,点击「修改按钮」可以跳转到画板设置,勾选或取消勾选「导出时包含背景色」。
切片的优点
相比于直接导出的功能,切片功能除了尺寸上十分自由外,还更利于实际开发环境的使用:
- 直接控制导出所需图片的大小,不论是需要多裁剪出空白区域,还是只想要导出某图片的部分模块;
- 当一个配图有多个相关图层,在不需要手动调整设计稿的图层、尺寸或任意属性的情况下,可以直接切出想要的内容区域;
- 设计过程中有的配图、图标等直接导出时不一定保持在同一个尺寸,但在开发过程中,将配图写在同一个大小上可让样式更规整统一,布局更具有逻辑性。使用切片可以直接解决这个问题。