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";

另请参阅