如何在修改对象后获取Text对象的font-size

Question

How can I get Text object font size after modifying object in fabric.js?

Below is my code.

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;

Above I set default FontSize to 15. then I modify object I can get proper Height, Width, Left, Top, but I am not able to get FontSize.

In backend i set image and text like below screenshot.

In frontend what i get like below screenshot.

Below style for image & text on 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;
}

When i add below code it working perfect but in backend object is getting blur.

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

Answer 1

Here is the way to match Fabric.js font transforms to CSS transforms: https://jsfiddle.net/mmalex/evpky3tn/

The solution is to match transformations of texts, not trying to adjust font size .

---

Step 1 - Prepare scene, compose canvas, group text with rectangle, let user manipulate this group, rotate and scale it.

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();

Step 2 - prepare DIV style for scaling

.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
    ...
}

Step 3 - Evaluate Fabric.js transforms and apply CSS on DIV element, for example:

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

The solution (aka button handler) converts Fabric.js transform to CSS transform:

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;
}

Answer 2

getHeightOfLine(lineIndex) → {Number} : Computes height of character at given position and return fontSize of the character. Is it? tell me. It's a method of text class. http://fabricjs.com/docs/fabric.Text.html#getHeightOfLine

Answer 3

This is the vanilla js solution.

I am not able to get FontSize.

You can achieve fontSize using the computedStyle like

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

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

In addition to this I recommend you to work with vw and vh

.text {
  font-size: 10vw;
}

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

All together gives us https://jsfiddle.net/a8woL1eh/

Answer 4

The problem is Text object does not change its fontSize property when it is modified or transformed unless set fontSize property manually. It's the reason why you get blurred text because despite changed the transform size the main fontSize remaining same. So possible solution will be somehow changing fontSize property dynamically. http://jsfiddle.net/therowf/xkhwagd8/41/ Here I have attached a jsfiddle example form your code. This code is very similar to your one.

Thanks and let me know if this is worked. (:

 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); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.min.js"></script> <canvas id="c" width="400" height="400"></canvas>