javascript 如何编辑 FabricJS IText 并应用新样式（例如突出显示等...）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29934252/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to edit a FabricJS IText and apply new styles (e.g. highlighting, etc...)
提问by Joker
I want to edit the highlighted characters in a text in canvas using fabric.js, like change its color, font, style etc.
我想使用 fabric.js 编辑画布中文本中突出显示的字符，例如更改其颜色、字体、样式等。
just like this http://fabricjs.com/test/misc/itext.html
就像这样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 :
到@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);
});
回答by Umberto Raimondi
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...
通常在没有描述您尝试过的内容和无效的内容的情况下回答在这里完全被忽略，我这次回答是因为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 对象的示例，可以就地编辑的文本（基本fabricjs 文本对象的内容只能通过 javascript 从外部修改）。
Building a static IText object with different styles applied it's simple:
构建一个应用不同样式的静态 IText 对象很简单：
HTML:
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:
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 to JSFiddle
链接到JSFiddle
As you can see you just specify the style for every character of each for each line (first for the helloline, then for the worldline).
如您所见，您只需为每行的每个字符指定样式（首先为hello行，然后为world行）。
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:
如果您想要一些能够选择一些文本并更改外观/样式的动态内容，则需要做一些工作，您需要：
- Add a button or a clickable element for each style (bold,italic,change color, change background,etc...) that you want to apply dynamically;
- Add a click listener to each button with some code that changes the style of the selected text inside the IText.
- 为您想要动态应用的每种样式（粗体、斜体、更改颜色、更改背景等）添加一个按钮或可点击元素；
- 使用一些代码为每个按钮添加一个单击侦听器，这些代码会更改 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 JSFiddlewith a working underline button.
链接到带有工作下划线按钮的工作 JSFiddle。
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 文档。
