修改对象后如何获取文本对象的字体大小 [英] How to get Text object font-size after modifying object

问题描述

在fabric.js中修改对象后，如何获得文本对象字体大小?

How can I get Text object font size after modifying object in 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.

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

推荐答案

以下是将Fabric.js字体转换与CSS转换相匹配的方法: https://jsfiddle.net/mmalex/evpky3tn/

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.

第1步-准备场景，组成画布，使用矩形对文本进行分组，让用户操作该分组，旋转和缩放.

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

第2步-准备DIV样式以进行缩放

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

第3步-评估Fabric.js转换并将CSS应用于DIV元素， 例如:

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

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

该解决方案(也称为按钮处理程序)将Fabric.js转换转换为CSS转换:

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

这篇关于修改对象后如何获取文本对象的字体大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！