Issue #730💬 RespondidoAbierto el 9 de enero de 2018por austinbiggsReacciones 1

¿Preservar la relación de aspecto al cambiar de tamaño?

Respuesta rápidapor artf1

tenía un ancho máximo en mis imágenes que las distorsionaba cuando las redimensionaba demasiado, ¡ups! Genial, cierro esto entonces¿Hay alguna forma de desactivar ciertos mandos? Además de CSS Cada componente tiene una propiedad 'redimensionable' donde también puedes pasar un objeto como opciones para el Resizer

Lee la respuesta completa abajo ↓

Pregunta

Cuando un usuario redimensiona una imagen, intento mantener la relación de aspecto original, ya que no hay mucha necesidad de distorsionar la imagen. Creo que he encontrado el código que gestiona este comportamiento. Sin embargo, no tengo claro si debería modificar la tecla de inicio o otra cosa.

@artf - ¿Alguna sugerencia?

     * Empezar a redimensionar
     * @param {Evento} e
     */

}, {
    clave: 'start',
    valor: función start(e) {
      Clic derecho o de middel
      si (e.button !== 0) {
        regresar;
      }
      e.preventDefault();
      e.stopPropagation();
      var el = this.el;
      Redimensionador VAR = esto;
      var config = this.opts || {};
      var attrName = 'data-' + config.prefijo + 'handler';
      var rect = this.getElementPos(el);
      this.handlerAttr = e.target.getAttribute(attrName);
      this.clickedHandler = e.target;
      this.startDim = {
        T: rect.top,
        L: recta. izquierda,
        w: rect.ancho,
        H: Recta. Altura
      };
      this.rectDim = {
        T: rect.top,
        L: recta. izquierda,
        w: rect.ancho,
        H: Recta. Altura
      };
      this.startPos = {
        x: e.clientX,
        y: e.clientY
      };

Eventos de escuchar
      var doc = this.getDocumentEl();
      (0, _mixins.on)(doc, 'mousemove', this.move);
      (0, _mixins.on)(doc, 'keydown', this.handleKeyDown);
      (0, _mixins.on)(doc, 'mouseup', esto.stop);
      (0, _underscore.isFunction)(this.onStart) & & this.onStart(e, { docs: doc, config: config, el: el, reizer: resizer });
      this.move(e);
    }

Estoy buscando integrar esta función auxiliar:

 /**
  * Conservar la relación de aspecto de la región original. 
  *
  * @param {Número} ancho srcAncho de la imagen fuente
  * @param {Número} srcAltura de la imagen fuente
  * @param {Número} ancho máximo disponible
  * @param {Número} maxAltura máxima disponible
  * @return {Objeto} { ancho, altura }
  */
función calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) {

relación var = Math.min(maxAncho / srcAncho, maxAltura / srcAltura);

return { width: srcWidth*ratio, height: srcHeight*ratio };
 }

Respuestas (3)

artf10 de enero de 2018

tenía un ancho máximo en mis imágenes que las distorsionaba cuando las redimensionaba demasiado, ¡ups!

Genial, cierro esto entonces

¿Hay alguna forma de desactivar ciertos mandos? Además de CSS

Cada componente tiene una propiedad 'redimensionable' donde también puedes pasar un objeto como opciones para el Resizer

artf9 de enero de 2018

@AustinTBiggs intentaste usar manejadores de esquina? Por defecto, la proporción se conserva, de lo contrario puedes mantener pulsado shift para desactivarlo ! relación de aspecto

austinbiggs9 de enero de 2018

Tenía un ancho máximo en mis imágenes que las distorsionaba cuando las redimensionaba demasiado, ¡ups!

@artf - ¿Hay alguna forma de desactivar ciertos mandos? Además de CSS

Preguntas y respuestas relacionadas

Continúa investigando con debates sobre temas similares.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.

Explora plugins gratuitos →
Opción premium

Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.

Explora plugins premium →

Tutoriales relacionados

Guías detalladas sobre el mismo tema.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.