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

图形编辑器会不会支持一下移动端的一些手势操作呢?

Open mozbia opened this issue 4 months ago • 10 comments

比如双指捏合缩放移动旋转元素, 目前自己通过 ZOOM 事件实现了双指捏合缩放&移动,代码是大概这样的: let targetPoint = this.app.editor.target.getLocalPoint({ x: this.app.editor.target.x, y: this.app.editor.target.y, })

this.app.tree.on(ZoomEvent.ZOOM, (e: ZoomEvent) => { const center = { x: e.x, y: e.y }

const localCenter = this.app.editor.target.getLocalPoint(center)

this.app.editor.target.scaleOfWorld(center, e.scale)

this.app.editor.target.x = beforeZoomTargetData.x - (localCenterBefore.x - localCenter.x) this.app.editor.target.y = beforeZoomTargetData.y - (localCenterBefore.y - localCenter.y) })

但是对于同时支持双指捏合旋转元素,好像没头绪。 要是能支持移动端的一些手势操作就好了。

mozbia avatar Sep 01 '25 07:09 mozbia

很早就已经支持了😂

【移动端手势控制元素】 https://www.leaferjs.com/ui/guide/advanced/viewport.html#%E7%A7%BB%E5%8A%A8%E7%AB%AF%E6%89%8B%E5%8A%BF%E6%8E%A7%E5%88%B6%E5%85%83%E7%B4%A0

leaferjs avatar Sep 01 '25 07:09 leaferjs

看过这页文档,没看懂怎么配置选中元素后可以 通过双指捏合同时支持缩放移动旋转这个三个操作,请教一下大佬😂

mozbia avatar Sep 01 '25 07:09 mozbia

看过这页文档,没看懂怎么配置选中元素后可以 通过双指捏合同时支持缩放移动旋转这个三个操作,请教一下大佬😂

编辑器的三个操作同时配置手势类型就可以: {moveable: 'move', resizeable: 'zoom', rotateable: 'rotate' }

https://www.leaferjs.com/ui/plugin/in/editor/config/enable.html#%E5%85%B3%E9%94%AE%E5%B1%9E%E6%80%A7

leaferjs avatar Sep 01 '25 08:09 leaferjs

看来得增加个示例

leaferjs avatar Sep 01 '25 08:09 leaferjs

看过这页文档,没看懂怎么配置选中元素后可以 通过双指捏合同时支持缩放移动旋转这个三个操作,请教一下大佬😂

编辑器的三个操作同时配置手势类型就可以: {moveable: 'move', resizeable: 'zoom', rotateable: 'rotate' }

https://www.leaferjs.com/ui/plugin/in/editor/config/enable.html#%E5%85%B3%E9%94%AE%E5%B1%9E%E6%80%A7

我的问题,文档很细了,一发出来,我就想起我好像看过这个说明。 最近想弄这个功能,一直在这栏文档找配置,没看编辑器那里的 Image

mozbia avatar Sep 01 '25 08:09 mozbia

文档搜索功能好像有点问题,搜”双指“,没有搜到 编辑器配置 那里去,编辑器配置文档有“双指”关键字

mozbia avatar Sep 01 '25 08:09 mozbia

刚才使用测试了一下。发现一些问题,再给大佬反馈一下:

按照使用现象,猜测 : 移动端双指移动修改坐标是“递增”"递减"这种方式修改的。 因为如果使用leafer-x-easy-snap吸附插件,会有一个问题:小幅度缓慢移动会被吸附插件修改坐标,导致最终没有移动元素(移动幅度需要大过吸附间隔才能真正移动)。

我上面通过 ZOOM 事件那种代码方式修改坐标不会有这种问题。 不知道需不要给吸附插件作者反馈一下 🤣

mozbia avatar Sep 01 '25 09:09 mozbia

收到,我大概知道原因了,估计只有我这边才能调整的了

leaferjs avatar Sep 02 '25 00:09 leaferjs

文档搜索功能好像有点问题,搜”双指“,没有搜到 编辑器配置 那里去,编辑器配置文档有“双指”关键字

谢谢反馈~

leaferjs avatar Sep 02 '25 00:09 leaferjs

移动端已支持兼容吸附操作,并支持配置触发单一手势功能,等待新版本发布

leaferjs avatar Sep 22 '25 08:09 leaferjs