Question

我正在使用带有fabricjs-IText的jscolor-colorpicker，以便在鼠标移动时实时预览颜色。现在唯一不酷的是半透明选择突出显示在文本编辑模式下搞乱了colorpreview。关于如何删除选择突出显示或使选择完全透明的任何想法？

我无法在jsdoc中找到与选择颜色相关的任何属性！？ 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();
        }  
 };

编辑1

感谢@STHayden给我正确答案。这是最终的工作代码，当文本选择发生变化时重新出现突出显示。

...
  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();
        }  
    };

Answer 1

你有很多选择。选择颜色的IText上的属性为selectionColor，您可以使用关键字transparent或rgba值将其设置为完全透明：rgba(0,0,0,0)。

如果您获得对IText对象的引用，您还可以执行以下操作：

将startSelection和endSelection更改为0。
调用IText对象上的.exitEditing()函数。
只需使用.discardActiveObject()

当您完成让用户选择颜色时，您可以将选择设置回原来的颜色。

如何在fabricjs IText中使选择突出显示透明？

1 个答案: