How to get Text object font-size after modifying object

后端 未结 4 2008
旧时难觅i
旧时难觅i 2021-01-18 06:10

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

Below is my code.

var text = new fabric.Text(imgText, {
            


        
4条回答
  •  再見小時候
    2021-01-18 06:38

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

提交回复
热议问题