使Konva圖層節點適合“視口”

Question

我目前正在嘗試創建一種算法，將視口置於舞台上的內容中心。

可以說階段開始了，看起來像這樣

我可以說到這里，舞台位於舞台上所有形狀的中心

現在，我需要一種方法來確定舞台的縮放程度，以使“視口”不會截斷任何形狀

獲取有關地圖上每種形狀的原點/最中心點很簡單，我可以做到這一點。 我在找出適當的計算來縮放舞台時遇到麻煩，因此舞台上的每個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