Zynga의 새로운 캔버스 스크롤링 API에 클릭 이벤트 추가

Question

HN에서 놓친 경우를 대비하여 Zynga는 Canvas 용 멋진 타일링/스크롤링 API를 제공했습니다.

https://github.com/zynga/scroller

가 어떻게이 각 셀에 클릭 이벤트를 추가 할 수 있습니다

? 정확한 코드는 어디에서 시작해야하는지에 대한 아이디어가 필요하지 않습니다. 아직 캔버스와 충분한 시간을 보냈지 만 시작하기에 좋은 장소라고 생각합니다.

내가 클릭 한 셀을 가져 와서 쿼리 할 수 ​​있기를 원합니다. like

context.click(function(e) { 
    alert(e.hasSpecificAttribute); 
}) 

Answer 1

나는이 작업을하지 못했지만 몇 분 후에 방금 셀을 계산해야한다고 생각한다.

데모를 실행하면 (여기에 누군가 http://qwan.org/scroller/demo/으로 공개적으로 호스팅 됨) 캔버스 버전이 DOM 기반 옵션과 다르다는 것을 알 수 있습니다. DOM 기반 옵션은 실제로 div 요소를 사용하므로 클래스 및/또는 ID를 사용하여 셀을 쉽게 선택할 수 있습니다. 캔버스 버전은 하나의 큰 캔버스를 사용하는 것으로 보입니다.

데모 페이지에는 가로 및 세로 간격 띄우기에 영향을주는 현재 스크롤 값이 표시됩니다. 당신은 그것을 잡아서 부모 컨테이너 내에서 클릭 한 위치뿐만 아니라 각 셀의 너비와 높이를 결합하여 클릭 한 셀을 결정할 수 있어야합니다. 예를 들면 다음과 같습니다.

var x_cell = Math.floor((scroll_x + click_x)/cell_width); 
var y_cell = Math.floor((scroll_y + click_y)/cell_height); 

그러나 실제로이 셀에서 캔버스의 픽셀을 쿼리 할 수는 없습니다. 이 API의 셀은 실제로 캔버스 구조의 일부가 아닌 추상적 개념으로 보입니다 (즉, 작은 캔버스 요소가 많지 않음). 따라서 셀 좌표를 사용하여 getImageData()을 사용할 수있는 캔버스 영역을 결정할 수 있습니다. 이것은 매우 간단하며 context.getImageData(x_cell * cell_width, y_cell * cell_height, cell_width, cell_height); 일 것입니다.