我如何在我的fabric.js画布中引入基于键的事件?

Hirazzz

我正在关注以下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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

我如何在Hyperledger Fabric中获得唯一的ID

来自分类Dev

如何在Fabric -Gateway -Java中设置DISCOVERY_AS_LOCALHOST?我设置了环境变量,但是它不起作用

来自分类Dev

我如何使用 if isType() 为画布上的每个对象使用fabric js?

来自分类Dev

我应该如何在Spring Integration中构建我的消息?

来自分类Dev

我如何在R中阅读我的Google位置记录

来自分类Dev

我如何在mongodb中设置自我加入

来自分类Dev

我如何在Java中停止我的服务器

来自分类Dev

我应该如何在Rails中实现我的Ruby代码?

来自分类Dev

如何在我的报告中显示我的组合框值

来自分类Dev

如何在我的部分中访问我的实例变量

来自分类Dev

我如何在 kivy 中不断更新我的标签?

来自分类Dev

我如何在我的 RecyclerView 中烘烤选中的框的数量?

来自分类Dev

我如何在 Alamofire 中检查我的请求已发送?

来自分类Dev

如何在fabric.js的画布上触发自定义事件?

来自分类Dev

如何在枚举中匹配自我?

来自分类Dev

我如何在CasperJS中要求MongoDB?

来自分类Dev

我如何在cmder中运行msysgit?

来自分类Dev

如何在定义中引用自我?

来自分类Dev

我如何在Spring中创建ServletContext

来自分类Dev

我如何在php中定义委托

来自分类Dev

我如何在C中嵌入python?

来自分类Dev

我如何在Android中阅读短信?

来自分类Dev

我如何在爬行中攻击敌人

来自分类Dev

我应该如何在mysql中查询

来自分类Dev

我如何在Android中停止线程

来自分类Dev

我如何在Highcharts中循环数据

来自分类Dev

如何在我的网页中嵌入CodePen?

来自分类Dev

我如何在Phinx中获取DataBaseName?

来自分类Dev

我如何在R中删除\

Related 相关文章

热门标签

归档