我正在研究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' width="500" height="400" style="border:#000 1px solid;"></canvas>
但这只是重新缩放文本而不是增加/减少字体大小,但我必须像this一样调整字体大小
解决方法
我们的想法是使用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,lockUniScaling: true,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>