首页 文章

通过反应更改缩放/缩放后,窗口上的svg位置调整大小

提问于
浏览
0

我正在尝试调整和缩放嵌入在div容器中的svg . 我的目标是通过道具将te svg更改为React组件 . 您可以查看代码沙箱here .

我使用视图框和矩阵变换使svg圆圈保持其在窗口调整大小的位置 . 我可以在鼠标滚轮上相应地放大圆圈 . 对于缩放,我在窗口大小调整事件上设置组件状态中父容器的宽度和高度 .

但是当我在更改窗口调整大小之前进行缩放时,圆圈不会保持其位置 .

Do you have any idea how to make my coordinates independant from the zoom scale ?

我尝试了很多东西,比如每次缩放比例时计算一个新的宽度和高度(以及视图框),但它不起作用......

另外如果你知道任何好的资源来转发我在画布上操纵svg,那也会非常有帮助!

1 回答

  • 0

    嗨,我可以看到你的问题,我已经重构你的代码并使其工作,你可以检查出来here . 问题是当你缩放svg时,中心点也会被缩放 . 你需要做的是将比例的倒数应用到中心以将圆定位在div中心 . 看看calculatePoisition方法 . 我已经完成了

相关问题