leaferjs / leafer-ui

一款好用的 Canvas 引擎,革新的开发体验,用于高效绘图 、UI 交互、图形编辑。A user-friendly Canvas engine with a revolutionary development experience, for efficient drawing, UI interactions, and graphic editing.
https://www.leaferjs.com
MIT License
2.56k stars 91 forks source link

editor 可以不同元素,添加不同的按钮吗 #236

Open MellowCo opened 1 month ago

MellowCo commented 1 month ago

添加底部固定按钮 文档里介绍了添加按钮,这个似乎会给所有元素添加相同的按钮,

image

目前能实现不同元素,动态添加不同的按钮吗

leaferjs commented 1 month ago

可以自己实现,我先记录一下,看后面能不能优化。

那个buttons就是一个Group,可以监听选择事件来自定义替换里面的不同的按钮。

MellowCo commented 1 month ago

目前的实现代码

app.editor.on(EditorEvent.SELECT, (e: EditorEvent) => {
      const ui = e.value

      if (!ui) {
        return
      }

      if (isArray(ui)) {
        app.editor.buttons.clear()
      }
      else {
        app.editor.buttons.clear()

        //... 添加按钮

        // 移除按钮
        const deleteBtn = Box.one({
          around: 'center',
          fill: 'red',
          cornerRadius: 20,
          cursor: 'pointer',
          children: [
            { tag: 'Text', fill: 'white', text: '移除', padding: [7, 10] },
          ],
          id: EEditBtnId.DELETE_BTN,
        })

        app.editor.buttons.add(deleteBtn)
      }
    })