2017-11-21 15 views
0

キャンバス内のテキストのフォントサイズを変更しようとしています。私は以下のオプションを試してみましたが、正しく動作していません。私は制御オプションを使用してテキストを拡大していると私はフォントサイズを適用している場合は、それが動作しないと言うことができます。Fabric JSのフォントサイズをリセットする

var canvas = new fabric.Canvas('a'); 
 
var add_text = new fabric.IText('Hello World', { 
 
\t left: 50, 
 
\t top: 50, 
 
\t fontSize:20, 
 
}); 
 

 
canvas.add(add_text); 
 
canvas.renderAll(); 
 

 
$('.manage_font_size').change(function(){ 
 
\t var cur_value = $(this).val(); 
 
\t if(cur_value!='') 
 
\t { 
 
\t \t var activeObj = canvas.getActiveObject(); 
 
\t \t //Check that text is selected 
 
\t \t if(activeObj==undefined) 
 
\t \t { 
 
\t \t \t alert('Please select a Text'); 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t activeObj.set({ 
 
\t \t \t fontSize: cur_value 
 
\t \t }); 
 
\t \t canvas.renderAll(); 
 
\t } 
 
});
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"> 
 
\t <option>select</option> 
 
\t <option value="10">10 PX</option> 
 
\t <option value="20">20 PX</option> 
 
\t <option value="30">30 PX</option> 
 
\t <option value="40">40 PX</option> 
 
</select> 
 
<canvas id="a" width="400" height="200"></canvas>

+0

を適用することができます:まずテキストを選択し、mそれはフォントサイズを大きく変えます。私はフォントサイズを設定しようとしていますが、オブジェクトの現在のフォントサイズからフォントサイズを加算または減算しているように見えます。 – DS9

答えて

1

あなたは、サイズ変更を否定するために戻って1にscaleXscaleYをリセットして、あなたがこれを行うことによって確認することができますfontSize

var canvas = new fabric.Canvas('a'); 
 
var add_text = new fabric.IText('Hello World', { 
 
\t left: 50, 
 
\t top: 50, 
 
\t fontSize:20, 
 
}); 
 

 
canvas.add(add_text); 
 
canvas.renderAll(); 
 

 
$('.manage_font_size').change(function(){ 
 
\t var cur_value = $(this).val(); 
 
\t if(cur_value!='') 
 
\t { 
 
\t \t var activeObj = canvas.getActiveObject(); 
 
\t \t //Check that text is selected 
 
\t \t if(activeObj==undefined) 
 
\t \t { 
 
\t \t \t alert('Please select a Text'); 
 
\t \t \t return false; 
 
\t \t } 
 
\t \t activeObj.set({ 
 
     scaleX:1, 
 
     scaleY:1, 
 
\t \t \t fontSize: cur_value 
 
\t \t }); 
 
\t \t canvas.renderAll(); 
 
\t } 
 
});
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"> 
 
\t <option>select</option> 
 
\t <option value="10">10 PX</option> 
 
\t <option value="20">20 PX</option> 
 
\t <option value="30">30 PX</option> 
 
\t <option value="40">40 PX</option> 
 
</select> 
 
<canvas id="a" width="400" height="200"></canvas>

関連する問題