javascript - 如何编辑 FabricJS IText 并应用新样式(例如突出显示等...)

Question

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

就像这样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 文档。