在Fabric JS中重置字体大小

Question

我正在尝试更改画布中文本的字体大小。 我已经尝试过以下选项，但无法正常工作。 可以说我通过使用控制选项放大了文本，然后如果我应用字体大小，那么它将无法正常工作。

 var canvas = new fabric.Canvas('a'); var add_text = new fabric.IText('Hello World', { left: 50, top: 50, fontSize:20, }); canvas.add(add_text); canvas.renderAll(); $('.manage_font_size').change(function(){ var cur_value = $(this).val(); if(cur_value!='') { var activeObj = canvas.getActiveObject(); //Check that text is selected if(activeObj==undefined) { alert('Please select a Text'); return false; } activeObj.set({ fontSize: cur_value }); canvas.renderAll(); } }); 

 canvas { border: 2px solid black; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> <select class="manage_font_size"> <option>select</option> <option value="10">10 PX</option> <option value="20">20 PX</option> <option value="30">30 PX</option> <option value="40">40 PX</option> </select> <canvas id="a" width="400" height="200"></canvas> 

Answer 1

您可以将scaleX和scaleY重置为1以抵消大小更改，然后应用fontSize

 var canvas = new fabric.Canvas('a'); var add_text = new fabric.IText('Hello World', { left: 50, top: 50, fontSize:20, }); canvas.add(add_text); canvas.renderAll(); $('.manage_font_size').change(function(){ var cur_value = $(this).val(); if(cur_value!='') { var activeObj = canvas.getActiveObject(); //Check that text is selected if(activeObj==undefined) { alert('Please select a Text'); return false; } activeObj.set({ scaleX:1, scaleY:1, fontSize: cur_value }); canvas.renderAll(); } }); 

 canvas { border: 2px solid black; } 

 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script> <select class="manage_font_size"> <option>select</option> <option value="10">10 PX</option> <option value="20">20 PX</option> <option value="30">30 PX</option> <option value="40">40 PX</option> </select> <canvas id="a" width="400" height="200"></canvas>