在單個畫布上顯示多個面料曲線文字

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

在單個畫布上顯示多個面料曲線文字

回答

相關問題