所以,我通过使用PouchDB和MapRepduce在HTML5画布中搜索持久图形对象有点创意。(我试图用简单的边界框逻辑判断用户是否点击了该对象)这部分并不是那么重要;这可能很愚蠢,但我只是想这样做,因为我就是这样的笨蛋。
也就是说,我想将一对自定义值传递给我的 PouchDB 查询的化简器函数。我不确定该怎么做,确切地说。
这是我现在正在做的事情:
var x = evt.clientX, y = evt.clientY
var map = function (doc) {
emit('bbox',
{
x0: doc.x,
x1: doc.x + doc.w,
y0: doc.y,
y1: doc.y + doc.h
}
)
}
var reduce = function (keys, values, rereduce) {
return values.forEach(function (bbox) {
if (x >= bbox.x0 && x < bbox.x1 && y >= bbox.y0 && y < bbox.y1) {
return true
}
})
}
var result = db.px.query({map: map, reduce: reduce}, function (err, rsp) {
cb(rsp)
})
它现在不起作用,因为reduce函数无法访问x和y值,因为由于某种原因,它们无法从运行函数的作用域访问。所以,我认为我需要通过该查询方法将它们传递给袋子/沙发。我有点被困在这里。
拥有一个"createReduce"函数使 x 和 y 参数更易于访问,这难道不应该足够吗?
var createReduce = function(x,y) { return function(keys, values, rereduce) {...} }
似乎我正在尝试做不可能的事情,我真的不需要这个特定应用程序的持久性。此外,更复杂的面向图形的空间查询将需要更专业的数据持久性和操作框架。我将来会做这样的事情。
也就是说,这里有一些有用的基于过滤器的bbox代码,可以帮助任何勇敢的编码人员,他们将来可能会走上我自己的道路。
var db = {
// 2d, canvas-related data store and methods
px: {
store: [],
add: function (obj) {
db.px.store.push(obj)
},
pick: function (x, y) {
return db.px.store.filter(function (obj) {
return x >= obj.x
&& x < obj.x + obj.w * gfx.px.ratio
&& y >= obj.y
&& y < obj.y + obj.h * gfx.px.ratio
})
}
}
}
这适用于格式化如下的图形对象:
{
x: 0, y: 0, w: 0, h: 0
}
我希望这对任何试图在未来做我正在做的事情的人都有帮助。
此外,gfx.px.ratio变量用于hi-DPI(视网膜)显示器兼容性。