js Tessuto: Aumenta la dimensione del testo invece di scalare quando ridimensionare con il mouse

Question

Sto lavorando su applicazioni js tessuto & ho bisogno per aumentare/diminuire la dimensione del carattere quando abbiamo ridimensionare il tipo di carattere con il mouse
mio codice provato

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>

ma questo questo solo ridimensionare il testo non aumentare/diminuire la dimensione del carattere, ma devo ridimensionare la dimensione del carattere come in this

Answer 1

L'idea utilizza l'evento canvas.on ("oggetto: modificato") per reimpostare il ridimensionamento su 1 e aumentare fontSize per adattarlo alla nuova dimensione.

fabric.Object.lockUniScaling è un'aggiunta consigliata.

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>