leafer画布缩放后hover事件对元素的位置感应有偏差

[9Qw1ko]

leafer画布缩放后hover事件对元素的位置感应有偏差

[leaferjs]

感谢反馈，需要给出能复现的代码和步骤，我这边测试不出来～

[9Qw1ko]

从官网提供的本地playground运行这段代码即可复现 import { Leafer, Rect } from 'leafer-ui' import './src/in/src/index.ts'

const leafer = new Leafer({ view: window })

const rect = new Rect({ x: 100, y: 100, width: 100, height: 100, fill: '#32cd79', hoverStyle: { fill: 'red' } })

leafer.add(rect)

const div = document.getElementsByTagName('div')[0] div.style.transform = scale(0.6, 0.6)

[leaferjs]

这样是会有问题，监听不到resize事件，需要手动更新一下 leafer.updateClientBounds():

https://www.leaferjs.com/ui/reference/display/Leafer.html#updateclientbounds

还有就是leafer提供了视口缩放功能，为什么不直接使用呢？是不是有什么特殊业务逻辑？

https://www.leaferjs.com/ui/guide/advanced/viewport.html

[9Qw1ko]

感谢解答 由于是大屏，会整体缩放，所以出现了这样的问题不知道怎么解决

[9Qw1ko]

你好，采用了第一种解决办法还是会出现相同的问题 const div = document.getElementsByTagName('div')[0] div.style.transform = scale(0.6, 0.6)

leafer.updateClientBounds()

[leaferjs]

外面再套一个div, 把这个transform设置在最外层试试

[9Qw1ko]

试过了，还是没有效果 import { Leafer, Rect } from 'leafer-ui' import './src/in/src/index.ts'

const parentDiv = document.createElement("div"); parentDiv.style.width = "100vw" parentDiv.style.height = "100vh" document.body.appendChild(parentDiv)

const childrenDiv = document.createElement("div"); childrenDiv.id = "wrapper" childrenDiv.style.width = "100%" childrenDiv.style.height = "100%" parentDiv.appendChild(childrenDiv)

const leafer = new Leafer({ view: 'wrapper' })

const rect = new Rect({ x: 100, y: 100, width: 100, height: 100, fill: '#32cd79', hoverStyle: { fill: 'red' } })

leafer.add(rect)

parentDiv.style.transform = scale(0.6, 0.6) leafer.updateClientBounds()

[leaferjs]

我到时看下原因，可以用 leafer.scale = 0.6 来代替，然后parentDiv的宽高再处理一下

[9Qw1ko]

好的，有空的时候帮忙看看 “可以用 leafer.scale = 0.6 来代替，然后parentDiv的宽高再处理一下”这个试过了也没用