素材填充方式
1. 概述
1.1 应用场景
在仪表板中,设置页面背景、组件边框背景、图片组件和视频组件时,都涉及到素材填充方式的设置。本文将详细说明填充方式的种类及效果。
1.2 功能简介
不同对象可设置的填充方式见下表:
设置对象 | 支持的填充方式 |
页面背景 | 适应、填充、拉伸、点九图填充 |
组件边框背景 | 适应、填充、拉伸、点九图填充 |
图片组件内容 | 适应、填充、拉伸 |
2. 普通填充效果
普通填充效果如下表所示:
普通填充方式 | 说明 | 效果 |
适应 | 图片宽高比不变,等比拉大/缩小图片,确保宽/高充满页面/组件即可 | |
填充 | 图片宽高比不变,图片大小不变,从左上角开始依次用图片填充页面/组件,直到填满 | |
拉伸 | 图片宽度拉伸至页面/组件宽度,图片高度拉伸至页面/组件高度 |
3. 点九图填充效果
「点九图填充」能够在保持四个角不变的情况下,让边缘和内容区域根据需要进行拉伸,从而在不同设备上保持良好的显示效果。
3.1 设置点九图
1)以设置分页背景为例,使用「自定义上传」,上传图片后,点击「设置点九图」。如下图所示:
2)通过拉伸四条线,可以将图片划分为四类区域,如下图所示:
- 红色区域宽度高度不变
- 绿色区域高度不变,宽度拉伸,使得图片充满页面宽度
- 黄色区域宽度不变,高度拉伸,使得图片充满页面高度
- 蓝色区域高度和宽度拉伸,使得图片充满整个页面
3.2 点九图效果
1)原素材的四个角不变,让边缘和内容区域根据需要进行拉伸。如下图所示:
2)使用「点九图填充」时,可选择 3 种不同的倍数效果,红色区域的宽高会按照倍数调整。如下图所示: