jQuery- 마우스를 영역 안으로 이동하고 종료하는 캔버스

Question

어떻게 코드합니까? 마우스가 캔버스의 미리 정의 된 영역에 들어가면 미리 정의 된 영역을 벗어날 때 이미지가 나타나고 이미 미리 정렬 된 영역을 벗어날 때 다시 사라집니다.

이것은 모두 jQuery를 사용합니다.

미리 감사드립니다.

Answer 1

jQuery는 캔버스 요소에서 호버/흐림을 추적하지만 캔버스 내부의 개별 그림에서는 추적하지 않습니다. HTML 캔버스에 그려진 이미지는 DOM 요소가 아닙니다. 대신 그들은 캔버스에 그린 픽셀을 잊어 버린 것과 같습니다.

이

는 캔버스 안에 이미지 무승부에 호버 효과를 적용 할 수있는 단계는 다음과 같습니다

1. ,

   자바 스크립트 객체 이미지의 정의 (x, y, 폭, 높이)를 추적

2. 캔버스에서 mousemove 이벤트를 수신

, 마우스가 이미지 안에있는 경우

3. 테스트,

4. 마우스가 원을 넣거나 나갈 때 이미지를 다시 그리거나 지 웁니다.

호버/흐림을보다 효율적으로 유지하려면 이전 이미지 상태 (표시 여부/비공개)를 추적하고 상태가 변경되지 않은 경우 아무 것도하지 않습니다.

여기서 예 코드 및 데모 같습니다

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 
var $canvas=$("#canvas"); 
 
var canvasOffset=$canvas.offset(); 
 
var offsetX=canvasOffset.left; 
 
var offsetY=canvasOffset.top; 
 
var scrollX=$canvas.scrollLeft(); 
 
var scrollY=$canvas.scrollTop(); 
 

 
var lastMouseWasIn; 
 
var currentMouseIsIn=false; 
 
var imgDef={x:30,y:30}; 
 

 
var img=new Image(); 
 
img.onload=start; 
 
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolSmall.png"; 
 
function start(){ 
 

 
    imgDef.width=img.width; 
 
    imgDef.height=img.height; 
 

 
    draw(); 
 

 
    $("#canvas").mousemove(function(e){handleMouseMove(e);}); 
 

 
} 
 

 
function draw(){ 
 
    if(lastMouseWasIn===currentMouseIsIn){return;} 
 
    ctx.clearRect(0,0,cw,ch); 
 
    if(currentMouseIsIn){ 
 
    ctx.drawImage(img,imgDef.x,imgDef.y); 
 
    } 
 
    ctx.strokeRect(imgDef.x,imgDef.y,imgDef.width,imgDef.height);  
 
} 
 

 
function handleMouseMove(e){ 
 
    e.preventDefault(); 
 
    e.stopPropagation(); 
 

 
    x=parseInt(e.clientX-offsetX); 
 
    y=parseInt(e.clientY-offsetY); 
 

 
    currentMouseIsIn = x>imgDef.x 
 
    && x<imgDef.x+imgDef.width 
 
    && y>imgDef.y 
 
    && y<imgDef.y+imgDef.height; 
 

 
    draw(); 
 

 
    lastMouseWasIn=currentMouseIsIn; 
 

 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Move mouse in and out of rectangle to show/hide image.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>