Fabric.js画布监听键盘事件?

2024-02-06

在我的结构应用程序中,我当前正在侦听某些按键(例如删除键),并删除任何选定的元素。我监听按键的方法是:

document.onkeydown = function(e) {
  if (46 === e.keyCode) {
  // 46 is Delete key
  // do stuff to delete selected elements
}

不过,我遇到了一个问题:我在页面上还有其他元素,例如文本框,并且在文本框中键入内容时,我不希望删除键删除任何元素。

In 这个问题 https://stackoverflow.com/questions/15631991/how-to-register-onkeydown-event-for-html5-canvas,描述了一种将事件侦听器附加到 HTML5 画布的方法:

canvas.tabIndex = 1000;

允许您使用canvas.addEventListener与键盘事件。

我可以在织物画布上使用类似的东西吗?

当我这样尝试时,

var CANVAS = new fabric.Canvas('elemID', {selection: false})
CANVAS.tabIndex = 1000;
CANVAS.addEventListener("keydown", myfunc, false);

我从 Chrome 中收到“未捕获的类型错误:未定义不是函数”。


这就是我最终所做的:我在 Fabric 使用的画布周围有一个包装器 div,并且我已将事件侦听器添加到该包装器中。

var canvasWrapper = document.getElementById('canvasWrap');
canvasWrapper.tabIndex = 1000;
canvasWrapper.addEventListener("keydown", myfunc, false);

This is working exactly like I want. The delete presses that happen inside a text box aren't picked up by the the listener.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Fabric.js画布监听键盘事件? 的相关文章

  • 将一个旋转对象包含在另一个旋转对象中 FabricJS

    我有两个对象 一个父对象 红色 和一个子对象 蓝色 父对象是固定的 不能移动 只有子对象是可移动的 并且子对象总是比父对象大 无论以何种方式移动子对象 它都应该始终包含在子对象内部 这意味着我们永远不应该看到红色矩形 Demo https
  • Fabricjs删除backgroundImage

    是否可以删除背景图像fabric Canvas设置后 canvas setBackgroundImage img url function canvas renderAll 或者只是回到标准背景 要设置backgroundColor to
  • 如何使用 Fabric.js 设置对比度和饱和度

    我想在图像编辑器中设置对比度 饱和度和色调 为此 我使用fabric js 但它只有亮度选项 这是我的 Fabric JS 代码 function fabric Object prototype transparentCorners fal
  • Fabric.js:如何填充徒手路径来绘制形状?

    在fabric js中 我们可以徒手绘制路径 例如http fabricjs com freedrawing http fabricjs com freedrawing 但是 在 HTML canvas 2d context ctx 中 我
  • Fabric.js 使用旋转手柄将旋转限制为 x 度

    我正在使用 Fabric js 并尝试使用旋转手柄允许画布上的任何对象旋转 不是自由 360 度 而是一次只能旋转 15 度 我非常努力地搜索 但到目前为止找不到答案 这可能吗 更短的解决方案 canvas on object rotati
  • 在 Javascript 中检测 MS Surface 虚拟键盘

    有没有办法通过 Javascript 检测 MS Surface 的虚拟键盘何时显示在网页中 虚拟键盘覆盖了页面上的活动文本字段 我需要能够检测到这一点 以便我可以重新布局页面以更好地使用剩余的窗口区域 None
  • 画布中的鼠标偏移 [fabric.js]

    我已经阅读了 3 5 个关于鼠标偏移的主题 但我仍然不明白哪里混乱了 就我而言 60 时一切正常 另外40 的鼠标是偏移的 有时对象位置与鼠标行为无关 IE 和 Chrome 是最混乱的 我尝试编辑样式表和父 div 但没有任何结果 最糟糕
  • 具有 CSS 类的 img 的 DataURL

    我必须应用一些样式 img 感谢 CSS 类 是否有可能获得dataURL of the img 与CSS样式 function Original const imgOriginal document getElementById orig
  • Fabric.JS 与 Node.JS - 导出为 PNG/JPEG

    所以我只是在玩 Fabric JS适用于 Node JS 不适用于 Web 我已经成功制作了一个静态画布 并在上面放置了一个矩形 出口的时间到了 这是我创建画布并添加矩形的代码 var canvas new fabric StaticCan
  • 在Fabric js中的两个对象之间添加动画

    我有一个非常基本的应用程序 可让您创建形状并用线连接它们 为此 您需要执行以下操作 Example 1 Click new animation 2 add rectangle 3 add child 4 add circle 您可以移动形状
  • 碰撞检测布料js

    我正在使用 Fabric js 我使用以下函数将图像放在画布上 当我单击画布时 图像会放置在该位置 我想知道是否有方法可以检查天气 那里已经存在某些东西我点击的位置 特别是如果有其他图像或没有 document getElementById
  • 重新调度键盘事件

    正在开发 Angular TypeScript 应用程序 其中我们有一个自定义的基本文本编辑器 尝试适当地处理用户突出显示的选择然后按下按键以替换该选择的情况 为了解决这个问题 我们需要在插入其预期内容之前正确删除他们选择的 隐藏 组件 我
  • Clojure 蛇跳过位置

    我是 Clojure 初学者 我一直在玩这里介绍的贪吃蛇游戏代码https github com stuarthalloway programming clojure blob master src examples snake clj h
  • Fabric.js 子类中的颜色正在更改为黑色。

    我正在尝试子类 Fabric Group 并将 JSON 字符串加载到其中 我遇到的问题是子类组中的 Fabric Rect 的颜色正在更改为黑色 当我直接在 Fabric Group 中执行此操作时 效果很好 我一直在玩 fromObje
  • 如何从 Canvas 对象中删除边框和角? [Fabric.js]

    我在一个项目中使用fabric js 用户可以在画布上绘图 然后保存到png图像 使用canvas toDataURL 函数 但是 我们注意到 如果用户移动对象并单击 保存 按钮 它会保存先前移动的对象的边框和角 当您移动或调整对象大小时
  • Fabric.js:如何将自定义尺寸设置为 Text 或 IText?

    我正在使用优秀的 Fabric js 在画布上绘制一些文本 当我为 IText 对象指定自定义大小 假设为 200x200 矩形 时 Farbric js 似乎强制对象的宽度和高度适合文本 var t new fabric IText He
  • 在 Fabric.js 中真正旋转等边三角形的中心

    使用 Fabric js 我无法真正围绕其中心点旋转三角形 或者至少我认为应该是中心点 我创建了一个jsFiddle http jsfiddle net UW8Be 这表明 三角形很简单 我用了originX center 原点Y 也是如此
  • 使用groupSVGElements后如何选择子元素

    我正在将 svg 加载到具有子元素的 Fabric 中 我使用 groupSVGElements 对它们进行分组 我需要能够选择每个子元素 这是一个 onclick 事件 允许我选择一个子对象 我把这个小提琴放在一起http jsfiddl
  • 如何在 mozilla 上获取 Fabric.js 画布鼠标坐标

    这是在 google chrome 上运行的代码 var pointer canvas getPointer event e var posiX pointer x var posiY pointer y posiX Math round
  • 即使 keypreview = true,按钮也会阻止 KeyDown 事件触发

    在 VS Express 12 中重现的步骤 创建一个新的 Windows 窗体应用程序项目 添加按钮 将 Form KeyPreview 设置为 true 向表单添加 keyDown 事件 只要按钮存在于表单上 事件就不会触发 我有一个项

随机推荐