Cómo obtener el tamaño de fuente del objeto Texto después de modificar el objeto

¿Cómo puedo obtener el tamaño de fuente del objeto Texto después de modificar el objeto en fabric.js?

A continuación se muestra mi código.

var text = new fabric.Text(imgText, { left: 10, top: 5, fontSize: 15, fontFamily: 'Verdana', fill: 'white' }); text.scaleToWidth(canvas.width * 0.5); text.setControlsVisibility(canvasConfig); canvas.add(text); canvas.renderAll(); var objects = canvas.getActiveObject(); var obj = objects; if (!obj) { return; } //console.log(obj.get('fontSize') *= obj.scaleX); var angle = obj.get('angle'); var objWidth = obj.get('width') * obj.scaleX; var objWidthPercent = objWidth / canvas.width * 100; var objHeight = obj.get('height') * obj.scaleY; var objHeightPercent = objHeight / canvas.height * 100; var bound = obj.getBoundingRect(); var objLeft = obj.get('left') / canvas.width * 100; var objTop = obj.get('top') / canvas.height * 100; var newfontsize = obj.fontSize * obj.scaleX; 

Anteriormente, establezco FontSize por defecto en 15. Luego modifico el objeto, puedo obtener la Height, Width, Left, Top, pero no puedo obtener FontSize.

En el backend configuro la imagen y el texto como debajo de la captura de pantalla.

introduzca la descripción de la imagen aquí

En frontend lo que obtengo a continuación captura de pantalla.

introduzca la descripción de la imagen aquí

Abajo el estilo para imagen y texto en frontend.

 element.style { left: 64.37%; top: 14.54%; width: 28.25%; height: 14.37%; font-size: 63.58px; color: #E346FF; font-family: Times New Roman; position: absolute; max-width: 100%; z-index: 996; max-height: 100%; } element.style { left: 56.5%; top: 0.81%; width: 42.86%; height: 42.86%; max-width: 100%; max-height: 100%; position: absolute; z-index: 995; display: block; background-image: url(http://10.16.16.101/LabelExtension/pub/media/labelimageuploader/images/image/o/r/orange_38.png); background-position: center; background-repeat: no-repeat; background-size: contain; } 

Cuando agrego el código siguiente, funciona perfectamente pero en el backend el objeto se está borrando.

 this.canvas.setHeight(300); this.canvas.setWidth(240); this.canvas.backgroundColor = '#E8EEF1'; this.canvas.setDimensions({width: '480px', height: '600px'}, {cssOnly: true}); 

Esta es la forma de hacer coincidir las transformaciones de la fuente Fabric.js con las transformaciones CSS: https://jsfiddle.net/mmalex/evpky3tn/

convertir las transformaciones de Fabric.js a las transformaciones de CSS

La solución es hacer coincidir las transformaciones de los textos, no intentar ajustar el tamaño de fuente .


Paso 1 : prepare la escena, componga el canvas, agrupe el texto con un rectángulo, deje que el usuario manipule este grupo, gírelo y escale.

 var canvas = new fabric.Canvas(document.getElementById('c')); var rect = new fabric.Rect({ width: 50, height: 50, left: 90, top: 120, fill: 'rgba(255,0,0,0.25)' }); var text = new fabric.Text("123", { left: rect.left, top: rect.top, fontSize: 15, fontFamily: 'Verdana', fill: 'black' }); text.scaleToWidth(rect.width); canvas.add(text); var group = new fabric.Group([rect, text], { originX: 'center', originY: 'center', angle: 25, scaleY: 1.7 }); canvas.add(group); canvas.renderAll(); 

Paso 2 – preparar el estilo DIV para la escala

 .scaled { // this style is applied to DIV element with text ... font-size: 15px; // Fabric.js text is also 15px size transform: scale(1, 1); // define initial transform transition: all 0.25s linear; // let it animate ... } 

Paso 3 – Evalúe las transformaciones de Fabric.js y aplique CSS en el elemento DIV, por ejemplo:

 element.style { transform: rotate(25deg) scale(1.74774, 2.97116); } 

La solución (también conocido como controlador de botones) convierte la transformación Fabric.js a la transformación CSS:

 function matchCssTransform() { let textScale = text.getTotalObjectScaling(); let pixelRatio = window.devicePixelRatio; let styleStr = `rotate(${group.angle}deg) scale(${textScale.scaleX / pixelRatio}, ${textScale.scaleY / pixelRatio}) `; document.getElementById("scaled").style.transform = styleStr; } 

getHeightOfLine (lineIndex) → {Number}: calcula la altura del carácter en la posición dada y devuelve el tamaño de fuente del carácter. ¿Lo es? Dime. Es un método de clase de texto. http://fabricjs.com/docs/fabric.Text.html#getHeightOfLine

Esta es la solución de vainilla js.

No puedo obtener FontSize.

Puedes lograr el tamaño de fuente usando el estilo computed.

  let style = window.getComputedStyle(text, null).getPropertyValue('font-size'); let fontSize = parseFloat(style); 

https://developer.mozilla.org/de/docs/Web/API/Window/getComputedStyle

Además de esto te recomiendo trabajar con vw y vh

 .text { font-size: 10vw; } 

https://web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Todos juntos nos da https://jsfiddle.net/a8woL1eh/

El problema es que el objeto de texto no cambia su propiedad fontSize cuando se modifica o transforma a menos que se establezca la propiedad fontSize manualmente. Es la razón por la que obtiene texto borroso porque, a pesar de que se modificó el tamaño de transformación, el tamaño de fuente principal sigue siendo el mismo. Por lo tanto, la posible solución será cambiar dinámicamente la propiedad fontSize. http://jsfiddle.net/therowf/xkhwagd8/41/ Aquí adjunto un ejemplo de jsfiddle de su código. Este código es muy similar al tuyo.

Gracias y hazme saber si esto está funcionando. (:

 var canvas = new fabric.Canvas(document.getElementById('c')); var imgText ="This is text"; var canvasConfig = true; var text = new fabric.Text(imgText, { left: 10, top: 5, fontSize: 50, fontFamily: 'Verdana', fill: 'black' }); text.scaleToWidth(canvas.width * 0.5); text.setControlsVisibility(canvasConfig); canvas.add(text); canvas.renderAll(); var objects = canvas.getActiveObject(); function moveHandler(evt){ //evt.target.fontSize = 10; var fontSizeX = evt.target.scaleX; var fontSizeY = evt.target.scaleY; if(fontSizeX === fontSizeY){ evt.target.fontSize = fontSizeX*100; console.log(evt.target.fontSize); } } canvas.on('object:scaling', moveHandler);