如何在 FabricJS 中为 IText 对象添加按键监听器?



我目前有这段代码

fabric.IText.prototype.keysMap[13] = 'onEnterKeyPress';
fabric.IText.prototype.onEnterKeyPress = (e) => {
console.log('onEnterKeyPress', e);
// this.insertChars(e);
// fabric.IText.insertChars(e);
// return true;
// return e;
};

let canvas = new fabric.Canvas('canvas', {
preserveObjectStacking: true,
width: 980,
height: 600
});
let itext = new fabric.IText(
'Edit this text',
{
editable: true,
left: 100,
top: 100,
fontSize: 24
}
);
canvas.add(itext);
canvas.requestRenderAll();
<html>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.min.js"></script>
</body>
</html>

问题是,一旦我附加了按键侦听器,如果我按 Enter 键,它确实会触发我的函数回调,但它不会在文本中添加回车符。

如果我删除我的按键侦听器,它确实会恢复正常,即在按回车键时添加回车符。

似乎在附加按键侦听器时必须手动添加回车符?不知道该怎么做。

提前谢谢。

顺便说一句,我正在使用最新的 FabricJS 2.3.4

您可以重写onKeyDown,然后调用原始方法。

演示*

fabric.IText.prototype.onKeyDown = (function(onKeyDown) {
return function(e) {
if (e.keyCode == 13)
console.log('enter key');
onKeyDown.call(this, e);
}
})(fabric.IText.prototype.onKeyDown)
let canvas = new fabric.Canvas('canvas', {
preserveObjectStacking: true,
width: 980,
height: 600
});
let itext = new fabric.IText(
'Edit this text', {
editable: true,
left: 100,
top: 100,
fontSize: 24
}
);
canvas.add(itext);
canvas.requestRenderAll();
<html>
<body>
<canvas id="canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.3.4/fabric.js"></script>
</body>
</html>

最新更新