DOM Image onclick 이벤트가 작동하지 못했습니다.자바 스크립트 캔버스 이미지 onclick가 작동하지 않음
var context = document.getElementById('canvas').getContext('2d');
var image = new Image();
image.src = "foo.png"
image.onclick = function(e) { console.log("clicked"); }
setInterval(function() {
context.drawImage(image, 100, 100, 50, 50);
};
이미지를 클릭 할 때 로그 메시지가 표시되지 않는 이유는 무엇입니까? 개발자 도구에서 나는 onclick 함수가 이미지에 대해 null이 아님을 볼 수 있습니다.
예, 무사가 말한 것과 다른 몇 가지. 코드
일부 변경
이 시도 볼 수까지 필요하지 않습니다
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var context=document.getElementById("canvas").getContext("2d");
var image=new Image();
image.onload=function(){
context.drawImage(image,0,0);
}
image.src="http://i.imgur.com/nJiIJIJ.png";
document.getElementById("canvas").addEventListener("click", function(){console.log("clicked");}, false);
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
canvas에 추가 된 특정 이미지에 대해 onclick을 설정할 수 없습니다. 캔버스 전체에 대해 onclick을 설정할 수 있으므로 제 3 자 js를 사용해야합니다. 그렇지 않으면 캔버스의 이미지를 클릭 한 계산을해야합니다.
이것이 정확하다고 생각하지 않습니다. 틀렸을 수도 있습니다. 답변을 뒷받침하는 링크가 있습니까? –
http://stackoverflow.com/questions/11172087/canvas-images-and-click-event ..이 부분을 보시려면 –
이것이 최선의 해결책이라고 생각합니다. 위의 예제는 캔버스의 애니메이션을 렌더링하고 이미지를 버튼으로 사용하기 때문에 그 방법으로 설정되었습니다. 캔버스 클릭 기능을 사용하여 이미지의 경계를 클릭했는지 확인해야하는 것이 더러운 일이라고 생각합니다. – user2155429
다른 사용자가 맞습니다.
캔버스에 그린 이미지는 DOM 요소이지만 DOM에 저장되지 않은 위치에 렌더링됩니다.
그렇다고해서 위치에 액세스하여 마우스 위치와 비교할 수있는 것은 아닙니다.
여기 외부 라이브러리를 사용하고 있습니다,하지만 당신이 필요하지 : http://jsfiddle.net/Saturnix/cygUH/
this이 사용하는 라이브러리입니다.
코드를 게시하지 않고 jsfiddles에 대한 링크를 게시 할 수 없으므로 여기에 제가 작성한 스크립트가 있습니다.
function demo(g) {
g.ctx.font = "bold 16px Arial";
g.draw = function() {
g.ctx.clearRect(0, 0, g.width, g.height)
var posX = 0;
var posY = 0;
g.ctx.drawImage(image, posX, posY);
if (g.mouseX > posX && g.mouseX < image.width &&
g.mouseY > posY && g.mouseY < image.height &&
g.mousePressed)
g.ctx.fillText("You're clicking the image!", g.mouseX, g.mouseY);
}
}
당신은 캔버스에 (캔버스에 온 클릭으로) 광선을 캐스팅하고 수동으로 레이 교차로에 대한 이미지를 테스트 할 수 있습니다.
objectsUnderPoint(x, y);
x, y에서 광선과 교차하는 모든 이미지의 배열을 반환하는 함수를 작성해야합니다.
이것은 일반적으로 3D 엔진에서도 수행됩니다. 교차점 테스트를 위해 이미지 위치를 이미지의 속성으로 유지해야합니다.
이미지를 정확히 클릭 한 상태에서 문서에 추가하지 않았습니다. – Musa