leaferjs / ui

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

编辑器的控制边框会跟随被选中元素的scaleX(-1)镜像而镜像 #189

Open 826327700 opened 1 month ago

826327700 commented 1 month ago

我不知道这是设计如此,还是说是意外的漏洞,我希望实现的效果是,元素本身镜像与否,应该是不影响控制条的。

https://github.com/user-attachments/assets/e81c7cff-773c-4624-bb65-db6f11b10678

leaferjs commented 1 month ago

目前是设计如此,每个控制点都有固定的resize方向(之前没有考虑控制点变为按钮的情况),不随着镜像变动会造成其他的很多问题,你可以将Image用一个Group套住,通过Group编辑图片大小, 点镜像按钮时只镜像内部的图片,这样就不会出现这个问题了

826327700 commented 1 month ago

目前是设计如此,每个控制点都有固定的resize方向(之前没有考虑控制点变为按钮的情况),不随着镜像变动会造成其他的很多问题,你可以将Image用一个Group套住,通过Group编辑图片大小, 点镜像按钮时只镜像内部的图片,这样就不会出现这个问题了

我尝试用Group包裹Image,缩放时出现奇怪的现象:

https://github.com/user-attachments/assets/b55c574e-7db8-4946-8816-2694615d5083

代码如下:

let group=new Group({
    editable:true,
    x:100,
    y:100
})
let image = new Image({
    url: "https://gallery-dev-1318352346.cos.ap-guangzhou.myqcloud.com/upload/gallery/public/2024-05-25/jaibrhrCBWPfpa5w.png",
    origin:"center",
    width:300,
    height:600,
})
group.add(image)
this.app.tree.add(group)

令人费解的是:当我把Image换成Rect时,它又正常了

let group=new Group({
    editable:true,
    x:100,
    y:100
})
let rect = new Rect({
    width:300,
    height:600,
    fill:"red",
})
group.add(rect)
this.app.tree.add(group)

https://github.com/user-attachments/assets/060b005b-8156-4abb-b2e1-8590187d1fbc

leaferjs commented 1 month ago

图片多了一个 origin:"center" 属性造成的,是不是没更新到新版本?之前有这个问题

826327700 commented 1 month ago

之前有这个问题

我使用的是leafer-editor这个包,我刚升级到1.0.2版本,测试了一下 问题还是存在

leaferjs commented 1 month ago

没有镜像的时候应该是好的吧,这次修复了一个Group 调整大小的bug(没有紧贴0,0坐标会出问题),估计和这个有关

826327700 commented 1 month ago

没有镜像的时候应该是好的吧,这次修复了一个Group 调整大小的bug(没有紧贴0,0坐标会出问题),估计和这个有关

我这边试了一下 只要设置了origin:"center",不镜像也会这样

leaferjs commented 1 month ago

origin:"center"

ok, 我再看看,你可以先不用这个属性

826327700 commented 1 month ago

origin:"center"

ok, 我再看看,你可以先不用这个属性

好的,期待作者大大有进展后回复我,项目已经迁移到一半了,我先继续做别的功能