HTML5 캔버스, drawImage 후 이미지의 특정 영역을 클릭하는 방법?

저는 HTML5 캔버스와 라이브러리 canvasengine으로 2D 등각 투영 맵을 만들고 있습니다. 이 이미지는 정사각형 enter image description here HTML5 캔버스, drawImage 후 이미지의 특정 영역을 클릭하는 방법?

그래서, 난 타일을 가지고있다.

내가 몇 가지 옵션이 내 칸바에이 이미지를 그릴 : 그 후

_tile.drawImage(tileset.name, x, y, this.tile_w, this.tile_h, posx, posy, this.tile_w, this.tile_h);

을, 나는이 _tile에 있지만 녹색 부분에 이벤트 onclick을 추가해야합니다

_tile.on("click", function(e) { 
    this.opacity = this.opacity < 1 ? 1 : 0.5 ; 
});

이 기능으로 모든 사진, 흰색 부분을 클릭 할 수 있습니다. 나는지도를 생성하기 위해 타일을 쌓아했다, 그래서 이미지의 가장자리를 클릭하면, 그것은 _tile.drawImage() 후, 내가 좋아하는 뭔가를 할 필요가 다음 타일 ...

를 선택 :

_tile_diamond.onclick

아이디어가 있으십니까? 감사 !

출처

2013-05-07 Clément Andraud

모든이 작업을 수행 간단 하나가 될하려는 경우 클릭 ..이

사용 kinetic.js 복잡하다. com/questions/6735470/get-pixel-color-from-canvas-on-mouseover. 게임의 다른 부분에는 초록색을 사용하지 않아야합니다. (또는 주위의 8 픽셀을 확인할 수도 있습니다) – Cristy

특정 이미지가 아닌 전체 캔버스에 대해 onClick 이벤트를 바인딩 할 수 있습니다. 따라서 이미지만으로 onClick을 원할 경우 시작 및 종료 좌표를 변수에 저장하고 마우스 좌표를 확인해야합니다. HTTP : // 유래 당신이 당신은 클릭 한 픽셀의 색상을 얻을 수 있습니다 캔버스

출처

2013-05-07 09:27:24

HTML5 캔버스, drawImage 후 이미지의 특정 영역을 클릭하는 방법?

답변

관련 문제