从给定的坐标（x，y）计算边界框的宽度和高度

Question

我有一个坐标列表const coords = [{x:10, y:20}, {x:5, y:6}, {x:1, y:25}, {x:11, y:2}];我想知道是否有一种方法可以计算仅具有这些坐标的边界框宽度和高度？

Answer 1

使用该map()函数将输入数组转换为x或y值的数组。然后，您可以将这些转换后的数组提供给Math.min()并Math.max()获得left、right，bottom并top计算bounding box。当你有 时bounding box，宽度和高度的计算是直接的（从最大值中减去最小值）。请参阅下面的代码片段。

const coords = [{x:10, y:20}, {x:5, y:6}, {x:1, y:25}, {x:11, y:2}];

const xArr = coords.map(c => c.x);

const yArr = coords.map(c => c.y);

const l = Math.min(...xArr);

const r = Math.max(...xArr);

const b = Math.min(...yArr);

const t = Math.max(...yArr);

const width  = r - l;

const height = t - b;

console.log(width, height);

Answer 2

x我想，这将是（宽度）和（高度）的最小值和最大值之间的差异y。

虽然计算这些的明显方法似乎是使用Math.max()/Math.min()过度提取坐标数组，但它需要多次不必要地循环源数组，而单次传递（例如 with Array.prototype.reduce()）就足够了，并且当输入数组相对大的：

const points = [{x:10, y:20}, {x:5, y:6}, {x:1, y:25}, {x:11, y:2}],

      {width, height} = points.reduce((acc, {x,y}) => {

            const {min, max} = Math

            if(!acc.mX || x < acc.mX){

              acc.mX = x

            } else if (!acc.MX || x > acc.MX){

              acc.MX = x

            }

            if(!acc.mY || y < acc.mY){

              acc.mY = y

            } else if (!acc.MY || y > acc.MY){

              acc.MY = y

            }

            acc.width = acc.MX - acc.mX

            acc.height = acc.MY - acc.mY

            return acc

          }, {width: 0, height: 0})

          

console.log(`width: ${width}; height: ${height}`)

Answer 3

看看这个片段。猜猜这是一种开始的方法。

---

一些解释：

我们正在使用 计算坐标集的 minX、maxX、minY 和 maxY 值Math.operationMinOrMax(...coords.map(c => c.propertyXorY))。

• 边界框的 min-x 坐标（=> 左角）是 minX 值。

• 边界框的 min-y 坐标 ( => top ) 是 minY 值。

---

• 边界框的 max-x 坐标（=> 右角）是 maxX 值。

• 边界框 ( => bottom ) 的 max-y 坐标是 maxY 值。

---

大小（属性w和hmaxX - minX ）可以通过减去和来计算maxY - minY。

const boundingBox = (coords) => {

  const minX = Math.min(...coords.map(c => c.x)), maxX = Math.max(...coords.map(c => c.x));

  const minY = Math.min(...coords.map(c => c.y)), maxY = Math.max(...coords.map(c => c.y));

  return {

    x: minX,

    y: minY,

    w: maxX - minX,

    h: maxY - minY

  }

}

console.log(

  boundingBox( [ {x:10,y:5}, {x:100,y:0}, {x:100,y:100}, {x:12,y:50}, {x:0,y:100}, {x:27,y:22} ])

);