2012-05-12 3 views
2

캔버스 타일셋 이미지에있는 것과 같은 것입니다. http://i947.photobucket.com/albums/ad320/kev1030_photos/btiles2032.pngHTML5 캔버스 이미지 클리핑

어떻게 ... 경우 10 타일 복귀 (9)와, 내가 먼저 타일 반환 0 클릭하면 그런 짓을하고 ...

어떻게 HTML5 캔버스에 타일 세트 클립을?

+1

클리핑이 함께 할 수있어 한 무슨 일이? 캔버스에 좌표가 주어진 경우 "상자 번호"를 계산하는 방법을 알고 싶습니까? – Alnitak

+0

다음과 같은 작업을 수행해야합니다. http://www.youtube.com/watch?v=ayDycuPPd60 – kichu

+1

이 장소의 작동 방식이 아닙니다. _defined_, _bite size_ chunk로 문제를 줄이면 도움이 될 수 있습니다. 또한 사람들이 이미 시도한 것을 알리십시오. – Alnitak

답변

0

클립이 올바른 단어가 아닙니다. 클리핑은 이미지 또는 경로의 일부만 화면에 그릴 때입니다.

"히트 테스트", "개체 피킹"또는 "셀 감지"라고합니다.

이것은 간단한 수학입니다. 각 아이콘은 32 + 2 노란색, 그래서 당신이 찾아 할 수있는 세포 :

can.addEventListener('mousedown', function(e) { 
    var mouse = getMouse(e, can); 
    var x = Math.floor(mouse.x/34); 
    var y = Math.floor(mouse.y/34); 
    alert(x + (y*16)); // because there are 16 in a row 
}, false); 
다음

동작하는 예제입니다 :

http://jsfiddle.net/YH8b8/

+0

감사! 환상적! 정말 고마워! :) – kichu