Header Ads Widget

Ticker

6/recent/ticker-posts

Obtener los centros horizontales y verticales de un elemento

 A menudo me encuentro en la necesidad de calcular el centro horizontal y el centro vertical de un elemento.

Un ejemplo es un popover.

Para colocar el popover perfectamente, necesito conocer los centros horizontal y vertical del botón que activa el popover. Aquí hay un ejemplo de un cálculo que tuve que hacer.

Uno de los cálculos de popover.

Otro ejemplo: cuando construí este pacman giratorio, necesito obtener el centro del pacman para calcular el ángulo de rotación.

Necesita el centro para calcular el ángel.

Enseñé a las personas cómo construir estas dos cosas paso a paso en Learn JavaScript . Puede resultarle útil si desea aprender a construir cosas desde cero.

Obtener los centros horizontales y verticales

Es fácil obtener los centros tanto horizontal como vertical.

Primero, usamos getBoundingClientRectpara obtener información sobre el cuadro delimitador.

  • Para obtener el centro horizontal (que yo llamo xCenter), usamos el promedio de los valores leftrightde este cuadro delimitador.
  • Para obtener el centro vertical (que yo llamo yCenter), usamos el promedio de los valores topbottomdel cuadro delimitador.
const box = element.getBoundingClientRect()
const xCenter = (box.left + box.right) / 2
const yCenter = (box.top + box.bottom) / 2

Función para simplificar todo

Hice una función para simplificar este cálculo. Yo lo llamo getBoundingBoxDevuelve todos los valores getBoundingClientRectmás xCenteryCenter.

La función tiene este aspecto:

function getBoundingBox (element) {
  const box = element.getBoundingClientRect()
  const ret = { }

  // Loops through all DomRect properties.
  // Cannot spread because they're not enumerable.
  for (const prop in box) {
    ret[prop] = box[prop]
  }

  ret.xCenter = (box.left + box.right) / 2
  ret.yCenter = (box.top + box.bottom) / 2

  return ret
}

Usándolo:

const box = getBoundingBox(element)
const { xCenter, yCenter } = box

Si te gustó este artículo, ¡cuéntaselo a un amigo! Compártelo en Twitter . Si detecta un error tipográfico, le agradecería que lo corrija en GitHub . ¡Gracias!

Obtenga una colección de fragmentos de JavaScript útiles

Incluye cosas como:

  1. Mostrar y ocultar elementos
  2. Obtener elementos enfocables del teclado
  3. Obtener valores CSS en JavaScript
  4. ¡Y muchos más!

Deje su nombre y correo electrónico a continuación para obtener esta colección gratis :)

Publicar un comentario

0 Comentarios