[g] supportsCSSTransform 导致 shadowRoot 下无法获取正确的偏移
xiaoiver opened this issue · 0 comments
xiaoiver commented
之前解决了 shadowRoot 的事件监听问题:#1641
但在拾取时没有获取正确的 offset:antvis/G2#6213
复现链接:https://codesandbox.io/p/sandbox/g-webcomponent-forked-667d4w?file=%2Findex.ts%3A22%2C34
另外,如果不在 shadowRoot 下开启也是正常的。
原因
使用了 supportsCSSTransform 后无法使用常规的 client -> viewport 坐标系转换方法:
client2Viewport(client: PointLike): PointLike {
const bbox = this.context.contextService.getBoundingClientRect();
return new Point(client.x - (bbox?.left || 0), client.y - (bbox?.top || 0));
}
目前使用的是事件对象上的 offsetX/Y 属性,但 shadow dom 下返回的并不是相对 <canvas>
的偏移量。
https://stackoverflow.com/questions/6773481/how-to-get-the-mouseevent-coordinates-for-an-element-that-has-css3-transform
另外移动端的 TouchEvent 上也没有这个属性:mapbox/mapbox-gl-js#6079
解决方案
考虑到这种情况下 CSS Transform 通常都是 scale
,通过计算容器实际宽高可以得到缩放比例:
maplibre/maplibre-gl-js#3437
并且 supportsCSSTransform 可以默认开启。