如何缩放路径以适应容器

时间:2016-02-04 10:10:34

标签: javascript html5 canvas svg konvajs

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

我知道您可以像这样缩放图层:

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

但我不知道获得正确比例所需的xy值。

所以,我的问题:如何使用KonvaJs缩放/缩放路径以适合它的容器?

我希望你知道我的意思。如果没有,AmCharts' Maps完成了我想要完成的事情。单击某个国家/地区时,画布会放大该区域。缩放动画会很好,但不是必需的。我没有使用AmCharts,因为它不符合我的需要(其余的)。

注意:我开始使用KonvaJs,因为之前我曾使用过KineticJs。据我了解,KineticJs不再维护,但KonvaJs是它的一个分支(如果我错了,请纠正我)。如果你知道有更好的图书馆,请告诉我。

1 个答案:

答案 0 :(得分: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});

DEMO:https://jsfiddle.net/g06utup0/1/

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