Skip to content

自定义控制点

自定义内部编辑器的第 2 步是: 自定义控制点

控制点一般用来调整路径节点,文本编辑器需要通过创建 DOM 代替控制点,可自由定义。

自定义步骤

1. 创建控制点

onCreate() 方法中创建自定义控制点。

实例化内部编辑器时会自动调用此方法。

2. 载入控制点

onLoad() 方法中添加控制点到视图中。

当用户双击元素时,会打开内部编辑器,自动调用此方法载入。

3. 更新控制点

onUpdate() 方法中更新控制点位置、状态。

当用户操作视图、元素时,会自动调用此方法更新。

4. 卸载控制点

onUnload() 方法中将控制点从视图中移除。

当用户退出内部编辑器时,会自动调用此方法卸载。

路径编辑器一般通过点击完成按钮退出,文本编辑器一般点击页面其他位置自动退出。

继承

InnerEditor

示例

ts
import { Box, DragEvent } from 'leafer-ui'
import { InnerEditor, registerInnerEditor } from '@leafer-in/editor'


@registerInnerEditor()
export class CustomEditor extends InnerEditor {

    public get tag() { return 'CustomEditor' }

    public point: Box

    public onCreate(): void {  // 1. 创建控制点 
        this.view.add(this.point = new Box()) // 可以添加多个
        this.eventIds = [
            this.point.on_(DragEvent.DRAG, () => { console.log('drag point') })
        ]
    }

    public onLoad(): void { // 2. 载入控制点  
        this.point.set({ ...this.editBox.getPointStyle(), strokeWidth: 1 })
        this.editBox.add(this.view) // 添加在 editor 或 editBox 中都可以, 注意editBox本身具有定位
    }

    public onUpdate(): void {   // 3. 更新控制点  
        const { boxBounds, worldTransform } = this.editor.element // 单个选中时 element 代表选中的元素
        const { x, y } = boxBounds, { scaleX, scaleY } = worldTransform
        this.point.set({ x: (x + 15) * Math.abs(scaleX), y: (y + 15) * Math.abs(scaleY) })
    }

    public onUnload(): void {  // 4. 卸载控制点  
        this.editBox.remove(this.view)
    }

    public onDestroy(): void {
        this.point = null
    }

}
js
import { Box, Group, DragEvent } from 'leafer-ui'
import { InnerEditor } from '@leafer-in/editor'


export class CustomEditor extends InnerEditor {

    get tag() { return 'CustomEditor' }

    onCreate() {  // 1. 创建控制点 
        this.view.add(this.point = new Box()) // 可以添加多个
        this.eventIds = [
            this.point.on_(DragEvent.DRAG, () => { console.log('drag point') })
        ]
    }

    onLoad() { // 2. 载入控制点  
        this.point.set({ ...this.editBox.getPointStyle(), strokeWidth: 1 })
        this.editBox.add(this.view) // 添加在 editor 或 editBox 中都可以, 注意editBox本身具有定位
    }

    onUpdate() {   // 3. 更新控制点  
       const { boxBounds, worldTransform } = this.editor.element // 单个选中时 element 代表选中的元素
        const { x, y } = boxBounds, { scaleX, scaleY } = worldTransform
        this.point.set({ x: (x + 15) * Math.abs(scaleX), y: (y + 15) * Math.abs(scaleY) })
    }

    onUnload() {  // 4. 卸载控制点  
        this.editBox.remove(this.view)
    }

    onDestroy() {
        this.point = null
    }

}

CustomEditor.registerInnerEditor()

下一步

使用内部编辑器

Released under the MIT License.