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

メイン キャンバスでは、いくつかのオブジェクトが描画されます (これらはクリック可能である必要があります)。

アニメーション キャンバスでは、より多くのオブジェクトが描画されます。ただし、このキャンバス (アニメーション 1) はメイン キャンバスの上にあり、メイン キャンバス内のオブジェクトをクリックすることができません。

誰かが理由を理解するのを手伝ってくれますか?

4

2 に答える 2

2

css pointer-eventsのプロパティを試します。

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

これは、何らかの機能を手動で注入しないと不可能です。残念ながら、pointer-events CSS プロパティはまだ十分にサポートされていないため、実際にはオプションではありません。一番上のステージでクリック イベント (など) をキャプチャし、それらを手動で伝達するのが最善の方法です (下のステージでステージ マウス ハンドラーを呼び出します)。

これを EaselJS の内部で試して処理し、チームに公開するのは適切なアイデアだと思います。

考慮すべきもう 1 つのことは、複数のステージを使用する理由です。1つのステージに大量の静的コンテンツがあり、ティックごとに再描画したくない場合を除き、実際には必要ありません。この場合、それをキャッシュすると、ティックごとに 1 つの描画呼び出しになり、影響は最小限に抑えられます。

于 2013-07-12T21:06:50.007 に答える