How to edit FabricJS IText and apply new styles (like highlighting, etc.)
I want to edit selected characters in text in canvas using fabric.js like change color, font, style, etc.
just like http://fabricjs.com/test/misc/itext.html
to @ user43250937 hey uh. I tried it and it works!: D thanks. I tried Underline, Bold, Italic, but I have a problem with changing the text color, 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);
});
source to share
Usually answers without describing what you tried and what didn't work are completely ignored here, I answer this time because the fabricjs library is quite complex and the documentation is sometimes lacking ...
This page has samples for an IText object , text that can be edited in place (the content of the main fabricjs text object can only be changed externally via javascript).
Constructing a static IText object with different styles is easy to apply:
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 to JSFiddle
As you can see, you are simply specifying the style for each character of each for each line (first for the line hello
, then for the line world
).
If you want something dynamic with the ability to select some text and change the look / style , there is some work to be done , you will need to:
- Add a button or clickable element for each style (bold, italic, change color, change background, etc.) that you want to apply dynamically;
- Add a click button for each button with code that changes the style of the selected text inside IText.
You will need a basic function that adds handlers that you will reuse for each 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 for changing 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 a working JSFiddle with a working underline button.
A bit of coding is involved as you can see, but it's not that hard, for a complete list of available style options you can check the fabricjs docs.
source to share