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 listen for keyboard events?

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

感谢您的帮助。

麦克

Answer 1

由于我找不到允许选择但没有编辑的Fabric.js参数，所以我使用了一种解决方法。

首先，我想删除隐藏的textarea上设置的侦听器。但是，由于使用了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/

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

谢谢

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

1 个答案: