Как я могу представить ключевое событие на моем холсте fabri c. 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 в моем fabri c canvas. Пожалуйста, помогите.

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>

Проблема с событиями нажатия клавиш заключается в том, что иногда фокус находится не на том месте, где вы думаете, если в этом случае фреймы особенно сложны, в этом примере убедитесь, что вы нажимаете на холсте, прежде чем пытаться удалить ключ.