本文档为您介绍组件布局的操作方法,包括组件拖拽、组件缩放、组件旋转、操作快捷键等,帮助您更加方便快捷地在大屏中对组件进行布局。

新版DataV优化了组件布局时的拖动、缩放等功能,使操作更流畅,您可以在画布区使用鼠标对组件进行自由拖拽布局。支持的操作如下:

拖拽

  1. 选中一个或多个组件。
    • 选中一个组件:单击某个组件进行选中。
    • 选中多个组件:按住键盘上的Ctrl键(苹果键盘使用command键)后,单击多个组件进行选中。
    说明 您也可以在左侧的图层列表中,使用同样的方法选中一个或多个组件。
  2. 按住鼠标左键进行拖拽。
    鼠标拖拽组件位移

缩放

  1. 单选或者多选组件后,将鼠标移动到组件的边界框线附近。
  2. 出现缩放图标后,按住鼠标左键拖拽即可对组件进行大小缩放调整。

旋转

  1. 选择一个或多个组件,将鼠标移动到组件的边界框线附近。
  2. 出现旋转图标后,按住鼠标左键对组件进行旋转,调整组件布局。
    组件旋转

对齐

  1. 选中多个组件后,右侧的面板会出现组件对齐分布的图标按钮。
  2. 根据对齐方式,单击对应的对齐分布图标按钮。

    您可以进行左、中、右、顶、底等多种对齐方式,以及水平、垂直、平均的自动分布方式。


    组件对齐样式

设置透明度

  1. 选择一个或多个组件,页面右侧默认出现样式配置面板。
  2. 基础属性模块的其他选项中,单击透明度右上方的+-,或者在输入框中输入透明度值,改变组件透明度。
    组件配置透明度面板

    该功能方便大屏设计师按照自己对产品视觉的需求,自由地部署大屏。

右键菜单

在大屏画布或者图层栏中,右键单击某个组件,可在下拉菜单中可选择置顶置底上移一层下移一层复制删除等操作。

企业版及以上版本可以使用更多右键菜单功能,包括成组、解组、锁定、隐藏功能。
右键菜单功能面板

缩略图(企业版以上)

DataV在画布右下角提供了缩略图功能,您可以使用此功能,随意缩放您的大屏项目。

  1. 拉动缩略图下方的比例尺,或者单击+-调整画布的大小比例,使得大屏可以随意放大缩小。
  2. 当您的大屏超出画布大小时,您可以拖动缩略图的高亮蓝色边框,定位到大屏的任意位置。
    缩略图面板
  3. 单击缩略图中右下角的缩略图图标图标,可以选择关闭或开启缩略图。
    缩略图功能操作

快捷键

新版DataV新增了编辑器界面和多个组件快捷键功能。
  • 编辑器界面快捷键
    快捷键功能介绍面板
    • 开关图层面板:Ctrl/Cmd + ←
    • 开关组件面板:Ctrl/Cmd + ↑
    • 开关右侧面板:Ctrl/Cmd + →
    • 画布缩放到最佳位置:Ctrl/Cmd + a
  • 组件快捷键
    • 分组:Ctrl + G
    • 解组:Ctrl + Shift + G
    • 撤回分组:Ctrl + Z
    • 复制粘贴组件:Ctrl + C / Ctrl + V