我有一个 Canvas ,显示一些 SVG 路径。我使用 KonvaJs 绘制了这些。用户应该能够单击这些路径中的任何一个并将其放大。单击路径后, Canvas 应缩放到路径适合 Canvas 完整尺寸的点。请参阅this JsFiddle 。 (路径将从其他来源导入)。
我知道你可以像这样缩放图层:
layer.scale({
x : 2,
y : 2
});
但我不知道需要什么 x
和 y
值才能获得正确的比例。
所以,我的问题:如何使用 KonvaJs 缩放路径以适应其容器?
我希望你明白我的意思。如果没有,AmCharts' Maps做我想要完成的事情。当您单击某个国家/地区时, Canvas 会放大该国家/地区。如果有缩放动画就好了,但这不是必需的。我没有使用 AmCharts,因为它不符合我(其余的)需求。
注意:我开始使用 KonvaJs 是因为我以前使用过 KineticJs。据我了解,KineticJs 不再维护,但 KonvaJs 是它的一个分支(如果我错了,请纠正我)。如果您知道有更好的库可以做到这一点,请告诉我。
最佳答案
您可以使用很好的函数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() 计算中存在错误。所以你必须使用存储库中的最新版本。
关于javascript - 如何缩放路径以适合容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35198109/