javascript - Fabric js : Increase font size instead of just scaling when resize with mouse

Question

我正在开发 fabric js 应用程序，我需要在使用鼠标调整字体大小时增加/减小字体大小
我试过的代码

var canvas = new fabric.Canvas('canvas');
$(document).ready(function() {
$('#text-font-size').keyup(function() {
        var val = $(this).val();
        if (isNaN(val)) {
            alert('please enter number');
            $(this).val('');
        }
        var activeObject = canvas.getActiveObject();
        activeObject.fontSize = val;
        canvas.renderAll();
    });
    $('#add-text-btn').click(function() {
        if ($('#text-font-size').val()) {
            var txtfontsize = $('#text-font-size').val();
        } else {
            var txtfontsize = 40;
        }
        var message = $('#add-text-value').val();
        //var txtfontfamily = $('#font-family').val();
        var new_text = new fabric.IText(message, {
            left: 100,
            top: 100,
            fontSize: txtfontsize,
            //fontFamily: txtfontfamily,
            fill: '#000'
        });
        canvas.add(new_text);
        canvas.setActiveObject(new_text);
    });

    canvas.on('object:selected', function(options) {
        if (options.target) {
            $("textarea#add-text-value").val(options.target.text);
            $("#text-font-size").val(options.target.fontSize);
        }
    });

    canvas.on('object:scaling', function(options) {
        if (options.target) {
            $("textarea#add-text-value").val(options.target.text);
            $("#text-font-size").val(options.target.fontSize);
        }
    });

    canvas.on('object:modified', function(options) {
        if (options.target) {
            $("textarea#add-text-value").val(options.target.text);
            $("#text-font-size").val(options.target.fontSize);
        }
    });

});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-text-btn">Add text</button><br><br>
<textarea rows="7" id="add-text-value">Your Text Here</textarea>
<br>
<input id="text-font-size" type="text" class="form-control">
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>

但这只是重新缩放文本，而不是增加/减小字体大小，但我必须像 this 中那样调整字体大小

Answer 1

想法是使用 canvas.on("object:modified") 事件将缩放比例重置为 1 并增加 fontSize 以适应新大小。

建议添加 fabric.Object.lockUniScaling。

var canvas = new fabric.Canvas('canvas');
$(document).ready(function() {
  $('#text-font-size').keyup(function() {
    var val = $(this).val();
    if (isNaN(val)) {
      alert('please enter number');
      $(this).val('');
    }
    var activeObject = canvas.getActiveObject();
    activeObject.fontSize = val;
    canvas.renderAll();
  });
  $('#add-text-btn').click(function() {
    if ($('#text-font-size').val()) {
      var txtfontsize = $('#text-font-size').val();
    } else {
      var txtfontsize = 40;
    }
    var message = $('#add-text-value').val();
    //var txtfontfamily = $('#font-family').val();
    var new_text = new fabric.IText(message, {
      left: 100,
      top: 100,
      fontSize: txtfontsize,
      lockUniScaling: true,
      //fontFamily: txtfontfamily,
      fill: '#000'
    });
    canvas.add(new_text);
    canvas.setActiveObject(new_text);
  });

  canvas.on('object:selected', function(options) {
    if (options.target) {
      $("textarea#add-text-value").val(options.target.text);
      $("#text-font-size").val(options.target.fontSize);
    }
  });

  canvas.on('object:scaling', function(event) {
    if (event.target) {
      $("textarea#add-text-value").val(event.target.text);
      $("#text-font-size").val((event.target.fontSize * event.target.scaleX).toFixed(0));
    }
  });

  canvas.on('object:modified', function(event) {
    if (event.target) {
      event.target.fontSize *= event.target.scaleX;
      event.target.fontSize = event.target.fontSize.toFixed(0);
      event.target.scaleX = 1;
      event.target.scaleY = 1;
      event.target._clearCache();
      $("textarea#add-text-value").val(event.target.text);
      $("#text-font-size").val(event.target.fontSize);
    }
  });

});

<script src="//cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-text-btn">Add text</button>
<br>
<br>
<textarea rows="7" id="add-text-value">Your Text Here</textarea>
<br>
<input id="text-font-size" placeholder="fontsize" type="number" class="form-control">
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"></canvas>