帆布分層

Question

我目前正在使用Javascript，HTML5和CSS3處理類似於http://www.beoplay.com/Products/BeoplayA9#under-the-hood的項目。我設法創建滑塊效果並將加號按鈕添加到多層畫布（4層：底層圖像，頂層圖像，文本顯示和箭頭滑塊）。我的問題是鼠標懸停在加號按鈕上並顯示文字圖層。我需要訪問底層才能訪問加號。我怎樣才能做到這一點？我在Javascript和HTML5方面全新。

HTML代碼：

<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：

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

在頂部添加一個透明圖層併爲其添加事件處理程序。