FabricJS CurvedText对象(扩展）在更新间距和文本属性时未显示

FabricJS CurvedText object (extended) is not getting displayed on updating spacing and text properties

本文关键字：文本 属性 显示 更新 对象 CurvedText 扩展 FabricJS      更新时间：2023-09-26

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

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

更新了弯曲文本扩展名。

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>

我已经研究了您的代码，并将fabric curvedext扩展中的一行从ctx = new fabric.Canvas('c').getContext('2d');更改为ctx = fabric.util.createCanvasElement().getContext('2d');，它运行得非常好。

相关文章：