我正在关注以下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
。当我将鼠标悬停在文本上时,我就成功实现了cleartext函数。
但是我希望当我按一些键时它应该清除文本。
我查看了以下链接:-https : //github.com/fabricjs/fabric.js/wiki/Working-with-events以添加mouse:over
功能,但是我没有得到如何在我的结构画布中添加keydown事件的信息。请帮忙。
画布上没有按键事件,因此我们必须将它们设置在文档上,然后将鼠标悬停在所选对象上,然后在鼠标移出事件上重置。
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尤其棘手,在此示例中,请确保在尝试删除键之前单击画布。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句