Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

外层容器添加transform缩放后,图表的悬浮、点击事件的位置错位失效 #5472

Closed
zhouhe-1476452306 opened this issue Aug 28, 2023 · 8 comments · Fixed by #5526

Comments

@zhouhe-1476452306
Copy link

image

@hustcc
Copy link
Member

hustcc commented Aug 28, 2023

@xiaoiver 之前旧版本 G 中,需要手动设置 supportCSSTransform: true,新版本中也需要设置这个属性吗?

@xiaoiver
Copy link
Contributor

xiaoiver commented Sep 11, 2023

多了一个 s,现在叫:supportsCSSTransform
https://g.antv.antgroup.com/api/canvas/options#supportscsstransform
antvis/G#1161

@xyr550
Copy link

xyr550 commented Sep 11, 2023

image

大佬,设置了这个属性没有用,还是失效的,这个属性是这么用的吗

@pearmini
Copy link
Member

@xyr550 这个配置还不支持哈,我这周支持一下

@hustcc
Copy link
Member

hustcc commented Sep 11, 2023

@xyr550 这个配置还不支持哈,我这周支持一下

是否可以默认 supportsCSSTransform 打开,不需要额外用户配置?@xiaoiver @pearmini

@pearmini
Copy link
Member

pearmini commented Sep 11, 2023

@hustcc 还是需要用户显示地配置,因为这个属性会跳过 G 的处理流程,是不保证稳定的,所以按需使用。

如果真的是希望进行缩放,更好的做法是操作 G 里面的视图节点:

chart.render().then(() => {
  const canvas = chart.getConext().canvas;
  const [view] = canvas.getElementsByClassName('view');
  view.style.transform = 'scale(1.5';
})

同时修改 canvas 的大小。

@pearmini
Copy link
Member

@xyr550 你设置外层容器 style.transform 的场景是啥?

@zhouhe-1476452306
Copy link
Author

整一个画布存在多个组件,当设置的画布大小不满足当前电脑的分辨率时 可以进行宽度适应、高度适应 ,添加transform属性将该画布进行缩放填充。针对于整一个画布,并不是单个的图表缩放。
image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants