Fabric js：使用鼠标调整大小时增加字体大小而不是仅仅缩放

Posted 2023-03-24

【中文标题】Fabric js：使用鼠标调整大小时增加字体大小而不是仅仅缩放

【英文标题】：Fabric js: Increase font size instead of just scaling when resize with mouse

【发布时间】：2016-02-15 00:48:41

【问题描述】：

我正在开发 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'   style="border:#000 1px solid;"></canvas>

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

【参考方案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'   style="border:#000 1px solid;"></canvas>

【讨论】：

感谢您的帮助，现在这适用于实际字体大小（包括小数），我们可以在这里将字体大小调整为整数吗？我尝试使用这个 event.target.fontSize *= Math.round(event.target .scaleX);但不工作jsfiddle

不能四舍五入缩放，否则会从 40 跳到 80 再到 120...（缩放 1,2,3）。您必须在乘法后对 fontSize 进行舍入。查看更新的答案。

另外你会注意到对象维度的一些问题，当然会跳跃，但你应该告诉fabricjs你需要新的对象坐标系统。用 setCoords();

@AndreaBogazzi 你能解释一下代码'event.target._clearCache()'的作用吗？

_clearCache 清除 lineWidths 和 lineHeights 的两个缓存数组（我们不会在 fabricjs 中每次都重新计算它们）我不知道为什么我强制调用，因为字体大小的更改会自动触发清理。跨度>

【参考方案2】：

虽然可能不是最好的方法（我是 Fabric 的新手），但它适用于 4.3.0 版：

canvas.on('text:changed', function (e) 
  console.log('Text:', e.target.text, e.target.text.length)
  let objectSelection = canvas.getActiveObject()
  switch (e.target.text.length) 
    case 10:
      console.log(`Text is $e.target.text.length characters in length.`)
      objectSelection.set('fontSize', 100)
      break
    case 15:
      console.log(`Text is $e.target.text.length characters in length.`)
      objectSelection.set('fontSize', 85)
      break
    case 25:
      console.log(`Text is $e.target.text.length characters in length.`)
      objectSelection.set('fontSize', 60)
      break
  
)
canvas.on('text:editing:exited', function (e) 
  console.log('Text edited!')
)

我选择了inspiration from another answer，它完成了这项工作。