边框图表是大屏专有的图表类型,用于设置边框,背景等。比如下面这个模板中,数据图表的灰色边框和半透明背景色就是用边框图表实现的:
边框图表的样式设置
边框图表的样式设置分为「边框设置」和「背景设置」两大部分。
背景可以设置颜色,背景色是否延伸到边框内,背景模糊等选项。
边框设置可以选择无边框,简单边框,内置边框和自定义边框。
简单边框
选择简单边框可以配置边框颜色,宽度,样式和圆角,效果如下:
内置边框
选择内置边框时,效果如下:
目前提供了 20 种内置的图片边框,未来还会不断增加:
自定义边框
自定义边框支持用户自己上传图片作为边框素材,并需要规定如何将图片切割为边框:
我们把即将作为边框的图片分为 9 个区域:
配置中的顶部、底部、左侧、右侧切割像素则对应图中的 top,bottom,left,right。
- 区域 1-4 为角区域。每一个都用只使用一次来形成最终边框的四个角,这些区域中的图像不会重复和拉伸。
- 区域 5-8 为边区域。这部分区域中的图像在最终的边框中会拉伸来填满各自对应的四个边。
- 区域 9 为中心区域。这部分区域的图像会被抛弃。