我如何在 fabric.js canvas 中引入基于键的事件？

Question

我正在关注下面的js fiddle。 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。当我将鼠标悬停在文本上时，我就成功地实现了明文功能。

但我希望当我按下某个键时它应该清除文本。

我查看了此 link:- https://github.com/fabricjs/fabric.js/wiki/Working-with-events 以添加 mouse:over 功能，但我不知道如何在我的结构 canvas 中添加按键事件。请帮忙。

Answer 1

canvas 上没有按键事件，因此我们必须在文档上设置它们并在鼠标悬停时抓取选定对象并在鼠标移开事件时重置。

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 在这方面特别棘手，在此示例中，请确保在尝试删除键之前单击 canvas .

我如何在 fabric.js canvas 中引入基于键的事件？

How i can introduce key based event in my fabric.js canvas?

canvas

fabricjs

dom-events

keydown

cleartext