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

Question

我遵循下面的js小提琴。我运行得很完美。https://jsfiddle.net/Jonah/sbtoukan/1/，但在上面的链接中，当我单击文本时，文本将被清除。我只想在按下delete键时清除文本。我尝试了几种方法。但对我来说都不管用。下面是确切的代码，它只允许我在单击文本后清除文本。

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

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

您可以使用下面的代码片段。希望它能帮上忙！

​

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>

​