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的宽高再处理一下”这个试过了也没用