Question

我有更新了Fabric CurvedText 扩展名，因为我们的要求是不同的。我想在字符覆盖整圆时设置字符间的自动间距。我在更新了Fabric CurvedText扩展中的代码后得到了解决方案。当我更改对象的文本时（在文本框的键盘事件上），我重新计算间距，并通过setText和set（“spacing”，val）属性重新设置间距和文本。在某些情况下，我无法在画布上看到对象，但我可以在画布鼠标悬停效果上看到对象的指针。

从此代码段中的文本框中删除字符，删除某些字符后，对象将隐藏。当我在文本框中添加字符时，会发生同样的事情。

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>

Answer 1

我已经查看了您的代码，并将fabric {text}扩展中的一行从ctx = new fabric.Canvas('c').getContext('2d');更改为ctx = fabric.util.createCanvasElement().getContext('2d');，并且工作正常。

更新间距和文本属性时不显示FabricJS CurvedText对象（扩展）

1 个答案: