如何为 IText Fabricjs 中的每个项目设置绝对位置

Posted 2023-03-25

【中文标题】如何为 IText Fabricjs 中的每个项目设置绝对位置

【英文标题】：How to set absolute position for each item in IText Fabricjs

【发布时间】：2019-05-09 20:37:29

【问题描述】：

请帮助我，如何在 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>  

【参考方案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>

【讨论】：

感谢您的回答 shkaper。顺便说一句，有没有什么方法可以设置字符数组的样式，而不是用 fabric.IText 逐个设置字符？

不，我不知道

@ThoBuiNgoc setSelectionStyles

感谢 Durga，这是一个很好的解决方案！让我试试吧！