如何修改对象后获得对象的文本字体大小

问题描述 投票:7回答:4

我怎样才能在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;

我在上面设置默认字号为15。然后我修改对象,我可以得到适当的Height, Width, Left, Top,但我不能够得到字号。

在后端我设置图像和文字像下面的截图。

enter image description here

在前端我得到什么像下面的截图。

enter image description here

下面风格的图像和文字上的前端。

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});
javascript jquery fabricjs
4个回答
7
投票

这里是匹配Fabric.js字体的方式转变为CSS变换:https://jsfiddle.net/mmalex/evpky3tn/

convert Fabric.js transforms to CSS transforms

解决的办法是匹配文本的转换,而不是试图调整字体大小。


第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变换和DIV元素的CSS应用,例如:

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

3
投票

getHeightOfLine(lineIndex)→{数量}:在给定的位置计算字符的高度和返回字符的fontSize的。是吗?告诉我。这是文字类的方法。 http://fabricjs.com/docs/fabric.Text.html#getHeightOfLine


2
投票

这是香草js的解决方案。

我不能够得到字号。

您可以实现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

除了这个,我建议你用vwvh工作

.text {
  font-size: 10vw;
}

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

总之给我们https://jsfiddle.net/a8woL1eh/


2
投票

问题是,当它被修改或手动变换除非集fontSize属性文本对象不改变其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>
© www.soinside.com 2019 - 2024. All rights reserved.