Calculer la largeur de la boîte de sélection et la hauteur des coordonnées données (x, y)

Utilisation de la carte mappe () Code> Fonction Transformez la matrice d'entrée dans la matrice de x code> ou y code>. Vous pouvez ensuite nourrir ces tableaux transformés sur math.min () code> et math.max () code> pour obtenir gauche code>, droite code>, bas code> et haut code> pour calculer la zone de liaison code>. Lorsque vous avez la zone de liaison code> code>, la largeur et le calcul de la hauteur sont directement en avant (soustrayez min de max). Voir Code Snippet ci-dessous.

p>

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

Je suppose que ce serait la différence entre les valeurs minimales et maximales de x code> (largeur) et y code> (hauteur).

p>

tandis que le manuel évident pour calculer ceux qui peuvent sembler utiliser de math.max () code> / math.min () code> sur des tableaux de coordonnées extraits, il nécessite une matrice de source de bouclage plusieurs fois inutilement, tandis que la seule passe (par exemple avec .Prototype.reduce () code>) est assez assez et peut effectuer sensiblement plus rapide , lorsque vous apportez une entrée La matrice est relativement grande: p>

p>

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}`)

Regardez cet extrait. Devinez ceci est une approche du début.

certaines explications fortes>: p>

Nous calculons les valeurs MINX, MAXX, MINY et MAXY à partir des coords définis avec Math.OperationMinormax (... coords.map (c => c.propertyxory)) code>. p>

• La coordonnée min-x de la boîte à bornes ( => coin gauche em>) est la valeur MINX. LI>
• La coordonnée min-y de la boîte de sélection ( => haut em>) est la valeur mineure. li> ul>

  ---

  • La coordonnée max-x de la boîte de sélection ( => coin droit em>) est la valeur maxx. li>
  • La coordonnée max-y de la boîte de sélection ( => inférieure em>) est la valeur maximale. Li> ul>

    ---

    taille (propriété w forte> et h strong>) peut être calculé par le soustraction maxx - Minx code> et et et et et Maxy - Minie Code>. P>

    P>

    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} ])
    );