如何在 FabricJS 中为 IText 对象添加按键监听器？
Posted
技术标签:
【中文标题】如何在 FabricJS 中为 IText 对象添加按键监听器？【英文标题】：How to add key press listener for IText objects in FabricJS? 【发布时间】：2019-01-17 14:38:51 【问题描述】：我目前有这个代码
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>问题是，一旦我附加了按键监听器，如果我按下回车键，它会触发我的函数回调，但不会在文本中添加回车符。
如果我删除我的按键监听器，它会恢复正常，即在输入按键时添加回车符。
似乎我在附加按键监听器时必须手动添加回车？不知道该怎么做。
提前致谢。
顺便说一句，我正在使用最新的 FabricJS 2.3.4
【问题讨论】：
为什么要改变？ @Durga 我想在每次他们在 IText 对象上按回车键时触发或执行一个动作，当然是在编辑模式下，但之后仍然继续添加回车符。希望能回答你的问题。 【参考方案1】：您可以覆盖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>【讨论】：
以上是关于如何在 FabricJS 中为 IText 对象添加按键监听器？的主要内容，如果未能解决你的问题，请参考以下文章
如何为 IText Fabricjs 中的每个项目设置绝对位置
编辑文本 Fabricjs - IText 格式字母和同时选择 textDecoration