FabricJS iText 从中心增长

Question

如何在 FabricJS canvas grow/shrink 上从中心创建一个文本对象，并在添加或删除文本时双向扩展？

我尝试添加 centeredScaling: true 但这只是为了调整（缩放）对象的大小，而不是 adding/removing 文本。

如果您查看我的演示，您会发现当您单击文本并向对象添加更多字符时，它只会向右扩展，使文本偏离中心。

var canvas = this.__canvas = new fabric.Canvas('c');
var cWidth = 600;
var cHeight = 200;

canvas.setWidth(cWidth);
canvas.setHeight(cHeight);


function Addtext() {
  canvas.add(new fabric.IText('Text', {
    left: (cWidth / 2) - 83,
    top: (cHeight / 2) - 25,
    fontFamily: 'arial black',
    fill: '#333',
    fontSize: 50,
    centeredScaling: true,
  }));
}

 #c {
   border: 1px solid red;
   top: 22px;
   left: 0px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

<button onclick="Addtext()">Add Text</button>

<canvas id="c"></canvas>

Answer 1

将 align 和 x 和 y 的原点添加到 center。

var canvas = this.__canvas = new fabric.Canvas('c');
var cWidth = 600;
var cHeight = 200;

canvas.setWidth(cWidth);
canvas.setHeight(cHeight);


function Addtext() {
  canvas.add(new fabric.IText('Text', {
    left: (cWidth / 2) - 83,
    top: (cHeight / 2) - 25,
    fontFamily: 'arial black',
    fill: '#333',
    fontSize: 50,
    align: 'mid', //added
  originX: 'center', //added
  originY: 'center', //added
    centeredScaling: true,
  }));
}

 #c {
   border: 1px solid red;
   top: 22px;
   left: 0px;
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

<button onclick="Addtext()">Add Text</button>

<canvas id="c"></canvas>

FabricJS iText 从中心增长

FabricJS iText grow from center

javascript

jquery

canvas

fabricjs