1

我正在关注下面的 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 事件。请帮忙。

4

1 回答 1

0

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

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 对此特别棘手，在此示例中，请确保在尝试删除键之前单击画布。

于 2020-02-01T13:51:31.587 回答