2017-11-21 10 views
0

캔버스에서 텍스트의 글꼴 크기를 변경하려고합니다. 아래 옵션을 시도했지만 제대로 작동하지 않습니다. 말하자면 내가 제어 옵션을 사용하여 텍스트를 확대하고 그 후에 글꼴 크기를 적용하는 경우 작동하지 않는다고 말합니다.패브릭 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

당신은 scaleX 다시 1-scaleY은 크기 변화를 부정하고 적용하기 위해 다시 설정할 수 있습니다 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>