在 fabric.js 中编辑 iTextBox 时阻止事件

Question

我使用 fabric.js 开发了一个程序，其中有一些 canvas 和 textEdit。

问题是我有一个键盘事件监听器，当我在iTextBox中输入一个字母时，如果它与监听器中处理的字母重合，它也会触发事件。

关于如何防止这种情况有什么想法吗？

编辑：添加一段我正在使用的代码。

$( "body" ).keydown(function(e) {
    keyboardEvents(e);
});

function keyboardEvents(e){
    //Necesario para todo lo que no sea Chrome
    keyCode = (window.Event) ? e.which : e.keyCode;

    //Pulsar "a" para crear una curva con linea nueva.
    if(keyCode == 65){
        /* Random Function*/
    }
}

function createNewTextBoxWithIndex(index){
    textBox[closedCurvesIndex-1] = new fabric.IText("Patrón "+index, {
        top: closedCurves[index-1][3]+30,
        left: closedCurves[index-1][2],
        width: 600,
        height: 600,
        backgroundColor: '#FFFFFF',
        fill: '#000000',
        fontSize: 18,
        lockScalingX: true,
        lockScalingY: true,
        hasRotatingPoint: false,
        transparentCorners: false,
        cornerSize: 7,
        value: index  
    });

    canvas[0].add(textBox[index-1]);
}

createNewTextBoxWithIndex(1);

Answer 1

其实你可以查清楚事件的起源，然后再设计。我没有 iTextBox 但我猜下面的方法是相似的。

在此代码段中，我创建了两个 input type =text，但只有当键盘事件的来源不是来自第二个输入时，我才会监听键盘事件

HTML

<input type ="text" id="firstIp">
<input type ="text" id = "secondIp">

JS

$('body').on('keydown',function(event){
 var getEvtTarget = event.target.id;
 if(getEvtTarget !== "firstIp"){
   keyboardEvents(event)
 }

})
function keyboardEvents(event){
alert(event.keyCode)

}

JSFIDDLE

您还可以检查事件是否由 iTextBox 引起，如果是，则不要调用 keyboardEvents 函数。

希望这会有所帮助

在 fabric.js 中编辑 iTextBox 时阻止事件

Prevent events while iTextBox has been edited in fabric.js

javascript

text-editor

html5-canvas

fabricjs