Я добавляю несколько изогнутых текстов в один холст с помощью 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>
Вы должны включить исходный код fabric.curvedText. – AndreaBogazzi