javascript - 如何将我的 clearText 默认单击事件更改为 fabric.js 中的按键事件？

Question

我正在关注下面的 js 小提琴。我完美地运行它。 https://jsfiddle.net/Jonah/sbtoukan/1/ 但是在上面的链接中，当我点击文本时，文本被清除。我只想在按删除键时清除文本。我尝试了几种方法。但没有什么对我有用。以下是仅允许我在单击文本后清除文本的确切代码。

var canvas = new fabric.Canvas('container');
var oText = new fabric.IText('Tap and Type', {
left: 0,
top: 0,
fontFamily: 'Bree Serif',
fontSize: 22,
cache: false
});
canvas.on("text:editing:entered", clearText);
function clearText(e) {
if (e.target.type === "i-text") {
if (e.target.text === "Tap and Type") {
  e.target.text = "";
  canvas.renderAll();
};
}
}
canvas.add(oText);

Answer 1

您需要为删除键添加事件处理程序。如果按下删除键，则只会清除文本。

您可以使用下面的代码片段。希望能帮助到你！

var canvas = new fabric.Canvas('container');

var oText = new fabric.IText('Tap and Type', {
  left: 0,
  top: 0,
  fontFamily: 'Bree Serif',
  fontSize: 22,
  cache: false
});

canvas.on("text:editing:entered", clearText);

function clearText(e) {
  if (e.target.type === "i-text") {
    if (e.target.text === "Tap and Type") {
    document.addEventListener("keypress", function(event) {
        if (event.keyCode == 46) {
           e.target.text = "";
        }
     })
      
      canvas.renderAll();
    };
  }
}

canvas.add(oText);

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"></script>

<canvas id="container" width="780" height="500"></canvas>