如何编辑 FabricJS IText 并应用新样式（例如突出显示等...）

Question

我想使用 fabric.js 编辑画布中文本中突出显示的字符，例如更改其颜色、字体、样式等。

就像这样http://fabricjs.com/test/misc/itext.html

到@user43250937 嘿嗯。我试过了，它有效！ :D 谢谢。 我尝试了下划线、粗体、斜体，但我在更改文本颜色时遇到了问题，我尝试了：

// "cinput" is the id of the color picker.


addHandler('cinput', function(obj) {
    var color =  $("#cinput").val();

    var isColor = (getStyle(obj, 'fill') || '').indexOf(color) > -1;

     setStyle(obj, 'fill', isColor ? '' : color);

});

Answer 1

通常在没有描述您尝试过的内容和无效的内容的情况下回答，这里完全忽略了，我这次回答是因为 fabricjs 库非常复杂，有时文档有点缺乏......

该页面有 IText object 的示例，可以就地编辑文本（基本的 fabricjs 文本对象的内容只能从外部通过 javascript 进行修改）。

构建一个应用了不同样式的静态 IText 对象很简单：

HTML：

<canvas id="canv" width="250" height="300" style="border: 1px solid rgb(204, 204, 204); width: 400px; height: 400px; -webkit-user-select: none;"></canvas>

Javascript：

var canvas=new fabric.Canvas('canv');

var iTextSample = new fabric.IText('hello\nworld', {
  left: 50,
  top: 50,
  fontFamily: 'Helvetica',
  fill: '#333',
  lineHeight: 1.1,
  styles: {
    0: {
      0: { textDecoration: 'underline', fontSize: 80 },
      1: { textBackgroundColor: 'red' }
    },
    1: {
      0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },
      4: { fontSize: 20 }
    }
  }
});

canvas.add(iTextSample);

链接到JSFiddle

如您所见，您只需为每行的每个字符指定样式（首先为hello 行，然后为world 行）。

如果你想要一些动态的东西，能够选择一些文本并改变外观/样式还有一些工作要做，你需要：

1. 为您要动态应用的每种样式（粗体、斜体、更改颜色、更改背景等）添加一个按钮或可点击元素；
2. 为每个按钮添加一个点击侦听器，并使用一些代码更改 IText 中选定文本的样式。

您将需要一个基本函数来添加您将为每个样式按钮重复使用的处理程序：

function addHandler(id, fn, eventName) {
  document.getElementById(id)[eventName || 'onclick'] = function() {
    var el = this;
    if (obj = canvas.getActiveObject()) {
      fn.call(el, obj);
      canvas.renderAll();
    }
  };
}

还有一些改变样式的辅助函数：

function setStyle(object, styleName, value) {
  if (object.setSelectionStyles && object.isEditing) {
    var style = { };
    style[styleName] = value;
    object.setSelectionStyles(style);
  }
  else {
    object[styleName] = value;
  }
}

function getStyle(object, styleName) {
  return (object.getSelectionStyles && object.isEditing)
    ? object.getSelectionStyles()[styleName]
    : object[styleName];
}


addHandler('underline', function(obj) {
  var isUnderline = (getStyle(obj, 'textDecoration') || '').indexOf('underline') > -1;
  setStyle(obj, 'textDecoration', isUnderline ? '' : 'underline');
});

Link to working JSFiddle 带有一个有效的下划线按钮。

如您所见，这涉及到一些编码，但这并不复杂，有关可用样式选项的完整列表，您可以查看 fabricjs 文档。