2012-12-01 3 views
4

저는 현재 http://www.beoplay.com/Products/BeoplayA9#under-the-hood과 비슷한 프로젝트 인 Javascript, HTML5 및 CSS3을 사용하고 있습니다. 저는 슬라이더 효과를 만들고 캔버스의 멀티 레이어 (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> 

자바 스크립트 초기화 코드 :

$("#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); 
    } 
} 

자바 스크립트 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")} 

이미지 크기가 1024x768 픽셀로 고정됩니다.

+0

캔버스 태그 바깥쪽에 이미지 태그를 놓고 jquery와 css를 사용하여 이미지 태그를 만들고 위치를 잡으십시오. 어쩌면 사람들이 당신이하려는 것을 얻을 수 있도록 약간의 질문을 명확히해야 할 것입니다. – cioddi

+0

예에서 더하기 단추를 굴릴 때 정보를 표시합니다. 모든 구성 요소를 4 개의 레이어로 분리했습니다. 가장 아래쪽 레이어는 배경 이미지와 더하기 버튼입니다. 나는이 예제에서 그 버튼들과 동일한 효과를 만들고 그 아래쪽에서 세 번째 레이어 인 텍스트 영역 레이어에 정보를 표시하려고합니다. 내 문제는 다른 레이어가 버튼 위에 겹치기 때문에 버튼에 액세스 할 수 없다는 것입니다. –

답변

0

당신은 전체 페이지에 대한 마우스의 위치를 ​​추적하여 그것을 얻을 수 있습니다

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) 이벤트 내부에 있는지 확인하십시오.

0

위에 투명 레이어를 추가하고 그 위에 이벤트 핸들러를 추가하십시오.

관련 문제