leaferjs / ui

一款好用的 Canvas 渲染引擎,革新的体验。高效绘图 、UI 交互(小游戏、互动应用、组态)、图形编辑。
https://www.leaferjs.com
MIT License
2.32k stars 81 forks source link

期望功能:内部元素能够保持同比例变化 #153

Closed canbaoSama closed 2 months ago

canbaoSama commented 2 months ago

比如我有一张图片打底,canvas和图片大小是保持一致的,那么在图片旋转、放大、缩小时,在图片上绘制的标注元素能够跟随图片进行旋转、放大和缩小呢

leaferjs commented 2 months ago

用Group包裹可实现内部元素保持同比例变化,如果是Box / Frame的内部元素跟随缩放,可以看一下这篇文章:

https://leaferjs.com/ui/reference/property/resize.html#box-frame-%E5%85%83%E7%B4%A0

canbaoSama commented 2 months ago

app = new App({ view: leaferViewRef.value, type: 'draw', // 禁止无限画布 editor: { rotateable: false, }, }) // 禁用旋转

group = new Group({ children: [ { tag: 'Rect', width: 200, height: 200, fill: '#32cd79', draggable: true, }, { tag: 'Ellipse', x: 50, y: 50, width: 100, height: 100, innerRadius: 0.5, fill: 'white', }, ], }) app.tree.add(group)

后面根据放大缩小的值更新长宽 group.width = imgData.width group.height = imgData.height

这种方式不能跟随放大缩小哎

leaferjs commented 2 months ago

用resizeWidth() / resizeHeight(), group直接设置不了width/height,需要调整子元素才能变化