Question

我正在开发一个包含HTML5 Canvas和KineticJS的项目。半透明覆盖（KineticJS组或层）遍布整个场景。问题是：未处理绑定到此叠加下的KineticJS对象的鼠标事件。

如何使此叠加层（或任何其他对象）对鼠标事件“透明”？

注意：问题只是关于Canvas，没有其他HTML元素干扰它。（为了明确下面的问题。）

Answer 1

假设您的意思是HTML元素放在画布上，请尝试查看指针事件：pointer events at MDN

e.g。

#foo {
    pointer-events:none;
}

Answer 2

是的，您可以点击顶部节点到底部节点，类似于指针事件：无

你只是告诉你的顶级对象不要听事件......就像这样：

myTopObject.setListening(false);

现在所有鼠标事件都会向下冒泡到底部对象。

请参阅此答案以获取代码和小提琴：pointer-events in Kineticjs

Answer 3

在图层级别设置不透明度也会将不透明度设置为对象级别。

layer.setOpacity(0.1);

“不会处理绑定到此叠加下的KineticJS对象的鼠标事件。”

嗯，虽然你的叠加层（图层）的不透明度为0，但处理绑定到对象的鼠标事件。这似乎工作正常，我不知道你在做什么。

“我怎样才能使这个叠加（或任何其他对象）对鼠标事件”透明“？” 对我来说，mouseover / mouseout在图层级别上工作正常，使其半透明。

  layer.on('mouseover', function() {
     this.setOpacity(0.5);
     this.draw();
  });

  layer.on('mouseout', function() {
     this.setOpacity(1);
     this.draw();
  });

您是否遗漏了layer.draw()？

使鼠标事件的对象“透明”？

3 个答案: