Fabric.js iText：如何在不允许修改文本的情况下在iText上进行文本选择？

Question

我一直在阅读文档和论坛来解决此问题，但找不到答案。

    var t1 = canvas.t1 =  _t1 = new fabric.IText(text1, {
      left: 100,
      top: 50,
    editable: true,
    selectable: false,
         width: 300,
     height: 150,
      fontFamily: 'Helvetica',
    fontSize: 20,
      fill: '#f4b642',

} );

var t2 = canvas.t2 =  _t1 = new fabric.IText(text2, {
      left: 200,
      top: 150,
    editable: false,
    selectable: true,
    width: 300,
     height: 150,
      fontFamily: 'Helvetica',
    fontSize: 20,
      fill: '#333',

} );

canvas.add(t1,t2);
t1.enterEditing();

https://jsfiddle.net/qgeryu9o/2/

如上面的iText元素所示，我想直接在页面加载时访问文本，这只是选择一些单词或句子。

使用itext.enterEditing（），如在上部的itext框上一样，除了它还允许我不希望的内容：删除，添加或修改文本之外，它可以正常工作。

在将itext.editable设置为false时（如在小提琴下面的iText元素上一样），无法修改文本，但是无法显示选择内容。

我试图按照此线程的建议在容器div上捕获keydown事件。 fabric.js canvas监听键盘事件吗？

但这对我不起作用（在Chrome，Firefox上尝试过），在编辑模式下不会在itext上触发该事件。

谢谢你的帮助。

麦克风

Answer 1

由于我找不到允许选择但无法编辑的Fabric.js参数，因此我使用了一种变通方法。

首先，我想删除设置在隐藏文本区域上的侦听器。 但是，由于使用bind（），如果不修改fabric.js，就无法删除这些侦听器：

fabric.util.addListener(this.hiddenTextarea, 'keydown', this.onKeyDown.bind(this));
fabric.util.addListener(this.hiddenTextarea, 'keyup', this.onKeyUp.bind(this));

因此，我只是覆盖了onInput（）和onKeydown方法。

t1.onInput = function() {
    console.log("no input on t1") ;
    return false } ;

t1.onKeyDown = function() {
    console.log("no onKeyDown on t1") ;
    return false } ;

如纠正的小提琴所示，它可以正常工作： https : //jsfiddle.net/qgeryu9o/4/

如果有一种更直接的方法来获得相同的结果（选择但没有版本），我将很高兴听到它。

谢谢