Backbone.js中的自定义事件调度

myss37ts  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(198)

我想写一个简单的JavaScript动画,让一些球在画布中移动。我想用Backbone.js处理的自定义事件来检测碰撞,而不是用嵌套的 for 循环来检查每对球之间的碰撞。

var j;
for (j = 0; j < N_BALLS; j++) {
    ball_center = new Point(..., ...);
    ball_shape = new Circle(ball_center, ball_radius);
    ball_velocity = ...;
    ball_ID = j;
    balls[j] = new Ball(ball_shape, ball_velocity, ball_ID);
    _.extend(balls[j], Backbone.Events);
    balls[j].on("imhere", balls[j].event_handler);
}

function animate() {
    if (!paused) {
        context.clearRect(0, 0, canvas.width, canvas.height);
        var j;
        for (j = 0; j < N_BALLS; j++){
            balls[j].updatePosition();
            balls[j].trigger("imhere", balls[j].shape, balls[j].ID);
        }
        for (j = 0; j < N_BALLS; j++)
           balls[j].draw(context, '#0000ff');
        window.requestNextAnimationFrame(animate);
    }
}

event_handler是每个Ball对象的成员方法

Ball.prototype.event_handler = function(shape, ID) {
    console.log("ball " + this.ID + " caught message from ball " + ID);
};

我会期望有时一个球会从另一个球那里捕捉到一个信息,但事实从来不是这样的。
我希望以这样一种方式安排事件处理程序:

  • this.ID == ID时转发事件
  • 如果this.ID != ID,则停止事件传播
jv2fixgn

jv2fixgn1#

Backbone.js 事件

this.ID可能是undefined,因为Backbone .on() needs the context as the last param,除非您已经手动将上下文绑定到其他位置的函数。
您还可以在球本身上注册事件,并在球上触发事件。
事件在Backbone中不是全局的,您需要自己创建一个全局事件通道或使用插件。请查找 * 事件总线 * 或 * 事件聚合器 * 等。
举个简单的例子:

var GlobalEvents = _.extend({}, Backbone.Events);

Backbone本身是一个扩展Backbone.Events功能的对象,但是最好为您的用例创建一个本地事件通道。
说到使用Backbone.Events对象,您扩展了Ball的每个示例,而实际上应该扩展一次Ball原型。

_.extend(Ball.prototype, Backbone.Events);

你应该去

在销毁一个球的时候,你可以调用ball.stopListening(),这样你就可以避免内存泄漏,同时也可以在event_handler回调函数中解决context问题。
因此,使用全局事件聚合器:

balls[j].listenTo(GlobalEvents, "imhere", balls[j].event_handler);

Backbone事件不是DOM事件,它们不会上下冒泡,所以没有stopPropagationpreventDefault。在后台,它只是Backbone的普通JS。

碰撞检测

既然我们已经讨论了事件部分,那么我只想说,这不是冲突检测的最佳解决方案。
这就像你在更新位置时每隔一个球就调用一个isCollindingWith(ball)函数一样,这就是事件的情况,只是循环隐藏在事件实现中。
在这个答案中讨论优化的碰撞检测算法可能太宽泛了,所以我将链接到这篇关于2D collision detection的优秀文章。
有趣的部分是在最后,他们讨论了 * 空间数据结构 *,如 * 四叉树、R-树或空间散列表 *。

相关问题