0

我有一个显示一些 SVG 路径的画布。我用 KonvaJs 画了这些。用户应该能够单击任何这些路径并放大它。单击路径后，画布应缩放到路径适合画布全尺寸的位置。看到这个 JsFiddle。（路径将从另一个来源导入）。

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

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

但我不知道它需要什么x和价值才能获得正确的规模。y

所以，我的问题：如何缩放/缩放路径以适应它的容器，使用 KonvaJs？

我希望你知道我的意思。如果没有，AmCharts 的 Maps 正是我想要完成的事情。当您单击一个国家/地区时，画布会放大它。缩放动画会很好，但不是必需的。我没有使用 AmCharts，因为它不符合我的（其余）需求。

注意：我开始使用 KonvaJs 是因为我之前使用过 KineticJs。据我了解，KineticJs 不再维护，但 KonvaJs 是它的一个分支（如果我错了，请纠正我）。如果你知道一个更好的图书馆来做到这一点，请告诉我。

4

1 回答 1

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() 计算中发现了错误。所以你必须使用回购的最新版本。

于 2016-02-04T23:07:08.703 回答