Ткань curvedText spacing/kerning issues

Question

Я пытаюсь исправить вопрос о расстоянии/кернинге, который я обнаружил в расширении fabric.curvedText.js.

curvedText.js

https://github.com/Skritz/fabric.curvedText/blob/master/curvedText.js

при добавлении заглавных букв в предложении это кажется скидывать интервал между каждой буквы на радиусе.

Любые идеи о том, как я могу это исправить?

HTML & CSS

<style type="text/css"> 
body{ 
font-family: Helvetica; 
font-weight: normal; 
font-size: 13px; 
} 
.canvas-box{ 
clear: both; 
position: relative; 
width: 740px; 
height: 700px; 
margin: auto; 
} 
.canvas-box .canvas-nav{ 
width: 200px; 
height: 462px; 
float: left; 
position: relative; 
background: #E9E9E9; 
padding: 20px; 
} 
.canvas-box .canvas-wrap{ 
float: left; 
position: relative; 
} 
</style> 

<div class="canvas-box"> 
<div class="canvas-wrap"> 
<canvas id="c" width="500" height="500" style="border:1px solid #E9E9E9;"></canvas><br/> 
</div> 
<div class="canvas-nav"> 
<input type="text" id="text" value="Enter Your Name" maxlength="20" /><br> 
Radius : <input type="range" min="0" max="100" value="50" id="radius" /><br> 
Spacing : <input type="range" min="5" max="40" value="20" id="spacing" /><br> 
<button id="save_img">Save Image</button> 
</div> 
</div> 
<div class="show_img"></div> 

JS

<script type='text/javascript' src='http://code.jquery.com/jquery-1.9.1.js'></script> 
<!--[if IE]><script type="text/javascript" src="http://explorercanvas.googlecode.com/svn/trunk/excanvas.js"></script><![endif]--> 
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js"></script> 
<script type='text/javascript' src="https://rawgithub.com/EffEPi/fabric.curvedText/master/fabric.curvedText.js"></script> 
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){ 
var CurvedTextWidth = 0; 
canvas = new fabric.Canvas('c'); 
var circle = new fabric.Circle({ 
radius: 100, fill: 'blue', left: $("#c").width()/2, top: $("#c").height()/2, selectable: false 
}); 
canvas.add(circle); 
canvas.on('selection:cleared', onDeSelected); 
canvas.on('object:selected', onSelected); 
canvas.on('selection:created', onSelected); 

var CurvedText = new fabric.CurvedText($('#text').val(),{ 
left: $("#c").width()/2, 
top: $("#c").height()/2 -50, 
textAlign: 'center', 
fill: '#ffffff', 
radius: 80, 
id: 12, 
fontSize: 18, 
spacing: 10, 
fontFamily: 'Arial', 
fontWeight: 'normal' 
}); 

canvas.add(CurvedText).renderAll(); 
canvas.setActiveObject(canvas.item(canvas.getObjects().length-1)); 
$('#text').keyup(function(){ 
var obj = canvas.getActiveObject(); 
if(obj){ 
obj.setText(this.value); 
canvas.renderAll(); 
//update space and position 
updatePos(); 
} 
}); 

$('#text').focus(function(){ 
canvas.setActiveObject(canvas.item(canvas.getObjects().length-1)); 
}); 

//update space and position 
function updatePos(){ 
CurvedText.top=$("#c").height()/2 - 86 + CurvedText.height/2; 
canvas.renderAll(); 
} 

$('#radius, #spacing').change(function(){ 
var obj = canvas.getActiveObject(); 
if(obj){ 
obj.set($(this).attr('id'),$(this).val()); 
} 
canvas.renderAll(); 
//update space and position 
updatePos(); 
}); 

$('#radius, #spacing').change(function(){ 
var obj = canvas.getActiveObject(); 
if(obj){ 
obj.set($(this).attr('id'),$(this).val()); 
} 
canvas.renderAll(); 
//update space and position 
updatePos(); 
}); 

$('#convert').click(function(){ 
var props = {}; 
var obj = canvas.getActiveObject(); 
if(obj){ 
if(/curvedText/.test(obj.type)) { 
default_text = obj.getText(); 
props = obj.toObject(); 
delete props['type']; 
var textSample = new fabric.Text(default_text, props); 
}else if(/text/.test(obj.type)) { 
default_text = obj.getText(); 
props = obj.toObject(); 
delete props['type']; 
props['textAlign'] = 'center'; 
props['radius'] = 50; 
props['spacing'] = 20; 
var textSample = new fabric.CurvedText(default_text, props); 
} 
canvas.remove(obj); 
canvas.add(textSample).renderAll(); 
canvas.setActiveObject(canvas.item(canvas.getObjects().length-1)); 
} 
}); 

function onSelected(){ 
var obj = canvas.getActiveObject(); 
$('#text').val(obj.getText()); 
$('#reverse').prop('checked', obj.get('reverse')); 
$('#radius').val(obj.get('radius')); 
$('#spacing').val(obj.get('spacing')); 
$('#fill').val(obj.getFill()); 
} 
function onDeSelected(){ 
$('#reverse').prop('checked', false); 
$('#radius').val(50); 
$('#spacing').val(20); 
$('#fill').val('#0000FF'); 
} 
});//]]> 

$("#save_img").click(function(){ 
canvas.deactivateAll().renderAll(); 
var mycanvas = document.getElementById("c"); //get your canvas 
var image = mycanvas.toDataURL("image/png"); 
window.open(image); 
}); 
</script> 

Answer 1

Я просто устранили эту проблему в другом изогнутым расширение текста для fabricjs:

https://github.com/EffEPi/fabric.curvedText

Вы можете попробовать использовать этот вариант или адаптировать исправленный код к используемому вами расширению. Ключ в этой строке:

curAngle = (i * parseInt(this.opts.spacing)) + parseInt(this.opts.rotate) - align; 

Это означает, что каждая буква из предыдущей имеет фиксированную ширину. Вам нужно разместить его в зависимости от размера буквы. В моем коде я сделал это так:

thisLetterAngle = ((this.letters.item(i).width + space)/this.radius)/(Math.PI/180); 
curAngleRotation = multiplier * ((multiplier * curAngle) + lastLetterAngle + (thisLetterAngle/2)); 
curAngle = multiplier * ((multiplier * curAngle) + lastLetterAngle); 
angleRadians=curAngle*(Math.PI/180); 
lastLetterAngle = thisLetterAngle; 

Этот код вычисляет угол, где следующая буква будет, используя угол формула = circunference/радиус curAngleRotation является вращение я применю к письму, и мне нужно он в классах curAngle позиция в окружности, где письмо будет и мне нужно в радианах множитель устанавливается равным 1 для вогнутого эффекта и -1 для convexe

и после расчетов, важно первым установить угол письма, а затем позиция письмо

this.letters.item(i).setAngle(curAngleRotation); 
this.letters.item(i).set('top', multiplier*-1*(Math.cos(angleRadians)*this.radius)); 
this.letters.item(i).set('left', multiplier*(Math.sin(angleRadians)*this.radius));