Как создать редактируемый текст, который изогнут вдоль пути в Fabricjs? - PullRequest
1 голос
/ 05 апреля 2019

Я хочу сделать редактируемый текст, который изогнут вдоль ткани. Путь, как показано ниже ожидаемого изображения.
enter image description here


Вот мой код:
Я создал изогнутую ткань. Path & fabric.TextBox, но я не знаю, как изогнуть текст вдоль этого пути. Пожалуйста, помогите мне решить эту проблему.

var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());

var canvas = new fabric.Canvas('editorCanvas', {
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var Path_0_1 = new fabric.Path('M127.91,99.29c32.16,10.73,53.41,7.33,67.81,0 c34.07-17.34,41.99-62.82,60.98-60.98c8.19,0.79,14.11,9.98,17.91,17.91', {
  fill : null,
  stroke: '#000000',
});
canvas.add(Path_0_1);

var curvedText = new fabric.IText("Anh Minh", {
  left: 50, 
  top: 50, 
  width: 200, 
  fontSize: 24, 
  fontFamily: 'Times New Roman', 
  fontWeight: 'normal', 
  textAlign: 'center',
  lineHeight: 1,
  fill: "#404041",
});
canvas.add(curvedText);
#canvasContainer {
  width: 100%;
  height: 500px;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>
  
<div id="canvasContainer">
  <canvas id="editorCanvas"></canvas>
</div>



Дополнительная информация:
Спустя несколько часов поиска в Google, я вижу интересный Konva.TextPath . Интересно, можем ли мы сделать такой же объект, как Konva.TextPath в Fabric.js?

Спасибо!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...