Cloth js: increase font size instead of scaling when resizing with the mouse

Question

I am working on a shadow js application and I need to increase / decrease the font size when changing the font size with the mouse
my verified code

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> 

but it just rescales the text without increasing / decreasing the font size, but I need to change the font size, as in this

Answer 1

The idea uses the canvas.on event ("object: modified") to reset the scaling to 1 and increases fontSize to fit the new size.

fabric.Object.lockUniScaling is a proposed add-on.

 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>