javascript - 织物弯曲文本间距/字距调整问题

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;

此代码使用公式 Angular = 周长/半径计算下一个字母所在的 Angular curAngleRotation 是我将应用于字母的旋转，我需要在成绩中使用它 curAngle 是字母在圆周上的位置，我需要以弧度为单位 对于凹面效果，乘数设置为 1，对于凸面效果，乘数设置为 -1

计算完成后，重要的是首先设置字母的 Angular ，然后定位字母

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