如何缩放路径以适合容器

Question

我有一个显示一些 SVG 路径的 canvas。我使用 KonvaJs 绘制了这些。用户应该能够点击这些路径中的任何一个并放大它。单击路径后，canvas 应缩放到路径适合 canvas 的完整大小的点。参见 this JsFiddle。（路径将从其他来源导入）。

我知道你可以像这样缩放图层：

layer.scale({ 
    x : 2,
    y : 2
});

但我不知道要获得正确的比例需要什么 x 和 y 值。

那么，我的问题是：如何使用 KonvaJs zoom/scale 一条适合容器的路径？

我希望你明白我的意思。如果没有，AmCharts' Maps 会做我想完成的事情。当您点击一个国家时，canvas 会放大它。缩放动画会很好，但这不是必需的。我没有使用 AmCharts，因为它不符合我的（其余）需求。

注意：我开始使用 KonvaJs 是因为我以前使用过 KineticJs。据我了解，KineticJs 不再维护，但 KonvaJs 是它的一个分支（如果我错了请纠正我）。如果您知道更好的库来执行此操作，请告诉我。

Answer 1

您可以使用 nice 函数 getClientRect() 来检测任何核心形状的边界框。

    var rect = e.target.getClientRect();
    var scale = Math.max(
        stage.width() / rect.width,
      stage.height() / rect.height
    );
    layer.x(-rect.x * scale);
    layer.y(-rect.y * scale);
    layer.scale({x: scale, y: scale});

演示：https://jsfiddle.net/g06utup0/1/

注意：在制作演示时，我发现了 Path.getClientRect() 计算中的错误。所以你必须使用 repo 中的最新版本。

如何缩放路径以适合容器

How to zoom path to fit container

html

javascript

svg

canvas

konvajs