小编jca*_*lly的帖子

我已经构建了一个画布库,用于管理某些工作项目的形状场景.每个形状都是一个具有与之关联的绘图方法的对象.在刷新画布期间,绘制堆栈上的每个形状.形状可能具有典型的鼠标事件绑定,这些事件都围绕画布自己的DOM鼠标事件.

我发现了一些野外技术,用于检测各个形状上的鼠标悬停,每种技术都有效,但有一些相当严重的警告.

1. 清除的鬼画布用于绘制单独的形状.然后我存储了鬼画布的副本getImageData().可以想象,当有许多点绑定鼠标事件时,这会占用大量内存(960x800画布上的100个可点击形状在内存中约为300MB).

2. 为了回避内存问题,我开始遍历像素数据并仅将地址存储到具有非零alpha的像素.这对于减少内存效果很好,但却大大增加了CPU负载.我只迭代每个第四个索引(RGBA),并且任何具有非零alpha的像素地址都存储为哈希键,以便在鼠标移动期间进行快速查找.它仍然会使Linux上的移动浏览器和Firefox超载10秒以上.

3. 我读到了一种技术,其中所有形状将被绘制到一个鬼画布上,使用颜色来区分每个像素拥有的形状.我对这个想法非常满意,因为它理论上应该可以区分数百万个形状.

   不幸的是,这被抗锯齿打破了,在大多数画布实现上都无法禁用.每个模糊边缘都会创建数十种颜色,这些颜色可以被安全地忽略,除了它们/它们可以混合/重叠形状边缘.当有人在形状边界上穿过鼠标时,我想要发生的最后一件事就是为与AA混合中出现的颜色相关的不相关形状发射半随机鼠标悬停事件.

我知道这对于视频游戏开发者来说不是一个新问题,必须有快速算法来处理这类事情.如果有人知道一种算法可以解决(逼真地)数百种形状而不占用CPU超过几秒钟或大幅浪费RAM消耗,我将非常感激.

有关鼠标悬停检测的另外两个Stack Overflow主题,这两个主题都讨论了这个主题,但它们只是我描述的3种方法. 检测HTML画布中某些点的鼠标悬停？和 鼠标悬停圈HTML5画布.

编辑:2011/10/21

我测试了另一种更动态且不需要存储任何东西的方法,但它被Firefox中的性能问题所摧毁.该方法基本上是循环形状和:1)在鼠标下清除1x1像素,2)绘制形状,3)在鼠标下获得1x1像素.令人惊讶的是,这在Chrome和IE中非常有效,但在Firefox下却很糟糕.

显然,如果您只想要一个小的像素区域,Chrome和IE就能够进行优化,但Firefox似乎根本不会根据所需的像素区域进行优化.也许在内部它获得整个画布,然后返回你的像素区域.

代码和原始输出:http://pastebin.com/aW3xr2eB.

我有一个MongoDB集合,其文档使用几个级别的嵌套,我想从中提取从其字段的子集编译的多维数组.我现在有一个适合我的解决方案,但我想更好地理解"幂等"的概念及其与减少功能相关的后果.

{
  "host_name" : "gateway",
  "service_description" : "PING",
  "last_update" : 1305777787,
  "performance_object" : [
    [ "rta", 0.105, "ms", 100, 500, 0 ],
    [ "pl", 0, "%", 20, 60, 0 ]
  ]
}

这是map/reduce函数

var M = function() {
  var hn = this.host_name, 
      sv = this.service_description, 
      ts = this.last_update;
  this.performance_object.forEach(function(P){
    emit( { 
      host: hn, 
      service: sv, 
      metric: P[0] 
    }, { 
      time: ts, 
      value: P[1] 
    } );
  });
}
var R = function(key,values) {
  var result = { 
    time: [], 
    value: [] …