1

よし、要素を選択したいのですが、円と言うと、選択を解除したい場合は、それをクリックして選択を解除するか、別の要素をクリックして前の要素の選択を解除し、新しい要素を選択します。私が話していることについての以前のスタックオーバーフローの質問があります。

リンクは次のとおりです: Raphael element selection problemそこには、2 つの要素に対して適切に機能する jsfiddle があります。これと似たようなことをする前に、私が話した機能を実装したいと思います。どんな提案も役に立ちます。

これは、私が作成しようとしたが失敗したフィドルへのリンクです。http://jsfiddle.net/stewbydoo/jwAzS/1/

4

1 に答える 1

3

これを少し抽象化して、可能な限り再利用できるようにします。大まかな例を次に示します。

function CreateMultiselectGroup(paper, set, groupID, selAttr, unselAttr) {
    groupID = groupID || "default";
    selAttr = selAttr || {
        fill : 'red',
        stroke : 'black',
        'stroke-width' : 3
    };
    unselAttr = unselAttr || {
        fill : 'white',
        stroke : 'gray',
        'stroke-width' : 1
    };
    var multiselector = function(paper, selectedEntity) {
        paper.forEach(function(el) {
            if(el.data("multiselect-group") == groupID) {
                el.attr(unselAttr);
            }
        });
        selectedEntity.attr(selAttr);
    };
    set.forEach(function(el) {
        el.data("multiselect-group", groupID);
        el.click(function() {
            multiselector(paper, el);
        });
    });
}

この関数CreateMultiselectGroupは、Raphael 紙オブジェクト、グループの一部となるオブジェクトのセット、グループの任意の名前 (デフォルトは「デフォルト」)、および選択状態と非選択状態の属性セットを受け入れます。セット内の各要素を特定の複数選択グループに属するものとしてマークします。それらの 1 つがクリックされると、グループのすべてのメンバーの選択が解除され、選択された属性がクリックされた要素のみに適用されます。

これは、クリックのコールバックやアニメーションで動作するように簡単に拡張できます。これは、さらなる機能のための単なるワイヤーフレームです。

これは、ランダムな場所での 2 つの選択グループ (円と四角) の使用を示すフィドルです。

于 2012-08-02T22:37:46.650 に答える