面料彎曲文字間距/字距問題

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，用於convexe

而且計算後的凹陷效果和-1，這一點很重要，首先設置角度的字母，然後的位置這封信

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));