3

私は KineticJS を初めて使用し、ボタンでさまざまなアイテムを表示または非表示にする方法を理解しようとしています。以下は、例を含む JSFiddles です。

箱は4つです。ボックスのボタンをクリックすると、ボックスが表示され、表示されていた他のボックスが消えるようにしたいと考えています。

最初の JSFiddle では、addEventListener を使用して、4 つの正方形すべてを個別にリストし、適切な不透明度に設定しました。そしてそれはうまくいきます：

http://jsfiddle.net/T8m64/85/

しかし、実際にこれを実装したいプロジェクトには、4 つではなく 30 のアイテムがあります。だから私の質問は、アイテムをリストするのではなく、アイテムをグループ化するより速い方法があるかどうかです. Kinetic.Group でこれを試しましたが、うまくいかないようです:

http://jsfiddle.net/T8m64/86/

ボタンイベントの私のコードは次のとおりです。

    document.getElementById('s1').addEventListener('click', function() {
        square.setOpacity(1);       
        layer.draw();
    }, false);
4

1 に答える 1

3

さて、KineticJSについてはよくわかりませんが、昔ながらのJavaScriptでやりたいことができると思います。

これがあなたがやりたいことをする一つの方法を示すフィドルです。

ここでの基本的な考え方は、すべてのボタンに1つの共通のクラス名を設定することです。次に、を使用しdocument.getElementsByClassnameて、ボタン要素の配列を取得できます。各ボタンのIDを使用して、行/列のレイアウトで結果の正方形の目的の場所を記述しました（たとえば、id = "1_0"は行1、列0、id = "0_1"は行0、列1）。

次に、配列をループして、KineticJSシェイプオブジェクトとイベントリスナーをアタッチするだけです。

KineticJSシェイプでは、ボックス座標の変数を参照するdrawFuncを定義しました。この変数は変更されないものでなければなりません（つまり、ループが繰り返されるたびに上書きしないでください）。これを行うための最善の方法は、何らかの方法で座標をシェイプオブジェクトにアタッチすることです。各ボックスの行と列を計算し、それらをオブジェクトにアタッチすることを選択しました。次に、ボックスの行/列を参照してコーナー座標を計算するいくつかの計算がdrawFuncにあります。間違いなくそれを行うためのより良い方法がありますが、私は疲れています。

これで、HTMLで必要な数のボタンを作成でき、IDで指定された場所に基づいてボックスが作成されます。

于 2013-01-18T07:52:43.823 に答える