0
私はファブリックを更新しましたCurvedText私たちの要件のために拡張は何か異なっています。私はそれが完全な円をカバーする文字間の自動間隔を設定したいと思います。私はファブリックCurvedText拡張でコードを更新した後に解決策を得ました。 （テキストボックスのkeyupイベントで）オブジェクトのテキストを変更している間に、間隔との間隔とテキストをsetTextとset（ "spacing"、val）プロパティで設定して再計算します。状況によっては、キャンバスにオブジェクトが表示されないしかしキャンバスマウスのホバー効果にオブジェクトのポインタが見えます。FabricJS CurvedTextオブジェクト（拡張）はスペースとテキストのプロパティの更新時に表示されません
このスニペットのテキストボックスから文字を削除すると、一部の文字を削除するとオブジェクトが非表示になります。 テキストボックスに文字を追加すると同じことが起こります。
Updated curved text extension。
var radius = 100;
var circum = Math.floor(2 * Math.PI * radius);
var spacing = 0;
var fontFamily = 'Arial';
var fontSize = 30;
var text;
var lineHeight = 1;
var topa = 100;
var left = 200;
var char = 0;
var textWidth = 0;
var obj;
var canvas, ctx;
$(document).ready(function() {
canvas = new fabric.Canvas('c');
ctx = canvas.getContext("2d");
text = $('#uppertext').val();
spacingOperation();
var upperText = new fabric.CurvedText(text, {
radius: radius,
top: topa,
left: left,
fontFamily: fontFamily,
fontSize: fontSize,
lineHeight: lineHeight,
spacing: spacing,
originX: 'center',
hasControls: true,
hasBorders: true,
selectable: true,
textAlign: 'center'
});
canvas.add(upperText).renderAll();
$('#uppertext').on('keyup', function() {
text = $('#uppertext').val();
setObjects();
if (spacingOperation())
{
setProps();
canvas.renderAll();
}
});
});
function spacingOperation() {
textWidth = getTotalTextWidth();
spacing = 0;
textWidth = getTotalTextWidth();
var diff = Math.ceil(circum - textWidth);
spacing = Math.ceil(diff/char);
return true;
}
function getTotalTextWidth()
{
ctx.font = fontSize + 'px ' + fontFamily;
char = text.length;
txtWidth = Math.ceil(ctx.measureText(text).width + (spacing * char));
return txtWidth;
}
function setObjects() {
canvas.setActiveObject(canvas.item(0));
obj = canvas.getActiveObject();
}
function setProps() {
obj.set('spacing', spacing);
obj.setText(text);
obj.setCoords();
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.js"></script>
<script src="http://www.trimantra.com/demo/fabric.curvedText_done.js"></script>
</head>
<body>
<div class="row">
<div class="row canvas-container" style="width: 50%; float: left;">
<canvas id="c" width="400" height="400" style="border:1px dotted #000;"></canvas>
</div>
<div class="row" style="float: left; width: 50%; height: 150px;">
Upper Text : <input type="text" id="uppertext" value="UTXXXXXXXXXXXXXUTXXXXXaaaaaaaawwwwwwwwwXXXXXXXXUTXXXXXXXXXXXXXUTXXXXXXXXXXXXX" />
</div>
</div>
</body>
</html>
これは完全に動作していますが、私はキャンバスコンテキストを作成するためにこれらの2つの行の違いを理解できません。 –