将 Konva 层节点拟合到“视口”中

Question

我目前正在尝试创建一种算法，将视口集中在舞台上的内容上。

假设阶段已启动，它看起来像这样

我可以做到这一点，舞台以舞台上的所有形状为中心

现在我需要一种方法来确定将舞台放大多远，以便“视口”不会切断任何形状

获取地图上每个形状的原点/最中心点是直截了当的，我可以走那么远。我无法找出适当的计算来缩放舞台，以便舞台上的每个形状都可见（加上一些额外的填充）

我真的很难在脑海中以数学方式想象一个答案。我想出的唯一解决方案是从视图和舞台上的对象创建矩形，然后暴力破解答案，这样视图的边缘就不会与舞台上的任何形状相交。

任何指导将不胜感激

Answer 1

你可以尝试使用这样的东西：

// do we need padding?
const padding = 10;

// get bounding rectangle
const box = layer.getClientRect({ relativeTo: stage });
const scale = Math.min(
  stage.width() / (box.width + padding * 2),
  stage.height() / (box.height + padding * 2)
);


stage.setAttrs({
  x: -box.x * scale + padding * scale,
  y: -box.y * scale  + padding * scale,
  scaleX: scale,
  scaleY: scale
});

http://jsbin.com/kobilamoro/2/edit?js,output