组件坐标与辅助线

在大屏编辑器中,组件的布局不仅可以通过拖拽来完成,还可以依靠 坐标数值输入辅助线吸附 进行精准控制。
借助坐标与辅助线功能,用户能够快速实现整齐、规范的画布排版。


1. 组件坐标

每个组件在画布上的位置和大小均由坐标参数控制,主要包括:

  • X 坐标:组件左上角相对于画布左边界的水平距离(单位:像素)。
  • Y 坐标:组件左上角相对于画布上边界的垂直距离(单位:像素)。
  • 宽度(W):组件的水平尺寸(单位:像素)。
  • 高度(H):组件的垂直尺寸(单位:像素)。
  • 旋转角度(R):组件顺时针旋转的角度值(单位:度)。

坐标参数可在 属性面板 中直接输入数值,也可以通过鼠标拖拽操作实时更新。

image-20250909115523743


2. 辅助线功能

为帮助用户快速对齐组件,画布提供了多种辅助线功能:

  • 中心辅助线:当组件移动接近画布中心时,自动出现水平/垂直中心线提示。
  • 边缘对齐辅助线:当组件边缘接近画布边缘或其他组件边缘时,自动显示辅助线并吸附。
  • 间距辅助线:当多个组件之间间距一致时,自动提示等间距分布。

辅助线在移动和缩放组件时会自动触发,帮助用户快速完成对齐与排版。

image-20250909115639462


3. 吸附与对齐

  • 自动吸附:组件在靠近辅助线时会自动吸附,保证精准对齐。
  • 手动调整:若不希望触发吸附,可在拖动时按住 Alt 键(或自定义快捷键),临时关闭吸附功能。
  • 与网格对齐:在画布设置中启用“网格对齐”后,组件移动将自动贴合网格点。

image-20250909115720768


4. 参考线设置

用户可以手动添加或调整参考线,作为组件对齐的依据:

  • 添加参考线:从画布边缘的标尺区域拖拽,即可生成水平或垂直参考线。

  • 移动参考线:点击并拖拽参考线,调整其位置。

  • 删除参考线:将参考线拖回标尺区域即可移除。

    image-20250909115802840


使用技巧

  1. 在需要 精确定位 时,推荐直接在属性面板中输入坐标值。
  2. 结合 辅助线吸附对齐工具,能快速实现组件的整齐布局。
  3. 使用 参考线 进行复杂排版时,可先规划好网格或基准线,再批量调整组件。
  4. 在大屏中嵌入地图时,建议利用辅助线保持地图与其他业务组件的边界对齐。

results matching ""

    No results matching ""