画布分层

Question

我目前正在使用Javascript，HTML5和CSS3开发类似于http://www.beoplay.com/Products/BeoplayA9#under-the-hood的项目。我设法创建滑块效果并将加号按钮添加到多层画布（4层：底部图像，顶部图像，文本显示和箭头滑块）。我的问题是将鼠标悬停在加号按钮上并显示文本图层。我需要访问底层才能访问加号。我怎么能做到这一点？我是Javascript和HTML5的新手。

HTML code：

<div id="container">
    <div id="arrow_container" ondrop="drop(event)" ondragover="allowDrop(event)">
        <div id="arrow_button" draggable="true" ondragstart="drag(event)"></div>
    </div>
    <span class="text_box"></span>
    <canvas id="top_canvas" onmouseover="displayInfo(event)"><img id="img_top" src="images/Technical_ONE_front.jpg" alt="device" /></canvas>
    <canvas id="plus_canvas"><img id="img_plus" src="images/Plus.png" alt="plus" /></canvas>
    <img id="img_bottom" src="images/Technical_ONE_back.jpg" alt="skeleton" />
</div>

Javascript初始化代码：

$("#arrow_button").css({"position":"relative", "top":"730px", "left":"497px"});
$("#top_canvas").css({"top":"5px"});

var canvas = document.getElementById( "top_canvas" );
var plus_canvas = document.getElementById( "plus_canvas" );
var ctx = canvas.getContext( "2d" );
var plus_ctx = plus_canvas.getContext( "2d" );
var top_img = document.getElementById( "img_top" );
var bottom_img = document.getElementById( "img_bottom" );
var plus_img = document.getElementById( "img_plus" );

canvas.width = plus_canvas.width = top_img.width;
canvas.height = plus_canvas.height = top_img.height;

ctx.fillStyle = "#FFFFFF";
plus_ctx.fillStyle = "#FFFFFF";
ctx.fillRect( canvas.width / 2, 0, canvas.width, canvas.height );
plus_ctx.fillRect( 0, 0, plus_canvas.width, plus_canvas.height );

ctx.beginPath();
ctx.moveTo(canvas.width / 2, 0);
ctx.lineTo(canvas.width / 2, canvas.height);
ctx.lineTo(canvas.width, canvas.height);
ctx.lineTo(canvas.width, 0);

plus_ctx.beginPath();
plus_ctx.moveTo(0, 0);
plus_ctx.lineTo(0, plus_canvas.height);
plus_ctx.lineTo(plus_canvas.width, plus_canvas.height);
plus_ctx.lineTo(plus_canvas.width, 0);

ctx.clip();
ctx.drawImage( top_img, 0, 0 );
plus_ctx.drawImage( bottom_img, 0, 0 );

for( var i = 0; i < 3; i++ ){
  if( i == 0 ){
      plus_ctx.drawImage( plus_img, 511, 344 );
  } else if( i == 1 ){
      plus_ctx.drawImage( plus_img, 360, 348 );
  } else if( i == 2 ){
      plus_ctx.drawImage( plus_img, 501, 621 );
  }
}

Javascript displayInfo code：

var highlight_one = new Image();
var highlight_two = new Image();
var highlight_sound = new Image();

highlight_one.src = "../images/Highlight_one_over.png";
highlight_two.src = "../images/Highlight_two_over.png";
highlight_sound.src = "../images/Highlight_sound_over.png";

init();
    if( e.clientX >= 511 && e.clientX <= 526 && e.clientY >= 344 && e.clientY <= 359 ){
        plus_ctx.drawImage( highlight_one, 0, 0 );
        html = "<p>Blah Blah Blah</p>";
    } else if( e.clientX >= 360 && e.clientX <= 375 && e.clientY >= 348 && e.clientY <= 363 ) {
        plus_ctx.drawImage( highlight_sound, 0, 0 );
        html = "<p>La Di Da</p>";
    } else if( e.clientX >= 501 && e.clientX <= 516 && e.clientY >= 621 && e.clientY <= 336 ) {
        plus_ctx.drawImage( highlight_two, 0, 0 );
        html = "<p>Lorem Ipsum</p>";
    }

    $('.text_box').html(html);

CSS代码：

* {margin:0}
#container{width:1024px; height:768px; position:relative}
#img_top, #top_canvas{position:absolute; z-index:3}
#img_plus, #plus_canvas{position:absolute; z-index:1}
#img_bottom, #img_top{width:1024px; height:768px}
.text_box{top:0; left:0; width:1024px; height:768px; padding:20px; position:absolute; z-index:2}
#arrow_container{position:absolute; width:1024px; height:768px; top:0; z-index:4}
#arrow_button{width:30px; height:30px; background-image:url("../images/arrows.png")}

图像尺寸固定为1024px×768像素。

Answer 1

您可以通过跟踪鼠标相对于整个页面的位置来实现这一目标：

var mouseX = 0;
var mouseY = 0;

$('body').mousemove(function(e) {
  mouseX = e.pageX;
  mouseY = e.pageY;
}

然后将其与按钮的位置进行比较，首先确定箭头的位置：

var whereIsMyArrow = $('#arrow').offset();

然后在鼠标位于箭头顶部时调整行为：

if ((mouseX>=whereIsMyArrow.left)&&<br>(mouseX<=(whereIsMyArrow.left+$('#arrow').width())&&
   (mouseY>=whereIsMyArrow.top)&&<br>(mouseY<=(whereIsMyArrow.top+$('#arrow').height())){
   //do something
}

确保条件在.mousemove（e）事件中。

Answer 2

在顶部添加透明图层并为其添加事件处理程序。