參考資料工具getTransformForBounds()

getTransformForBounds()

Github 上的原始碼

⚠️

此函數已棄用，將在 React Flow 12 中移除。請改用 getViewportForBounds。

此工具會告訴您為了符合給定邊界，該如何設定視窗。您可能會使用此工具預先計算伺服器上給定節點集的視窗，或在不直接變更視窗的情況下，計算給定邊界的視窗。

import { getTransformForBounds } from 'reactflow';
 
const transform = getTransformForBounds(
  {
    x: 0,
    y: 0,
    width: 100,
    height: 100,
  },
  1200,
  800,
  0.5,
  2,
);

簽名

#參數
#bounds
Rect
#width
number
#height
number
#minZoom
number
#maxZoom
number
#padding?
number
0.1
#回傳值
#[0]
number
已轉換視窗的 x 位置。
#[1]
number
已轉換視窗的 y 位置
#[2]
number
已轉換視窗的縮放等級。

注意事項

  • 這是一個相當底層的工具。您可能會想查看 fitView 或 fitBounds 方法以取得更實用的 API。
  • 此函數稱為 getTransform… 是因為歷史因素。其回傳類型代表元組形式的 Viewport。
工具