Skip to content

Editor

图形编辑器,可移动、缩放、旋转、倾斜,支持多选、框选、打组、锁定、层级,可配置样式

关键属性

target:UI | UI[]

设置需要编辑的元素, 默认通过 编辑选择器 自动选取 editable 元素(不用设置 draggable )。

hoverTarget:UI

设置 hover 状态的元素, 默认通过 编辑选择器 自动选取 editable 元素。

config: IEditorConfig

编辑器配置,实例化时传入,可实时修改(调用 update 方法更新)。

hittable: boolean

编辑器是否响应交互事件,默认为 true。

设为 false 后,将禁用编辑器交互。

只读属性

list: UI[]

当前选中的元素列表,未选中时为空。

multiple: boolean

是否选中了多个元素。

single: boolean

是否只选中了单个元素。

dragging: boolean

是否正在拖拽编辑器,包含拖拽控制点、边。

辅助属性

buttons: Group

按钮组,放置旋转控制点及自定义按钮,整体 around 对齐, 位于编辑器底部,可以 进行配置

element: UI

选中元素的唯一代表。

单选时为选中元素, 多选时为模拟元素(代替多个元素),一般用来同步布局编辑框。

editBox: IEditBox

编辑框,负责编辑框的显示与交互。

editTool: IEditTool

编辑工具,后续可以针对不同图形做扩展。

selector: IEditSelect

选择器,负责单选、多选、框选元素的交互,渲染元素选中、hover 线框。

关键方法

元素

hasItem ( item: UI): boolean

是否已选中某个元素。

addItem ( item: UI)

新增一个元素到选中列表。

removeItem ( item:UI)

移除一个已选中的元素

打组

group ( custom: IGroup | IGroupInputData): IGroup

将选中的元素进行打组,支持传入一个自定义的 Group 实例 或 json 对象。

新的 group 将增加如下属性:

ts
group.editable = true
group.hitChildren = false

ungroup ( ): UI[]

将选中的元素进行解组。

锁定

lock ( )

锁定选中的元素。

元素可以被单选,但是不能编辑。

unlock ( )

解锁选中的元素。

层级

toTop ( )

移动选中元素到最顶层(所属 Group 中)。

toBottom ( )

移动选中元素到最底层(所属 Group 中)。

更新

update ( )

手动更新编辑器的布局、样式等。

updateEditTool()

更新编辑工具,选择元素后自动调用此方法。

手动操作

move ( x: number, y = 0): void

位移选中元素 增量操作

scaleOf ( origin: IPointData, scaleX: number, scaleY = scaleX)

以编辑框的 inner 坐标 origin 为原点,缩放选中元素 增量操作

rotateOf ( origin: IPointData, rotation: number)

以编辑框的 inner 坐标 origin 为原点,旋转选中元素 增量操作

skewOf ( origin: IPointData, skewX: number, skewY = 0)

以编辑框的 inner 坐标 origin 为原点,倾斜选中元素 增量操作

快捷键

按住Ctrl / Command 键:

将光标移动至四条边上,拖动可倾斜元素。

将光标移动至控制点上,拖动可旋转元素。

按住 Alt 键 :中心缩放 / 倾斜 (Alt + Shift 键可组合)。

按住 Shift 键:多选 / 固定比例缩放 / 固定方向移动 / 以对角为中心旋转。

调整大小

编辑器默认通过修改元素宽高、路径坐标来调整大小。

同时也支持通过修改缩放来调整大小, 了解 editSize

历史记录

可以在 app.tree 上监听元素的变化做历史记录操作。

操作图形会同时产生多个属性的变更,通过事件监听才能获取全面。

ChildEvent

PropertyEvent

事件

编辑器事件,手动操作也会触发。

EditorEvent

EditorMoveEvent

EditorScaleEvent

EditorRotateEvent

EditorSkewEvent

编辑工具

内置两种编辑工具,可扩展。

EditTool

LineEditTool

配置

编辑器配置

API

Editor

示例

点击选中元素

元素必需要有 editable 属性才能被选取, 可通过 app.editor 快速访问编辑器实例。

ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'

const app = new App({ view: window, editor: {} })

const rect1 = Rect.one({ editable: true, fill: '#FEB027', cornerRadius: [20, 0, 0, 20] }, 100, 100) 
const rect2 = Rect.one({ editable: true, fill: '#FFE04B', cornerRadius: [0, 20, 20, 0] }, 300, 100)

app.tree.add(rect1)
app.tree.add(rect2)

显示底部旋转控制点

默认会继承基础样式,可以进一步 设置 旋转控制点的样式。

ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'

const app = new App({  
    view: window,
    editor: { rotatePoint: {} }
})

const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)

app.editor.target = rect

添加底部固定按钮

元素旋转、翻转后仍保持固定方位,可以 设置 按钮组的方位。

ts
import { App, Rect, Box } from 'leafer-ui'
import '@leafer-in/editor'

const app = new App({ 
    view: window,
    editor: { buttonsFixed: true }
})

const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)' }, 100, 100)
app.tree.add(rect)

app.editor.target = rect

app.editor.buttons.add(Box.one({  // 添加移除按钮
    around: 'center',
    fill: '#FEB027',
    cornerRadius: 20,
    cursor: 'pointer',
    children: [{ tag: 'Text', fill: 'white', text: '移除', padding: [7, 10] }]
}))

显示中间控制点,并修改样式

默认会继承基础样式、旋转角度, 可以精确 设置 每个控制点的样式。

ts
import { App, Rect } from 'leafer-ui'
import '@leafer-in/editor'

const app = new App({  
    view: window,
    editor: {
        point: { cornerRadius: [0, 0, 10, 0] },
        middlePoint: { width: 12, height: 4, cornerRadius: 2 }
    }
})

const rect = Rect.one({ editable: true, fill: 'rgb(50,205,121)', cornerRadius: 30 }, 100, 100)
app.tree.add(rect)

app.editor.target = rect

监听选择事件

ts
import { App, Rect } from 'leafer-ui'
import { EditorEvent } from '@leafer-in/editor'

const app = new App({
    view: window,
    editor: {}
})

app.tree.add(Rect.one({ fill: 'rgb(50,205,121)', editable: true }, 100, 100))
app.tree.add(Rect.one({ fill: 'rgb(50,205,121)', editable: true }, 300, 100))

app.editor.on(EditorEvent.SELECT, (e: EditorEvent) => { 
    console.log(e.editor.list)
})

Released under the MIT License.