Fabricjs IText - 清晰的字符特定样式

Question

我需要能够为整个 IText 对象设置 fontFamily，即使它具有特定于字符的样式(下面的代码示例和 jsfiddle)。请注意，更改 fontFamily 时，特定于字符的样式不会更改。有没有办法让我访问并清除这些样式，然后将样式应用到整个字符集？

http://jsfiddle.net/xmfw65qg/48/

var iTextSample = new fabric.IText('hello\nworld', {
styles: {
    0: {
      0: { textDecoration: 'underline', fontSize: 80 },
      1: { textBackgroundColor: 'red' }
    },
    1: {
      0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
      4: { fontSize: 20 }
    }
  }
});

Answer 1

2020年5月编辑

在Fabricjs的以后修订中，方法 emovestyle(prop)已被添加。 这意味着您可以做:

myTextObject.removeStyle('fontFamily');

清理它。

您也有:

myTextObject.cleanStyle('fontFamily');

将删除主要对象复制的所有fontafamily属性。如果可能的话，使样式对象的复杂性减小。

原始答案

http://jsfiddle.net/asturur/xmfw65qg/50/

您必须手动迭代样式对象并清除fontfamily属性。

function setFont(name, value) {
  var object = canvas.item(0);
  if (!object) return;
  if (object.styles) {
    var styles = object.styles;
    for (var row in styles) {
      for (var char in styles[row]) {
        if ('fontFamily' in styles[row][char]) {
          delete styles[row][char]['fontFamily'];
        }
      }
    }
  }

    object.set(name, value).setCoords();
    canvas.renderAll();
}

为什么这是必要的则是另一回事。 我会为此在 github 存储库上提出一个问题。

编辑: Fabricjs 发布 1.6.2 时，导致原始样式对象在渲染过程中发生更改的小错误已得到修复。