Skip to main content

getBoundingBox()

属于@remotion/paths包。从v3.3.40版本开始可用

返回给定路径的边界框，适用于计算您需要传递给SVG的viewBox值。

边界框是能够完全包含形状的最小矩形。

get-bounding-box.ts
tsx
import { getBoundingBox } from "@remotion/paths";
 
const boundingBox = getBoundingBox(
  "M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0"
);
// { x1: 35, x2: 85, y1: 24.999999999999993, y2: 75 };
get-bounding-box.ts
tsx
import { getBoundingBox } from "@remotion/paths";
 
const boundingBox = getBoundingBox(
  "M 35,50 a 25,25,0,1,1,50,0 a 25,25,0,1,1,-50,0"
);
// { x1: 35, x2: 85, y1: 24.999999999999993, y2: 75 };

如果SVG路径无效，此函数将抛出异常。

返回类型​

包括以下属性：

  • x1：边界框的最左侧x坐标
  • x2：边界框的最右侧x坐标
  • y1：边界框的最顶部y坐标
  • y2：边界框的最底部y坐标
  • width：边界框的宽度，从v3.3.97版本开始返回
  • height：边界框的高度，从v3.3.97版本开始返回
  • viewBox：您可以传递给SVG的viewBox值，从v3.3.97版本开始返回

BoundingBox类型​

在TypeScript中，您可以通过导入BoundingBox类型来获取返回值的形状：

ts
import type { BoundingBox } from "@remotion/paths";
ts
import type { BoundingBox } from "@remotion/paths";

另请参阅​