如何將我的 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>