I'm using jscolor-colorpicker with fabricjs-IText in a way that gives me a live preview of the color on mouse-move. The only thing not cool now is that the semitransparent selection highlighting is messing up the colorpreview in text-edit mode. Any ideas on how to remove the selection highlighting or make the selection totally transparent?
I can't find any properties in the jsdoc relating to the selection color!? http://fabricjs.com/docs/fabric.IText.html
<input value="ffcc00" id="fill" class="jscolor {onFineChange:'itext_setcolor(this)',hash:true}">
window.itext_setcolor = function(val) {
obj = canvas.getActiveObject();
if (obj) {
if (obj.isEditing) {
setStyle(obj, 'fill', '#' +val);
} else
{
obj.setFill('#' + val);
}
canvas.renderAll();
}
};
EDIT 1
Thank's @STHayden for giving me the right answer. Here's the final working code with reappearance of the highlighting when text selection changes.
...
canvas.on('text:selection:changed', onTextChangedIText);
...
function onTextChangedIText() {
var obj = canvas.getActiveObject();
if (obj.selectionStart>-1) {
obj.set({'selectionColor':'rgba(17,119,255,0.3)'});
}
}
window.itext_setcolor = function(val) {
obj = canvas.getActiveObject();
if (obj) {
if (obj.isEditing) {
obj.set({'selectionColor':'transparent'});
setStyle(obj, 'fill', '#' +val);
} else
{
obj.setFill('#' + val);
}
canvas.renderAll();
}
};
You have a lot of options. The property on IText for the selection color is selectionColor
and you can set it to be fully transparent with the keyword transparent
or an rgba value: rgba(0,0,0,0)
.
If you get the reference to the IText object you can also do a few things:
startSelection
and endSelection
to 0..exitEditing()
function on the IText object..discardActiveObject()
when you are done letting the user pick a color you can set the selection back to what it was.