Multilayer canvas and click events (Createjs)
Question
I have an example using multilayer canvas.
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;
}
In the main canvas some objects are drawn (these need to be clickable ).
In animation canvas more objects are drawn. However this canvas (animation one) is above the main canvas, and it prevents being able to click on the objects in main canvas.
Can anybody help me understand why?
2 answers
solution1
2 2013-07-12 07:35:46
You'll try a property of css pointer-events .
#animation {
pointer-events: none;
}
solution2
0 ACCPTED 2013-07-12 21:06:50
This isn't possible without manually injecting some functionality. Unfortunately the pointer-events CSS property is not yet well supported, so its not really an option. The best way would be to capture click events (etc) on the top stage, and propagate them manually (call the Stage mouse handlers on the lower stage).
I think its a decent idea to try and handle this internally in EaselJS, and have surfaced it to the team.
The other thing to consider is why you are using multiple Stages. Its not really necessary, unless you have a ton of static content in one stage, and don't want to redraw it each tick. In this case, you could cache it, and then it would be one draw call per tick, which should have a minimal effect.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.