将点击事件添加到Zynga的新Canvas Scrolling API

Question

如果你在HN上错过了它，Zynga为Canvas开源了一个很棒的平铺/滚动API。

https://github.com/zynga/scroller

如何为每个单元格添加点击事件？确切的代码不仅仅是从哪里开始的想法。我还没有花足够时间使用Canvas，但我认为这是一个很好的起点。

我希望能够获取单击并在其中查询的单元格。像

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