将 Konva 层节点安装到“视口”中

Question

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

Lets say the stage is initiated and it looks like this

I can get it to this point where the stage is centred over all shapes on the stage

Now I need a way to figure out how far to zoom the stage so that none of the shapes are cut off by the "viewport"

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

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

任何指导将不胜感激

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