【问题标题】:With two overlapping canvases, can I pass mouse events to the bottom one?使用两个重叠的画布,我可以将鼠标事件传递到底部吗?
【发布时间】:2015-05-20 23:32:14
【问题描述】:

我正在尝试通过fabric.js 绘制一些指导线,例如online editor app on printio.ru

到目前为止,我在一页中放置了 2 个相同大小的画布,顶部是一个静态工作画布,用于绘制一些引导线,底部画布将包含一些交互对象。这似乎是他们在上面链接页面中的操作方式。

但是,我无法在底部画布上使用这些对象,因为顶部画布会中断鼠标事件。有没有办法让鼠标事件传递到底部画布?我正在考虑顶部画布上的 canvas.mouseenabled=false 之类的东西 - 这可能吗?

我想到了另一种解决方案:将引导线和其他对象放在一个画布上。我不喜欢那个解决方案,因为它在底部画布上添加了我不想要的东西,在这种情况下,我必须添加一些线条实例而不是仅仅通过 context2d 绘制线条,我认为这会给我带来低性能

【问题讨论】:

  • 欢迎来到堆栈溢出!您的问题排在我面前,以帮助提高其可读性,从而帮助它获得更多答案。我重新措辞了一下 - 包括添加一个我认为你想要复制的应用程序的链接。您可以检查编辑并确保它仍然询问您想要什么吗?之前还不是很清楚。我还用 ` 字符来格式化代码。最后将标题编辑得更具体,希望能吸引更多该领域的专家。祝你好运!

标签: javascript html canvas fabricjs


【解决方案1】:

应用 css 属性 pointer-events:none 到上层元素,鼠标事件可以通过。 https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

它将适用于现代浏览器。 http://caniuse.com/#feat=pointer-events

【讨论】:

    猜你喜欢
    • 2023-04-07
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-10-15
    • 1970-01-01
    相关资源
    最近更新 更多