Skip to main content

getBoundingBox()

属于 @remotion/paths 包。从 v3.3.40 起可用

🌐 Part of the @remotion/paths package. Available from v3.3.40

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

🌐 Returns the bounding box of the given path, suitable for calculating the viewBox value that you need to pass to an SVG.

边界框是可以完全包住形状的最小矩形。

🌐 The bounding box is the smallest rectangle which can contain the shape in full.

get-bounding-box.ts
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 路径无效，此函数将抛出异常。

🌐 This function will throw if the SVG path is invalid.

返回类型​

🌐 Return type

包括以下属性：

🌐 Includes the following properties:

  • x1：边界框的最左边 x 坐标
  • x2：边界框的最右侧 x 坐标
  • y1：边界框的最上方 y 坐标
  • y2：边界框的最底部 y 坐标
  • width：边界框的宽度，由 v3.3.97 返回
  • height：边界框的高度，从 v3.3.97 返回
  • viewBox：可以传递给 SVG 的 viewBox 值，来自 v3.3.97

BoundingBox 型​

🌐 BoundingBox type

在 TypeScript 中，你可以通过导入 BoundingBox 类型来获取返回值的结构：

🌐 In TypeScript, you can get the shape of the return value by importing the BoundingBox type:

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

另请参阅​

🌐 See also

Last updated on