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

【问题标题】：How to add key press listener for IText objects in FabricJS?如何在 FabricJS 中为 IText 对象添加按键监听器？
【发布时间】：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 对象上按回车键时触发或执行一个动作，当然是在编辑模式下，但之后仍然继续添加回车符。希望能回答你的问题。

标签： fabricjs fabricjs2

【解决方案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>

【讨论】：