使用react更改缩放/缩放后调整窗口上的svg位置
我正在尝试调整嵌入到div容器中的svg的大小和缩放。我的目标是通过道具改变te svg作为一个React组件。您可以在这里查看代码沙箱。
我使用viewbox和矩阵变换使svg圆圈保持其在窗口调整大小上的位置。我可以在鼠标滚轮上相应地缩放圆圈。对于缩放，我在window resize事件上设置组件状态中父容器的宽度和高度。
但是当我在改变窗口大小之前缩放时，圆圈就不在它的位置了。
你知道如何使我的坐标独立于变焦比例吗？
我试过很多事情，比如每次缩放改变时都要计算一个新的宽度和高度（也就是viewbox），但都没用。
此外，如果您知道任何关于在画布中操作svg的好的资源可以转发给我，这也将是非常有帮助的！
共有1个答案
嗨，我看到你问题了，我已经重构了你的代码并使其工作，你可以在这里查看。问题是，当您缩放svg时，中心点也会缩放。您需要做的是将缩放的反向应用于中心，以将圆定位在div中心。看一下calculatePoision方法。我在
-
我需要相对于鼠标位置放大/缩小滚动窗格。 我目前通过将我的内容包装在一个组中并缩放组本身来实现缩放功能。我创建了一个带有自定义透视的新Scale对象。（枢轴设置为鼠标位置） 如何在不同级别的缩放中获得正确的鼠标位置？是否有一种完全不同的方法来缩放滚动窗格更容易？
-
问题内容： 我需要实现变焦为包含在。我已经通过覆盖方法和调用来成功进行缩放。 这是不正常：对的和的规模如预期，但一定会得到的和这样的寄存器在预分频的位置。我能做什么？感谢您的阅读。 问题答案： 显示了如何使用明确的转化方法扩展鼠标坐标：，，和。)。
-
我现在还没有为转换中心或任何东西定义，因为它不起作用。非常感谢你的帮助。我刚刚开始学习HTML，就像昨天一样，所以我确信这是一件简单的事情，我只是受过足够的教育来发现这个问题。
-
问题内容： 我想拍摄一张图像并更改图像的比例，虽然它是一个numpy数组。 例如，我有一个可口可乐瓶的图像： bottle-1 转换为一个numpy的形状数组，我想调整其大小以表示第二个图像的大小： bottle-2 形状为。 如何在保持原始图像的同时将图像尺寸更改为特定形状？其他答案建议每隔一行或第三行剥离，但是我想要做的基本上是像通过图像编辑器（但在python代码中）那样收缩图像。是否有任何
-
问题内容： 当我以纵向模式启动我的应用程序时，它可以正常工作。然后我旋转到风景中，并按比例放大。为了使其能够在横向模式下正确缩放，我必须双击某物两次，首先将其一直放大（正常的双击行为），然后再次将其完全缩小（再次是正常的双击行为）。 。缩小时，它会缩小到横向模式的正确新比例。 切换回人像似乎更一致。也就是说，它会处理缩放，以便在方向变回纵向时缩放比例正确。 我想弄清楚这是否是错误？还是这可以用Ja
-
我使用传单允许在地图上绘制自定义SVG路径（多边形）。问题是，当用户缩小时，多边形变得太大，并模糊了地图的其余部分。 我在网上查找了一些例子，我遇到的资源使用了D3.geo库中的geo函数。而在我的用例中，我在地图上使用d3、传单和一个SVG层。 有没有一个公式，我可以适用于调整对象的大小正确？我知道我将不得不应用一个翻译功能，这将基于宽度，高度和当前缩放级别，但我想知道是否有一个标准的方法来做到