Question

如何在FabricJS画布上使文本对象从中心增长/缩小，并在添加或删除文本时双向展开？

我尝试添加centeredScaling: true，但这仅用于调整对象大小（缩放），而不是添加/删除文本。

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

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从中心发展壮大

1 个答案: