如何从Path2D或Canvas上下文获取变换后图形的包围矩形

有两种可靠的方法可以获取经过缩放、旋转变换后的Path2D实例的包围矩形：

方法一：使用Canvas上下文的getPathBoundingBox()方法 #

这是最简便的原生方法，直接利用Canvas API返回当前路径的包围盒：

// 将目标路径p2添加到上下文的当前路径中
ctx.beginPath();
ctx.addPath(p2);

// 获取包围矩形，返回DOMRect对象（包含x、y、width、height等属性）
const boundingBox = ctx.getPathBoundingBox();

console.log(boundingBox.width, boundingBox.height);
console.log(boundingBox); // 完整的包围盒信息

说明：getPathBoundingBox()返回的DOMRect对象包含了包围盒的左上角坐标（x、y）、宽高（width、height），以及右下角坐标（right、bottom）等属性，可直接提取所需参数。

方法二：手动计算变换后的顶点坐标 #

如果需要兼容不支持getPathBoundingBox()的旧版浏览器，可以通过计算原始图形顶点的变换结果来推导包围盒：

// 定义原始矩形的四个顶点
const originalPoints = [
  { x: 0, y: 0 },
  { x: 75, y: 0 },
  { x: 75, y: 75 },
  { x: 0, y: 75 }
];

// 获取创建p2时使用的变换矩阵
const transformMatrix = new DOMMatrix().translate(80, 10).scale(1, 1.2).rotate(45);

// 将每个顶点应用变换矩阵
const transformedPoints = originalPoints.map(point => 
  transformMatrix.transformPoint(new DOMPoint(point.x, point.y))
);

// 计算变换后顶点的极值坐标
const minX = Math.min(...transformedPoints.map(p => p.x));
const maxX = Math.max(...transformedPoints.map(p => p.x));
const minY = Math.min(...transformedPoints.map(p => p.y));
const maxY = Math.max(...transformedPoints.map(p => p.y));

// 构建包围矩形对象
const boundingRect = {
  x: minX,
  y: minY,
  width: maxX - minX,
  height: maxY - minY
};

console.log(boundingRect);

说明：这种方法通过对原始图形的所有顶点应用变换，再找出坐标的最大/最小值来计算包围盒，兼容性更强，也适用于自定义复杂路径的场景。

内容的提问来源于stack exchange，提问作者Meysam Ghorbani