0

我有一个使用多层画布的例子。

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;
}

在主画布中绘制了一些对象（这些对象必须是可点击的）。

在动画画布中绘制了更多对象。然而，这个画布（动画之一）在主画布之上，它阻止了点击主画布中的对象。

谁能帮我理解为什么？

4

2 回答 2

2

您将尝试 css pointer-events的属性。

#animation {
    pointer-events: none;
}
于 2013-07-12T07:35:46.913 回答
0

如果不手动注入某些功能，这是不可能的。不幸的是，pointer-events CSS 属性还没有得到很好的支持，所以它不是一个真正的选择。最好的方法是在顶层捕获点击事件（等），然后手动传播它们（在底层调用 Stage 鼠标处理程序）。

我认为尝试在 EaselJS 内部处理这个问题，并将其呈现给团队是一个不错的想法。

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

于 2013-07-12T21:06:50.007 回答