Skip to content

组件操作

本文介绍 HFLVEditor3 编辑器中组件的拖拽添加、调整变换以及右键菜单等核心操作。

拖拽添加组件

  1. 打开左侧组件库,展开任意分组。
  2. 鼠标左键按住目标组件不放,将其拖入中间画布区域的任意位置。
  3. 松开鼠标左键,即完成组件的添加。

组件拖拽示意图

拖拽移动组件

在画布中选中已添加的组件,按住鼠标左键拖动,即可改变组件在画布中的位置。

调整组件尺寸与旋转

选中组件后,组件周围会出现操作框,包含以下控制点:

  • 8个锚点:位于操作框的四角与四边中点。拖动锚点可调整组件的宽度、高度或同时调整两者。
  • 旋转点:位于操作框外侧上方。拖动旋转点可对组件进行顺时针或逆时针旋转。

组件操作框示意图

TIP

当组件尺寸小于固定阈值时,选中组件不会出现操作框。可以通过修改右侧通用样式中的相应属性值来调整组件的大小,位置,选择角度等信息

右键菜单操作

选中组件后,单击鼠标右键弹出操作菜单,支持以下功能:

功能说明
复制复制当前组件
剪切剪切当前组件
粘贴粘贴已复制/剪切的组件
等距粘贴设置距离后,一次操作可粘贴多个组件,支持横向或纵向等距排列
删除删除当前组件
锁定锁定组件,禁止移动和编辑
置顶将组件移至组件数组的末尾(最高层级)
置底将组件移至组件数组的开头(最低层级)
上移将组件在数组中的位置后移一位,提升层级
下移将组件在数组中的位置前移一位,降低层级

组件右键菜单示意图

层级规则说明

画布采用绝对布局,组件按在组件数组中的顺序依次渲染:

  • 数组中索引值越大的组件,渲染层级越高
  • 层级高的组件会遮挡层级低的组件。

因此,通过置顶、置底、上移、下移操作可以调整组件的显示层级关系。

等距粘贴说明

等距粘贴时,可选择以鼠标点击位置原组件位置作为起始点,支持横向或纵向批量粘贴。

组件等距粘贴示意图

组件等距粘贴示意图

TIP

等距粘贴目的是快速的生成同组件网格布局,可设置水平,垂直间距。默认起始点为当前鼠标位置,关闭则以复制组件为左上第一个组件排列

基于 VitePress 构建