结构.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.enterEdit((，就像在上面的 itext 框中一样，这工作正常，除了 它也允许我不想要的：删除、添加或修改文本。

在将 itext.editable 设置为 false 时(如在小提琴下部 iText 元素上( 文本无法修改，但无法显示选择。

我试图按照此线程的建议在容器div 上捕获键控事件。 织物.js画布侦听键盘事件？

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

感谢您的帮助。

话筒

Answer 1

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

起初，我想删除在隐藏文本区域设置的侦听器。但是，由于使用了 bind((，因此无法删除这些侦听器无需修改结构.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/

如果有更直接的方法可以获得相同的结果(选择但没有版本(，我会很高兴听到它。

谢谢