2016-01-27 3 views
0

Я добавляю несколько изогнутых текстов в один холст с помощью 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> 

+0

Вы должны включить исходный код fabric.curvedText. – AndreaBogazzi

ответ

0

Она решается. Поскольку это была моя ошибка, я использовал любую старую версию fab.js library. Связывая fabcric.js cnd, он решается.

Смежные вопросы