Estoy usando FabricJS para crear un grupo con dos objetos: icono de luz (svg) y sombra (triángulo). Light Icon SVG Estoy importando como SVG y luego configurando la escala como:

 lightObj.scaleToWidth(24); lightObj.scaleToHeight(24);

Y luego estoy agrupando el objeto svg de icono de luz y el objeto de triángulo de sombra.

A continuación, intento cambiar el tamaño del grupo para cambiar el tamaño del objeto de sombra. Y cuando cambio el tamaño del grupo, quiero mantener el tamaño del objeto de icono de luz en 24, es decir, el mismo tamaño que se agregó. No es necesario escalar o cambiar el tamaño del icono de luz. Aquí está mi función de escala:

 this.canvas.on('object:scaling', (e) => { if (!e) return; const group = e.target; const shadowObj = group._objects.find(x => x.type === 'shadow'); const lightObj = group._objects.find(x => x.type === 'light'); if(group.scaleX === group.scaleY) { //Uniform Scaling lightObj.scaleToWidth(24 / group.scaleX); lightObj.scaleToHeight(24 / group.scaleY); } else { //Resizing if(group.scaleX > group.scaleY) { console.log("Horizontally") lightObj.scaleToWidth(24 / group.scaleX); lightObj.scaleToHeight(24); } else { console.log("Vertically") lightObj.scaleToHeight(24 / group.scaleY); lightObj.scaleToWidth(24); } } group.setCoords(); this.canvas.renderAll(); });

Como puede ver en el código anterior, tengo dos partes de la condición IF. Primero está la escala uniforme que funciona perfectamente manteniendo el tamaño de mi objeto de luz igual al que se agregó. La parte ELSE es para REDIMENSIONAR y dentro de eso tengo condiciones para Redimensionamiento horizontal y vertical.

El problema al que me enfrento es que el icono de luz también cambia de tamaño cuando cambio el tamaño del grupo horizontal o verticalmente. Estoy tratando de mantener fijo el tamaño del icono de luz. ¿Alguna idea de cómo puedo lograr esto? o ¿Qué estoy haciendo mal aquí?