如何编辑 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);

Link 至 JSFiddle

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

如果你想要一些动态的东西，能够 select 一些文本并改变 appearance/style 还有一些工作要做 ，你需要至：

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

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

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 并应用新样式（例如突出显示等...）

How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc...)

javascript

canvas

fabricjs