如何编辑 FabricJS IText 并应用新样式(例如突出显示等...) [英] How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc...)

问题描述

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

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

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

//"cinput" 是颜色选择器的 id.addHandler('cinput', function(obj) {var color = $("#cinput").val();var isColor = (getStyle(obj, 'fill') || '').indexOf(color) >-1;setStyle(obj, 'fill', isColor ? '' : color);});

解决方案

通常没有说明你尝试过什么和什么不起作用的答案在这里完全被忽略，我这次回答是因为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
world', {左:50，顶部:50，fontFamily: 'Helvetica',填充:'#333',线高:1.1，样式:{0:{0: { textDecoration: 'underline', fontSize: 80 },1: { textBackgroundColor: '红色' }},1:{0: { textBackgroundColor: 'rgba(0,255,0,0.5)' },4:{字体大小:20}}}});canvas.add(iTextSample);

链接到 JSFiddle

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

如果您想要一些能够选择一些文本并更改外观/样式的动态内容还有一些工作要做，您需要:

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

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

function addHandler(id, fn, eventName) {document.getElementById(id)[eventName ||'onclick'] = 函数(){var el = 这个;如果 (obj = canvas.getActiveObject()) {fn.call(el, obj);canvas.renderAll();}};}

以及一些改变样式的辅助函数:

function setStyle(object, styleName, value) {如果(object.setSelectionStyles && object.isEditing){var 样式 = { };样式[样式名称] = 值；object.setSelectionStyles(style);}别的 {对象[样式名称] = 值；}}函数 getStyle(object, styleName) {返回(object.getSelectionStyles && object.isEditing)?object.getSelectionStyles()[styleName]:对象[样式名称]；}addHandler('下划线', function(obj) {var isUnderline = (getStyle(obj, 'textDecoration') || '').indexOf('underline') >-1;setStyle(obj, 'textDecoration', isUnderline ? '' : 'underline');});

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

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

I want to edit the highlighted characters in a text in canvas using fabric.js, like change its color, font, style etc.

just like this http://fabricjs.com/test/misc/itext.html

to @user43250937 hey uhm. I tried it and it works! :D thanks. I tried Underline, Bold, Italic, but I have a problem changing the color of the text, I tried :

// "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);

});

解决方案

Usually answers without a description of what you tried and what didn't work are completely ignored here, i'm answering this time because the fabricjs library is quite complex and the documentation is a bit lacking sometimes...

That page has samples for the IText object, text that can be edited in place (the content of the basic fabricjs text object can be modified only from outside via javascript).

Building a static IText object with different styles applied it's simple:

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
world', {
  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 to JSFiddle

As you can see you just specify the style for every character of each for each line (first for the hello line, then for the world line).

If you want something dynamic with the ability to select some text and change the appearance/style there is some work to do, you'll need to:

1. Add a button or a clickable element for each style (bold,italic,change color, change background,etc...) that you want to apply dynamically;
2. Add a click listener to each button with some code that changes the style of the selected text inside the IText.

You'll need a basic function that add handlers that you will reuse for every style button:

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

And some helper functions to change the styles:

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 with a working underline button.

A bit of coding is involved as you can see, but it's not that complex, for the full list of available style options you can check the fabricjs documentation.

这篇关于如何编辑 FabricJS IText 并应用新样式(例如突出显示等...)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！