如何在 p5.js 中获取不同形状的边界框？

p5.js 是一个流行的 JavaScript 库，用于创建交互式的图形和动画。在 p5.js 中，我们通常需要在 canvas 中以某种方式显示形状，如矩形、圆形、文本等等。此时，我们可能需要获取这些形状的边界框信息，以便进行下一步处理，例如碰撞检测、位置计算等等。本篇文章将介绍如何在 p5.js 中获取不同形状的边界框信息。

矩形

矩形是最常用的形状之一。在 p5.js 中，我们可以使用 rect() 函数来画矩形。rect() 函数的参数包括矩形的左上角 x 坐标、左上角 y 坐标、宽度、高度。它返回的是矩形的左上角 x 坐标、左上角 y 坐标、右下角 x 坐标、右下角 y 坐标。因此，我们可以通过计算左上角和右下角坐标来获取矩形的边界框信息。

let x = 100;
let y = 200;
let w = 50;
let h = 80;

rect(x, y, w, h);

let left = x;
let top = y;
let right = x + w;
let bottom = y + h;

圆形

圆形也是常见的形状之一。在 p5.js 中，我们可以使用 ellipse() 函数来画圆形。ellipse() 函数的参数包括圆心 x 坐标、圆心 y 坐标、宽度（即直径）、高度（即直径）。p5.js 中没有内置的函数来获取圆形的边界框信息。但是，我们可以计算出圆形的左上角坐标和右下角坐标，从而获取圆形的边界框信息。

let x = 100;
let y = 200;
let d = 80;

ellipse(x, y, d, d);

let left = x - d / 2;
let top = y - d / 2;
let right = x + d / 2;
let bottom = y + d / 2;

文本

文本同样是常见的形状之一。在 p5.js 中，我们可以使用 text() 函数来显示文本。text() 函数的参数包括字符串、左上角 x 坐标、左上角 y 坐标。类似于圆形，p5.js 中也没有内置的函数来获取文本的边界框信息。但是，我们可以使用 textWidth() 函数来计算出文本的宽度，从而获取文本的边界框信息。

let str = "hello, world!";
let x = 100;
let y = 200;

text(str, x, y);

let w = textWidth(str);
let h = textSize() * 1.2;

let left = x;
let top = y - h;
let right = x + w;
let bottom = y;

总结

本篇文章介绍了如何在 p5.js 中获取不同形状的边界框信息。对于矩形，我们可以通过计算左上角和右下角坐标来获取其边界框信息。对于圆形，我们可以计算出其左上角坐标和右下角坐标来获取其边界框信息。对于文本，我们可以使用 textWidth() 函数计算出其宽度，再根据文本大小来计算出其高度，从而获取其边界框信息。