Как получить размер шрифта для текстового объекта после изменения объекта

Это ванильное решение JS.

Я не могу получить FontSize.

Вы можете использовать fontSize, используя computedStyle, например

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

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

В дополнение к этому я рекомендую вам поработать с vw и vh

.text {
  font-size: 10vw;
}

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

Все вместе дает нам https://jsfiddle.net/a8woL1eh/

Проблема заключается в . Текстовый объект не изменяет свое свойство fontSize при его изменении или преобразовании, если только свойство fontSize не установлено вручную. Это причина, по которой вы получаете размытый текст, потому что, несмотря на измененный размер преобразования, основной размер шрифта остался прежним. Таким возможным решением будет как-то динамически изменять свойство fontSize. http://jsfiddle.net/therowf/xkhwagd8/41/ Здесь я привел пример jsfiddle из вашего кода. Этот код очень похож на ваш.

Спасибо и дайте мне знать, если это работает. (:

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>

Вот способ сопоставить преобразования шрифта Fabric.js с преобразованиями CSS: https://jsfiddle.net/mmalex/evpky3tn/

[117 ]

Решение состоит в том, чтобы соответствовать преобразованиям текстов, не пытаясь настроить размер шрифта .

Шаг 1 - Подготовьте сцену, создайте холст, сгруппируйте текст с прямоугольником, позвольте пользователю манипулировать этой группой, вращать и масштабировать ее.

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

Шаг 2 - подготовить стиль DIV для масштабирования

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

Шаг 3 - Оценить преобразования Fabric.js и применить CSS к элементу DIV, например:

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

Решение (он же обработчик кнопок) преобразует преобразование Fabric.js в преобразование 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}: вычисляет высоту символа в заданной позиции и возвращает fontSize символа. Это? скажи мне. Это метод текстового класса. http://fabricjs.com/docs/fabric.Text.html#getHeightOfLine