fabricjs - 在调用 set('text', 'some value') 时使文本单向增长

Question

目前，每当我使用 set('text', 'some random text') 函数动态设置fabric.Text对象的文本时，宽度似乎双向增长，即从左侧和右侧。有没有办法让它只从左侧或右侧生长。我通过显式计算top_left_x、top_left_y、top_right_x、top_right_y并使用一些算术逻辑来实现这一点。

但是有什么内部的 fabricJS 属性（或类似的东西）可以实现这一点。

例如：在Kitchensink演示中，如果您添加一个新的 Text 对象并修改右下方文本区域中的文本，您将看到文本从右侧开始增长，而左侧保持固定。这正是我希望实现的。

有什么建议吗？

Answer 1

发生这种情况是因为默认原点是对象的中心。所以你需要将“originX”设置为“left”。正如您在Kinchensink 源文件中看到的那样：

document.getElementById('add-text').onclick = function() {
  var textSample = new fabric.Text(text.slice(0, getRandomInt(0, text.length)), {
    left: getRandomInt(350, 400),
    top: getRandomInt(350, 400),
    fontFamily: 'helvetica',
    angle: getRandomInt(-10, 10),
    fill: '#' + getRandomColor(),
    scaleX: 0.5,
    scaleY: 0.5,
    fontWeight: '',
    originX: 'left',
    hasRotatingPoint: true
  });
  canvas.add(textSample);
  updateComplexity();
};