캔버스 이미지 및 클릭 이벤트

Question

현재 <canvas> 태그에 HTML5가 포함 된 두 개의 서클이 있습니다. & 자바 스크립트.

이제 마우스 오버 및 클릭을 기반으로 변경되는 이미지 (완료 됨)를 추가하려고합니다.

기본적으로 사용자가 버튼을 마우스로 가리키면 여분의 색상이 변경된 재생/일시 중지 버튼이 구현되었습니다.

window.onload = function() { 

     var canvas = document.getElementsByTagName('canvas')[0]; 
     var context = canvas.getContext('2d'); 
     var centerX = canvas.width/2; 
     var centerY = canvas.height/2; 


     //Outer circle 
     context.beginPath(); 
     context.arc(centerX, centerY, 150, 0, Math.PI * 2, false); 
     context.fillStyle = "#000"; 
     context.fill(); 
     context.stroke(); 

     //Inner cicle 
     context.beginPath(); 
     context.arc(centerX, centerY, 75, 0, Math.PI * 2, false); 
     context.fillStyle = "#fff"; 
     context.fill(); 
     context.stroke(); 

     //Play/Pause button 
     var imagePlay = new Image(); 
     var imageHeight = 48/2; 
     imagePlay.onload = function() { 
     context.drawImage(imagePlay, centerX - imageHeight, centerY - imageHeight); 
     }; 
     imagePlay.src = "images/play.gif"; 

} 

1) 형태의 이벤트를 처리하는 방법 :

내가 여기 ... 그들이 객체가 아니기 때문에 이벤트가 HTML5의 모양에 작동하는 방법을 알아낼 수없는 순간에 내 코드입니다 <canvas>으로 만들었습니까?

2) 다른 것으로 교체 할 때 <canvas>에서 이미지를 정리/제거하는 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

기술적으로 마우스 이벤트를 캔버스 그립 모양에 등록 할 방법이 없습니다. 그러나 Raphael (http://raphaeljs.com/)과 같은 라이브러리를 사용하면 모양 위치를 추적하여 마우스 이벤트를받는 모양을 파악할 수 있습니다. 여기에 예제가 있습니다 :

var circle = r.circle(50, 50, 40); 

circle.attr({fill: "red"}); 

circle.mouseover(function (event) { 
    this.attr({fill: "red"}); 
}); 

여러분도 알다시피이 방법은 매우 간단합니다. 도형을 수정하기 위해이 라이브러리도 유용 할 것입니다. 그것 없이는 변경을 할 때마다 모든 것을 다시 그리는 방법을 기억해야합니다.

Answer 2

음 간단한 대답은 없습니다. 클릭 이벤트의 좌표를 찾아 옵션을 수행할지 여부를 계산하거나 영역 및지도 태그를 사용하여 캔버스 요소를 오버레이 할 수 있습니다. 캔버스를 변경하려면 clearRect 함수를 사용하여 모든 것에 사각형을 페인트 한 다음 원하는 것을 다시 그립니다.

Answer 3

1. 캔버스에 그려진 모양을 추적하는 "기본 제공"방법이 없습니다. 객체로 취급되는 것이 아니라 영역의 픽셀로 취급됩니다. 캔바스에 그려진 도형에 대한 이벤트를 처리하려면 각 도형이 커버하는 영역을 추적 한 다음 마우스 위치에 따라 이벤트를 트리거하는 도형을 결정해야합니다.

2. 무언가로 바꾸려면 다른 모양을 그릴 수 있습니다. globalCompositeOperation을 살펴볼 수도 있습니다.

드로잉을 개체로 처리하려면 캔버스 대신 SVG을 사용하는 것이 좋습니다.

또 다른 옵션은 buttons을 사용하고 CSS를 사용하여 스타일을 지정하는 것입니다.

기본적으로 지금하고있는 일은 실제로 의도 한 용도 나 캔버스의 용도가 아닙니다. 연필을 사용하여 못을 망치는 것과 같습니다. 작업에 잘못된 도구를 사용하고 있습니다.

Answer 4

캔버스에 그려진 개체에 대한 클릭 이벤트를 만들 수 없다는 것이 사실이지만 해결 방법이 있습니다. 캔버스를 DIV 태그로 감싸고 CANVAS 태그 위의 DIV 태그 내에 이미지를 추가하십시오.절대 왼쪽을 사용합니다 :

<div id="wrapper"> 
    <img src="img1.jpg" id="img1"></img> 
    <canvas id="thecanvas"></canvas> 
</div> 

그런 다음 이미지 위치를 만들기 위해 CSS를 사용 * 픽셀과 상단 : * PX는 일반적으로 그린 ​​것입니다 캔버스 위에 이미지를 배치하는 속성.

#img1{ 
position:absolute; 
left: 10px; 
top: 10px; 
} 

그런 다음 캔버스를 클릭하는 인상을주는 캔버스 위에 배치되는 이미지에 이벤트를 클릭하여 추가 할 수는 (아래 예제는 jQuery를 클릭()를 사용하여 기능)

$("#img1").click(function(){ 
    alert("Thanks for clicking me"); 
}); 

Answer 5

광선을 캔버스에 넣고 광선과의 교차점을 위해 이미지를 수동으로 테스트 할 수 있습니다. 누르는 것처럼보아야하고 화면에 광선을 보내야합니다.

objectsUnderPoint(x, y); 

x, y에서 광선과 교차하는 모든 이미지의 배열을 반환하는 함수를 작성해야합니다.

이것이 유일한 진정한 대답이며, 이것이 3D 엔진에서도 일반적으로 수행되는 방식입니다.