leafer-ui icon indicating copy to clipboard operation
leafer-ui copied to clipboard

Frame 是否可以始终显示控制点?

Open IronManSuper opened this issue 3 months ago • 3 comments

最近有一个需求,需要在画布中创建一个Frame 作为画板区域。Frame需要始终显示着控制点,并且可以进行拖拽控制Frame 尺寸大小。

这是网上找到的效果图: Image

案例地址: https://tuhigh.cn/zh/editor

麻烦大佬告知点思路或则赏点demo

IronManSuper avatar Sep 18 '25 13:09 IronManSuper

他这个是自己开发的😂,监听事件resize元素就行

leaferjs avatar Sep 19 '25 01:09 leaferjs

他这个是自己开发的😂,监听事件resize元素就行

大佬是否可以帮忙给点具体些,因为我刚刚接触leaferjs,还处于摸索阶段

刚刚尝试了一下,监听Frame resize 事件它并没有触发 ` import { App, Frame, ResizeEvent } from 'leafer-ui'

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

const frame = new Frame({ x: 100, y: 100, fill: '#32cd79', editable: true, draggable: true })

leafer.tree.add(frame)

leafer.on(ResizeEvent.RESIZE, function (e: ResizeEvent) { // resize console.log(e.width, e.height, e.old) })

frame.on(ResizeEvent.RESIZE, (event) => { // 处理 Frame 尺寸变化
console.log('Frame resized:', event.width, event.height) })

`

IronManSuper avatar Sep 19 '25 02:09 IronManSuper

@IronManSuper 这功能我在快图那个开源项目见过,就是在画布四周弄4个div给用户拖拽,拖拽div触发resize事件,进而重新设置画布的尺寸,你可以去那边看看类似的代码实现: https://github.com/ikuaitu/vue-fabric-editor

nianxi avatar Sep 19 '25 10:09 nianxi