我正在尝试调整和缩放嵌入在div容器中的svg . 我的目标是通过道具将te svg更改为React组件 . 您可以查看代码沙箱here .
我使用视图框和矩阵变换使svg圆圈保持其在窗口调整大小的位置 . 我可以在鼠标滚轮上相应地放大圆圈 . 对于缩放,我在窗口大小调整事件上设置组件状态中父容器的宽度和高度 .
但是当我在更改窗口调整大小之前进行缩放时,圆圈不会保持其位置 .
Do you have any idea how to make my coordinates independant from the zoom scale ?
我尝试了很多东西,比如每次缩放比例时计算一个新的宽度和高度(以及视图框),但它不起作用......
另外如果你知道任何好的资源来转发我在画布上操纵svg,那也会非常有帮助!
1 回答
嗨,我可以看到你的问题,我已经重构你的代码并使其工作,你可以检查出来here . 问题是当你缩放svg时,中心点也会被缩放 . 你需要做的是将比例的倒数应用到中心以将圆定位在div中心 . 看看calculatePoisition方法 . 我已经完成了