¿Preservar la relación de aspecto al cambiar de tamaño?
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)
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
@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
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.
Issue #1390
Evitar que Asset Manager cierre antes de seleccionar la imagen
Quiero mantener el Administrador de Activos el mayor tiempo posible si el usuario no seleccionó una imagen, ¿cómo puedo evitar que el event...
Issue #1832
El div no se redimensiona automáticamente al redimensionar la imagen al usar flex
Este es mi código en el que quiero que la imagen del logo sea redimensionable. Además, quiero un elemento div en el extremo opuesto para qu...
Issue #1264
Cómo subir una imagen usando jQuery dentro de WordPress usando el gestor de recursos.
Este es el código que tengo: assetManager: { uploadFile: (e) => { jQuery.post( Ajaxurl, { ...... } ); } } Pero cuando dejo la imagen dentro...
Issue #1961
Algunos retornos de usuario
Hola, intento usar grapesjs como usuario final para construir una página con algunos retornos : ¿Cómo seleccionar filas para cambiar el anc...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
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 →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.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.