将点击事件添加到 Zynga 的新画布滚动 API



如果你错过了HN, Zynga为画布开放了一个很棒的平铺/滚动API。

https://github.com/zynga/scroller

我如何添加一个点击事件到每个单元格?不需要精确的代码,只需要知道从哪里开始。我还没有花足够的时间在Canvas上,但我认为这是一个很好的开始。

我希望能够得到单元格,点击和查询里面。像

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

我以前没有使用过这个,但是从我刚刚花了几分钟的时间来看,我认为你必须自己计算单元格。

如果您运行他们的演示(由某人在这里公开托管http://qwan.org/scroller/demo/),您会注意到画布版本与基于dom的选项不同。基于dom的选项实际上使用div元素,因此您可以使用类和/或id轻松挑选单元格。不过,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);

最新更新