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

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对象的样本,可以在适当位置编辑的文本(基本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');
});

使用工作下划线按钮链接到工作JSFiddle.

您可以看到一些编码,但它并不复杂,对于可用样式选项的完整列表,您可以检查fabricjs文档.