组件坐标与辅助线
在大屏编辑器中,组件的布局不仅可以通过拖拽来完成,还可以依靠 坐标数值输入 和 辅助线吸附 进行精准控制。
借助坐标与辅助线功能,用户能够快速实现整齐、规范的画布排版。
1. 组件坐标
每个组件在画布上的位置和大小均由坐标参数控制,主要包括:
- X 坐标:组件左上角相对于画布左边界的水平距离(单位:像素)。
- Y 坐标:组件左上角相对于画布上边界的垂直距离(单位:像素)。
- 宽度(W):组件的水平尺寸(单位:像素)。
- 高度(H):组件的垂直尺寸(单位:像素)。
- 旋转角度(R):组件顺时针旋转的角度值(单位:度)。
坐标参数可在 属性面板 中直接输入数值,也可以通过鼠标拖拽操作实时更新。
2. 辅助线功能
为帮助用户快速对齐组件,画布提供了多种辅助线功能:
- 中心辅助线:当组件移动接近画布中心时,自动出现水平/垂直中心线提示。
- 边缘对齐辅助线:当组件边缘接近画布边缘或其他组件边缘时,自动显示辅助线并吸附。
- 间距辅助线:当多个组件之间间距一致时,自动提示等间距分布。
辅助线在移动和缩放组件时会自动触发,帮助用户快速完成对齐与排版。
3. 吸附与对齐
- 自动吸附:组件在靠近辅助线时会自动吸附,保证精准对齐。
- 手动调整:若不希望触发吸附,可在拖动时按住
Alt
键(或自定义快捷键),临时关闭吸附功能。 - 与网格对齐:在画布设置中启用“网格对齐”后,组件移动将自动贴合网格点。
4. 参考线设置
用户可以手动添加或调整参考线,作为组件对齐的依据:
添加参考线:从画布边缘的标尺区域拖拽,即可生成水平或垂直参考线。
移动参考线:点击并拖拽参考线,调整其位置。
删除参考线:将参考线拖回标尺区域即可移除。
使用技巧
- 在需要 精确定位 时,推荐直接在属性面板中输入坐标值。
- 结合 辅助线吸附 与 对齐工具,能快速实现组件的整齐布局。
- 使用 参考线 进行复杂排版时,可先规划好网格或基准线,再批量调整组件。
- 在大屏中嵌入地图时,建议利用辅助线保持地图与其他业务组件的边界对齐。