Question

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

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

到@ user43250937 嘿嗯我尝试了它，它的工作原理！：D谢谢。我尝试使用Underline，Bold，Italic，但我在更改文本颜色方面遇到了问题，我试过了：

// "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行。）

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

为要动态应用的每种样式（粗体，斜体，更改颜色，更改背景等等）添加按钮或可单击元素;
为每个按钮添加一个单击侦听器，其中包含一些代码，用于更改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文档。

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

1 个答案: