javascript - 在 Fabric JS 中重置字体大小

Question

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

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>