单个 canvas 中的多个织物弯曲文本对象

Question

我正在使用 fabric.js 在单个 canvas 中添加多个弯曲文本。我已经在 canvas 中成功添加了第一个对象。但是当我要在 canvas 中添加第二个对象时，对象控件会完美显示。但是文本的起始位置不在对象的左上角。而且我不知道我哪里错了。如果有人知道这个问题的解决方案，那么将不胜感激。这是我的代码。

<html>
<head>
    <script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
    <script src="fabric.js"></script>
    <script src="fabric.curvedText.js"></script>
    <script type="text/javascript">
        $(function () {
            var canvas = new fabric.Canvas('c');

            var upperCurvedText = new fabric.CurvedText('Upper Curved Text', {
                top: 0,
                left: 500,
                textAlign: 'center',
                radius: 500,
                fontSize: 30,
                spacing: 30,
                originX: 'center'
            });
            canvas.add(upperCurvedText);

            var lowerCurvedText = new fabric.CurvedText('Lower Curved Text', {
                top: 1000,
                left: 500,
                textAlign: 'center',
                radius: 500,
                fontSize: 30,
                spacing: 30,
                originX: 'center',
                originY: 'bottom',
                reverse: true
            });
            canvas.add(lowerCurvedText).renderAll();
            canvas.setActiveObject(canvas.item(canvas.getObjects().length - 1));
        });
    </script>
</head>

<body>
    <div class="row">
        <div class="row canvas-container">
            <canvas id="c" width="1000" height="1000" style="border:1px dotted #000; border-radius: 50%;"></canvas><br>
        </div>
    </div>
</body>

Answer 1

已解决。因为我使用了任何旧版本的 fabric.js 库是我的错误。通过链接fabcric.js cnd，解决

单个 canvas 中的多个织物弯曲文本对象

Multiple fabric curved text onjects in a single canvas

fabricjs