Добавление события click в новый API Zynga Canvas Scrolling - PullRequest
Новая
       14

Добавление события click в новый API Zynga Canvas Scrolling

1 голос
/ 01 октября 2011

В случае, если вы пропустили его в HN, Zynga open sourced разработал отличный API для создания листов / прокрутки для Canvas.

https://github.com/zynga/scroller

Как добавить событие щелчка в каждую ячейку для этого?Точный код не требуется, просто идея, с чего начать.Я еще не провел достаточно времени с Canvas, но я думаю, что это хорошее место для начала.

Я хочу получить ячейку, по которой щелкнули, и выполнить запрос внутри нее.как 

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

1 Ответ

1 голос
/ 02 октября 2011

Я не работал с этим раньше, но из тех нескольких минут, которые я провел с ней, я думаю, вам придется рассчитывать ячейку самостоятельно.

Если вы запустите демонстрации, которые у них есть (открытыекто-то здесь http://qwan.org/scroller/demo/), вы заметите, что версия холста отличается от опций на основе DOM. Опционы на основе DOM на самом деле используют элементы div, поэтому вы можете легко выбрать ячейку, используя классы и / илиИдентификаторы. Версия Canvas, похоже, использует один большой холст.

На их демонстрационной странице отображаются текущие значения прокрутки, которые влияют на горизонтальное и вертикальное смещение. Вы должны просто взять их и объединить сместоположение, которое пользователь щелкнул в родительском контейнере, а также ширина и высота каждой ячейки, чтобы определить, на какую ячейку щелкнули. Например: 

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);.

...