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

Question

Как я могу получить Текстовый объект размер шрифта после изменения объекта в fabric.js?

Ниже мой код.

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;

Выше я устанавливаю значение по умолчанию FontSize равным 15. Затем я изменяю объект, я могу получить правильный Height, Width, Left, Top,, но я не могу получить FontSize.

В бэкэнде я установил изображение и текст, как на скриншоте ниже.

Во внешнем интерфейсе, что я получаю, как на скриншоте ниже.

Ниже стиль для изображения и текста на веб-интерфейсе.

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

Когда я добавляю код ниже, он работает отлично, но в бэкэнде объект становится размытым.

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

Answer 1

Проблема заключается в Текстовый объект не изменяет свое свойство 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>

Answer 2

getHeightOfLine (lineIndex) → {Number}: вычисляет высоту символа в заданной позиции и возвращает fontSize символа.Это?скажи мне.Это метод текстового класса.http://fabricjs.com/docs/fabric.Text.html#getHeightOfLine

Answer 3

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

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

---

Шаг 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;
}

Answer 4

Это решение Vanilla 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

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

.text {
  font-size: 10vw;
}

https://web -design-weekly.com / 2014/11/18 / видовых-блоки-оч.сл.-VH-Vmin-Vmax / * ** 1 022 1023 *

Все вместе дает нам

https://jsfiddle.net/a8woL1eh/