Question

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

<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，它就解决了。

多个织物弯曲文本在一个画布上注入

1 个答案: