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

【问题标题】：Make text grow uni-directionally on calling set('text', 'some value')在调用 set('text', 'some value') 时使文本单向增长
【发布时间】：2013-04-07 13:40:15
【问题描述】：

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

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

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

大家有什么建议吗？

【问题讨论】：

标签： fabricjs

【解决方案1】：

这是因为默认原点是对象的中心。所以你需要将“originX”设置为“left”。正如您在Kintchensink source file 中看到的：


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();
};

【讨论】：

太棒了！这正是我想要的。谢谢你。 :)