在单个画布上显示多个面料曲线文字

我在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>

来源

2016-01-27 Akshay Vaghasiya

您应该包含fabric.curvedText的源代码。 – AndreaBogazzi

也就迎刃而解了。因为我错误地使用过任何旧版本的fabric.js库。通过链接fabcric.js结束，它被解决了。

来源

2016-01-27 10:21:53

在单个画布上显示多个面料曲线文字

回答

相关问题