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

Question

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

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

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 curvedtext 扩展中的一行从 ctx = new fabric.Canvas('c').getContext('2d'); 更改为 ctx = fabric.util.createCanvasElement().getContext('2d');，它运行良好。

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

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

javascript

jquery

canvas

fabricjs