我如何在我的 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("mouse:over", 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);

在上面的代碼中，我正在實現與鼠標相關的事件，例如我正在實現mouse:over 。 當我將鼠標懸停在文本上時，我成功地實現了明文功能。

但是我希望當我按下某個鍵時它應該清除文本。

我查看了此鏈接：- https://github.com/fabricjs/fabric.js/wiki/Working-with-events添加mouse:over功能，但我不知道如何在我的結構畫布中添加 keydown 事件。 請幫忙。

Answer 1

畫布上沒有按鍵事件，因此我們必須在文檔上設置它們並在鼠標懸停時抓取所選對象並在鼠標移出事件上重置。

 var canvas = new fabric.Canvas('container'); var oText = new fabric.IText('Tap and Type', {left: 0, top: 0}); canvas.add(oText); var circle = new fabric.Circle({left: 20, top: 90, radius: 25}); canvas.add(circle); var objSelected = null canvas.on("mouse:over", function(e) { if (e.target) { e.target.set('fill', 'green'); canvas.renderAll(); objSelected = e.target } }); canvas.on('mouse:out', function(e) { if (e.target) { e.target.set('fill', 'black'); canvas.renderAll(); } objSelected = null }); document.onkeydown = function(e) { if (objSelected) { switch (e.keyCode) { case 46: // delete if (objSelected.type === "i-text") { objSelected.text = "" } } canvas.renderAll(); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.1/fabric.min.js"> </script> <canvas id="container" width="300" height="150"></canvas>

按鍵事件的問題在於，有時焦點不在您認為的地方，iframe 在這方面特別棘手，在此示例中，請確保在嘗試刪除鍵之前單擊畫布。