画布编辑及自适应

1. 概述

本文将简单介绍画布的属性、自适应、辅助线等等内容。

首先用户需要了解下仪表板的构成：一张仪表板，就是一张画布。一张画布中有多个分页。每个分页中有多个组件。

2. 画布尺寸

1）新建仪表板时，可以选择画布常用尺寸，或自定义输入尺寸。自定义输入尺寸单位为 px，宽高值范围为 1-50000 px 。

2）进入仪表板后，可在画布下方调整画布尺寸。自定义尺寸输入后，点击设计界面空白处即可保存。

3. 画布自适应

画布自适应对整个仪表板的所有分页生效，共五种自适应方式：自动、高度铺满、宽度铺满、双向铺满、无。说明见下表。

4. 画布显示比例

画布显示比例的调整，不会改变画布实际大小，仅仅影响编辑器中画布展示的大小。

1）支持用户手动修改缩放值，或在下拉框中选择预设的缩放值。缩放值需介于 10-400% 之间。

2）也可以通过快捷键实现画布的缩放和移动，如下图所示：

3）此外，支持通过快捷键 Ctrl+\ （Mac 系统为 cmd+\）进入或退出画布全屏，查看仪表板效果。

5. 画布辅助线

5.1 辅助线操作

画布支持辅助线功能，可用于定位组件坐标，便于调整组件对齐。

操作方式如下：

1）鼠标在上方或左侧的标尺处移动，出现跟随移动的虚线辅助线，并显示当前刻度值。

2）添加辅助线：在标尺上某个位置单击即可添加一条辅助线。

3）添加辅助线后，鼠标移动至已添加的辅助线上，可进行以下操作：

4）隐藏辅助线：点击标尺左上顶角的 按钮，支持隐藏所有辅助线，不支持单条隐藏；隐藏后再次添加辅助线，所有辅助线恢复显示。

5.2 组件坐标与对齐

组件在画布中移动时，规则如下：