多层画布和点击事件（Createjs）

HTML：

<body> 
    <div id="background"> 
     <div id="canvas"> 
      <canvas id="main" width="1024" height="768"></canvas> 
      <canvas id="animation" width="1024" height="768"></canvas>    
     </div> 
    </div> 
</body>

CSS：

body{ 
    margin: 0 auto; 
} 

#background { 
    width: 1600px; 
    height: 768px; 
    margin: 0 auto; 
    background: url(../Images/bg2.jpg) no-repeat; 
    position: relative; 
} 

#canvas { 
    width: 1024px; 
    height: 768px; 
    margin: 0 auto; 
} 
canvas{ 
    background: transparent; 
    position:absolute; 
} 

#main { 
    background: url(../Images/bg_ban.png) no-repeat; 
}

在主画布某些对象绘制（这些都需要点击）。

在动画画布中绘制更多的对象。然而，这个画布（动画一个）位于主画布上方，并且它阻止能够点击主画布中的对象。

任何人都可以帮我理解为什么吗？

来源

2013-07-12 PhuongTT

这是不可能的，没有手动注入某些功能。不幸的是，指针事件的CSS属性还没有很好的支持，所以它不是一个真正的选择。最好的方法是捕捉顶级舞台上的点击事件（等），并手动传播它们（在下层调用舞台处理程序）。

我认为这是一个体面的想法，试图在EaselJS内部处理这个问题，并且已经向团队展示了它。

要考虑的另一件事是为什么你使用多个阶段。它并不是真的有必要，除非你在一个阶段有大量的静态内容，并且不想每次都重绘它。在这种情况下，你可以缓存它，然后它将是每个滴答作出一个绘制调用，这应该有一个最小的影响。

来源

2013-07-12 21:06:50 Lanny

哦，Lanny，我曾经使用KineticJS框架，我发现它已经支持多层画布。由于某种原因，我想学习CreateJS。我想在移动应用程序中，当我调用stage.update（）时，我不想更新所有对象。当我切换到CreateJS时，我不知道为什么createJS没有多层。 – PhuongTT

它只是不是已经实施的东西。由于GPU加速浏览器的普及，减少了多个画布的好处，所以它的问题比几年前还要少。我们绝对可以考虑增加某种支持。 – Lanny

你会尝试css pointer-events的财产。

#animation { 
    pointer-events: none; 
}

来源

2013-07-12 07:35:46 user2417329

我试过了，但它似乎不起作用 – PhuongTT

我想处理所有事件在2层中的所有对象上触发？我如何？ – PhuongTT

如何为canvas元素创建父div并向其添加侦听器？ – user2417329

多层画布和点击事件（Createjs）

回答

相关问题