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

设置旋转中心点不生效

Open 18398773590 opened this issue 8 months ago • 7 comments

在App实例下的editor里配置了around:'center'没有生效,还是会以左上为中心点

18398773590 avatar May 06 '25 04:05 18398773590

请附上可复现的运行代码,测试了一下,没有复现你说的问题,看看是不是版本问题,配置around之后,resize会从中心缩放,rotate可以围绕中心旋转。

leaferjs avatar May 06 '25 05:05 leaferjs

const app = new App({ width: 800, height: 800, editor: { point: { cornerRadius: 0 }, // 控制点的圆角半径,设为0表示是方形的控制点 middlePoint: {}, // 边框中点的控制点配置,用于拉伸变形 rotatePoint: { // 旋转控制点的配置 width: 16, // 旋转控制点的宽度 height: 16, // 旋转控制点的高度 }, rect: { dashPattern: [3, 2]}, // 选中物体时显示的虚线边框样式,[3,2]表示虚线段长3像素,间隔2像素 buttonsDirection:'top', // 编辑按钮(如删除、复制等)的显示位置,设置为'top'表示在选中物体的顶部 around:'center', // 设置旋转中心点为元素中心 } }) 这样配置的

18398773590 avatar May 06 '25 06:05 18398773590

const app = new App({ width: 800, height: 800, editor: { point: { cornerRadius: 0 }, // 控制点的圆角半径,设为0表示是方形的控制点 middlePoint: {}, // 边框中点的控制点配置,用于拉伸变形 rotatePoint: { // 旋转控制点的配置 width: 16, // 旋转控制点的宽度 height: 16, // 旋转控制点的高度 }, rect: { dashPattern: [3, 2]}, // 选中物体时显示的虚线边框样式,[3,2]表示虚线段长3像素,间隔2像素 buttonsDirection:'top', // 编辑按钮(如删除、复制等)的显示位置,设置为'top'表示在选中物体的顶部 around:'center', // 设置旋转中心点为元素中心 } }) 这样配置的

这个测试的也是没问题的,是不是理解的不一样?或者录个视频看看区别。

leaferjs avatar May 06 '25 06:05 leaferjs

正常情况下,不用配置around,也是围绕元素的中心旋转,配置了around之后,resize会和之前的交互区别比较大。

leaferjs avatar May 06 '25 06:05 leaferjs

这里修改角度他是在左上角为中心点旋转的

18398773590 avatar May 06 '25 06:05 18398773590

怪不得,这个配置对手动修改角度无效,看一下编辑器的rotateOf('center', 15)方法:

https://www.leaferjs.com/ui/plugin/in/editor/Editor/transform.html

leaferjs avatar May 06 '25 07:05 leaferjs

我现在这样配置还是没生效 app.editor.rotateOf('center', 0)

18398773590 avatar May 06 '25 07:05 18398773590