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

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

Open 826327700 opened this issue 1 year ago • 8 comments

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

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

826327700 avatar Aug 14 '24 02:08 826327700

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

leaferjs avatar Aug 14 '24 06:08 leaferjs

目前是设计如此,每个控制点都有固定的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

826327700 avatar Aug 14 '24 07:08 826327700

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

leaferjs avatar Aug 14 '24 07:08 leaferjs

之前有这个问题

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

826327700 avatar Aug 14 '24 07:08 826327700

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

leaferjs avatar Aug 14 '24 13:08 leaferjs

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

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

826327700 avatar Aug 15 '24 01:08 826327700

origin:"center"

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

leaferjs avatar Aug 15 '24 06:08 leaferjs

origin:"center"

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

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

826327700 avatar Aug 15 '24 06:08 826327700