使用SVG.js扩展和重新定位困难

Question

我正在使用svg.js在浏览器中操作SVG。我正在做的大部分事情都相对简单，但我在缩放/定位一些对象时遇到了一些困难。

我有一个包含“Pin”图标的SVG。您可以单击SVG进行缩放（仅调整其大小以填充浏览器视口），然后调整其所有子项的大小，包括Pin。我需要将此图标缩小到原始大小36px x 36px并重新定位，以便Pin的底部中心位于原始坐的位置。我已经调整了大小，但重新定位的部分让我感到厌烦。

某些示例说明：

1. 使用基本大小为36px x 36px的Pin缩放为100％。

   

2. 按9.77241379按比例放大，缩小到其基本尺寸36px x 36px。使用svg.js scale()方法在引脚的中心点缩放，使其在空间中浮动。

   

当父容器按比例放大时，我用它来缩放Pin：

scaleHotspot(hotspot) {
    const child = hotspot.first();
    const bbox = child.bbox();
    const rbox = child.rbox();
    const scale = bbox.w / rbox.w;

    hotspot.scale(scale);
}

因为Pin是使用其中心点缩放的，所以现在它的位置比它应该的高。我需要确定向下移动Pin多少以使Pin的位置处于其原始位置。

我原本认为这有效，但在各个地方进行测试都会产生奇怪的结果。

const newY = -(bbox.height / 2 - (bbox.height - (1 / scale)));

关于如何定位Pin以使其底部中心点位于未缩放版本的位置的建议？

Answer 1

使用.transform()，您可以定义一个可缩放的中心。使用.bbox()在当前用户空间中查找该点。由于这些坐标已包含预先存在的转换，因此请设置relative标志以在顶部添加缩放：

scaleHotspot(hotspot) {
    const bbox = hotspot.bbox();
    const rbox = hotspot.rbox();
    const scale = bbox.w / rbox.w;
    const center = bbox.x + bbox.w / 2;
    const bottom = bbox.y + bbox.h;

    hotspot.transform({scale: scale, cx: center, cy: bottom}, true);
}