0

私は基本的に次のような2つのキャンバスを持っています:

<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);
    };
});

等...

しかし今、私は 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回再描画されるため、それらすべてを1つのキャンバスに配置するとクラッシュします。ネストされたマウスオーバーについては、これらの場合に「this」を使用することを知らなかったからです。一時停止関数はブール値を取ります。true の場合は描画を停止するよう処理に指示し、false の場合はループを再開するよう指示します。私はあなたのアドバイスを受けて、次のことを行うことで解決しました。

将来の参考のために、これが修正された方法を次に示します。ありがとう！

$("[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 に答える