javascript - SVG.js 困难的缩放和重新定位

Question

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

我有一个包含“Pin”图标的 SVG。您可以单击 SVG 来缩放它(只是调整它的大小以填充浏览器视口(viewport))，进而调整其所有子项的大小，包括 Pin。我需要将此图标缩小到其原始大小 36px x 36px 并重新定位它，以便 Pin 图的底部中心位于它最初所在的位置。我已经缩小了尺寸，但我忘记了重新定位部分。

一些示例说明:

1. 100% 缩放，基本尺寸为 36px x 36px。

   

2. 按 9.77241379 放大，pin 缩小到 36px x 36px 的基本尺寸。 scale() 方法使用 svg.js 在图钉的中心点进行缩放，使其漂浮在空间中。

   

当父容器放大时，我使用什么来缩放 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);
}