Как установить абсолютную позицию для каждого элемента в IText Fabricjs

Question

Пожалуйста, помогите мне, как установить абсолютную позицию каждого текстового элемента в IText Fabricjs.В этом примере я хочу, чтобы текст "KÍNH MỜI" выровнял горизонтальный центр с текстом нижеОжидаемый результат:

Фактический результат:

Вот мой код:

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', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
  left: 162, 
  top: 50, 
  width: 216.125889, 
  fontSize: 11.3735, 
  fontFamily: 'Times New Roman', 
  fontWeight: 'normal', 
  fill: "#404041",
  editable: false, 
  styles: { 
    0: {
      0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
    },
    1: {
      0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
    },
    2: {
      0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
    }
  }
});
canvas.add(textbox1); 
canvas.renderAll();

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

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

Answer 1

Вам нужно textAlign: center.Я также изменил значение lineHeight на 1 (по умолчанию 1,16), чтобы оно выглядело как ожидаемый результат.

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', {
  backgroundColor: 'white',
  selectionLineWidth: 2,
  width: $("#canvasContainer").width(),
  height: $("#canvasContainer").height()
});

var textbox1 = new fabric.IText("KÍNH MỜI\n \n.......................................................................................", {
  left: 162, 
  top: 50, 
  width: 216.125889, 
  fontSize: 11.3735, 
  fontFamily: 'Times New Roman', 
  fontWeight: 'normal', 
  textAlign: 'center',
  lineHeight: 1,
  fill: "#404041",
  editable: false, 
  styles: { 
    0: {
      0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
    },
    1: {
      0: { fontFamily: 'Times New Roman', fontSize: '11.3735', fill: '#404041' }
    },
    2: {
      0: { fontFamily: 'Times New Roman', fontSize: '7.4898', fill: '#404041' }
    }
  }
});
canvas.add(textbox1); 
canvas.renderAll();

#canvasContainer {
  width: 100%;
  height: 100vh;
  background-color: gray;
}

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