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

问题描述

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

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

href =http://fabricjs.com/test/misc/itext.html =nofollow> http://fabricjs.com/test/misc/itext.html

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

至@ user43250937
hey uhm。我试过它，它的工作原理！ ：D谢谢。
我试过Underline，Bold，Italic，但我有一个问题，改变文本的颜色，我尝试：

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

});

推荐答案

没有工作完全忽略这里，我回答这个时候，因为fabricjs库是相当复杂，文档有点缺乏有时...

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...

该页包含 IText对象的示例，可以在适当位置编辑的文本（基本fabricjs文本对象的内容可以

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).

使用不同样式构建静态IText对象非常简单：

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

<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：

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 line，然后为 world 行）。

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. 为每个要动态应用的样式（粗体，斜体，更改颜色，更改背景等）添加按钮或可点击的元素;


2. 为每个样式添加点击监听器

您需要一个基本功能来添加处理程序您将重用每个样式按钮：

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');
});

链接到工作JSFiddle 和一个工作下划线按钮。

Link to working JSFiddle with a working underline button.

您可以看到一点编码，但它不是那么复杂，可用的样式选项的完整列表您可以检查fabricjs文档。

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屋！