0

我基本上有两个这样的画布：

<canvas id="canvas1" class="canvases" ></canvas>
<canvas id="canvas2" class="canvases" ></canvas>

而且因为它们正在运行 Processing.js 并且它们会变得很重，所以我对 jQuery 中的两个按钮都应用了 mouseover 和 mouseout 事件，如下所示：

num_canvases = 2;
canvasArray = [];

for (i = 0, i < num_canvases, i++) {
    canvasArray.push(Processing.getInstanceById('canvas'+i);
}

$('#canvas1').mouseover(function () {
    if (!force_play_all) {
        canvasArray[0].pause_or_resume(false);
    };
});
$('#canvas2').mouseover(function(){
    if (!force_play_all) {
        canvasArray[1].pause_or_resume(false);
    };
});

ETC...

但是现在我正在扩展到 20 个画布，并且正在寻找一种方法来将相同的鼠标悬停事件应用于每个画布并在鼠标悬停的任何地方执行 pause_or_resume。我不能每堂课都应用它，否则他们都会开或关。我在想这样的事情，但它仍然不起作用。想法？：

$('.canvases').mouseover(function () {
        for (var i = 0; i <= numVars-1; i++) {
            var name_holder = '#canvas'+(i+1);
                $(name_holder).mouseover(function () {
                    canvas_instance = Processing.getInstanceById('canvas'+i);
                    if (pause_boolean) {
                        console.log(name_holder);
                        console.log(canvas_instance);
                        canvas_instance.pause_or_resume(pause_boolean);
                    };
                });
            };
        });
4

1 回答 1

0

是的，所以我使用 20 个画布导致处理每秒重绘整个实例 60 次，因此将它们全部放在一个画布中会崩溃。至于嵌套的鼠标悬停是因为我不知道在这些情况下使用“this”。pause 函数采用布尔值；如果为真，则告诉处理停止绘制，如果为假，则告诉它恢复循环。我接受了您的建议并通过执行以下操作解决了它。

这是解决此问题的方法，仅供将来参考。谢谢齐克洛斯！

$("[id^='canvas']").mouseover(function () {
    if (!force_play_all) {
        canvasArray[parseInt(this.id.replace('canvas',''))-1].pause_or_resume(false);
    };
});
于 2013-07-25T20:35:58.260 回答