6

だから私は私のキャンバスと私のパスを持っています:

var paper1 = Raphael(10, 50, 960, 560);

var mapShape1 = paper1.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
var mapShape2 = paper1.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
var mapShape3 = paper1.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");

そして、私はそれらを次のようにスタイルします:(これは改善できると思います。一度にすべてのパスを実行する方法はありますか???)

function style1(shape){
  shape.attr({
            "fill": "#33CCFF",
            "stroke": "000000",
            "stroke-width": "5"
        });
}

style1(mapShape1);
style1(mapShape2);
style1(mapShape3);

しかし、私の質問は、単一のホバー機能をすべてのパスで機​​能させる方法です。これは次のとおりです。

  mapShape1.hover(
    function(){
      this.animate({
        "fill": "#FF3300"
      }, 500);
    },
    function(){
      this.animate({
        "fill": "#33CCFF"
      }, 500)
    }
   );

しかし、一度に 1 つの形状でしか機能しません。

$(mapShape1, mapShape2, mapShape3).hover(...

しかし、それはうまくいきません。私は何が欠けていますか？

4

4 に答える 4

12

lib3d で述べたように、Setを使用する必要があります。ただし、セットの内容をループして属性/機能を適用するために使用するのではなくforEach、共有の属性/機能をセット自体に追加して、セットの内容に適用することができます。詳細は後述しますが、まずセットを作成する方法を見てください。

セットの取り扱い

セットを作成して要素を追加するには、明示的方法と暗黙的方法の 2 つがあります。

明示的

これは、自分でセットを管理し、自分でセットに要素を追加することを意味します`

var paper, shapeA, shapeB, shapeC, elementSet;

paper = Raphael(10, 50, 960, 560);
elementSet = paper.set();

shapeA = paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
shapeB = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
shapeC = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");

// now add A and C to the set, as well as a rectangle
elementSet.push(
    shapeA,
    shapeC,
    paper.rect(10, 10, 10, 10, 2)
);

このようにして、セットに入るものと入らないものを完全に制御できます。

暗黙

また、要素を描画するときに始点と終点をマークする機能もあります。始点と終点の間に描画されるすべての要素がセットに追加されます。

var paper, shapA, shapeB, shapeC, elementSet;

paper = Raphael(10, 50, 960, 560);

paper.setStart();

shapeA = paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z");
shapeB = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z");
shapeC = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z");

paper.rect(10, 10, 10, 10, 2);

elementSet = paper.setFinish();

変数 elementSet には、形状 A、B、および C と長方形が含まれています。

明示的または暗黙的?

個人的には、常に明示的な方法を使用することをお勧めします。そうすれば、セットに入るものと入れないものを 100% コントロールできます。また、setStart() と setFinish() の名前が逆になっていることがわかりました。「set」で「開始」していて、「開始」を「設定」していません。これは意図を理解すれば明らかかもしれませんが、それはまさにあいまいな命名の危険性です。

より多くの使用法

私たちが作成したアプリケーションでは、要素の複雑なグループを描画、削除、更新、および再配置する必要がありました。これを実現するために、セットを多用しました。セットを使用すると、セット内のすべての要素に属性を適用できますが、セットを使用すると、それを DTO として使用することもできます。

たとえば、次のように動作します。

var elementSet = paper.set();

elementSet.push(elemA, elemB, elemC);
elementSet.myApp.someDTO = {
    property: value,
    something: else
};

myApp一貫性と明確さのために、名前空間としてを使用する傾向があります。その優れた点は、someDTO に Raphael 要素が含まれていても、セットに適用したものはすべて DTO の要素には適用されないことです。これにより、必要に応じてコンテキスト、座標などを渡すのに非常に便利になります。

セットの使用

ここで、セットを使用する利点に戻ります。ここでユースケースを確認しましょう。属性を適用し、任意の量のパスにカーソルを合わせたいとします。

上記の明示的な例のようにセットを作成すると、次のようになります。

var paper, elementSet;
paper = Raphael(10, 50, 960, 560);
elementSet = paper.set();
elementSet.push(
    paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z"),
    paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z"),
    paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z"),
);

セットにスタイリングを適用します。

elementSet.attr({
    fill: '#33CCFF',
    stroke: '#000000',
    'stroke-width': 5
});

次に、ホバーを追加します。

elementSet.hover(
    function(){
        this.animate({
            "fill": "#FF3300"
        }, 500);
    },
    function(){
        this.animate({
            "fill": "#33CCFF"
        }, 500)
    }
);

要素と同様に、セットも連鎖をサポートします。

elementSet.push(
    /* elements */
).attr({
    /* attributes */
}).hover(
    /* hover fn's
);

最終結果を表示するには、ここにフィドルがあります

ホバー機能の拡張

オンホバー ハイライトをすべての要素に適用する必要がある場合は、セットに属性を再度適用するだけです。

onMouseOver: function () {
    elementSet.animate({
        fill: '#FF3300'
    }, 500);
};
onMouseOut: function () {
    elementSet.animate({
        fill: '#33CCFF'
    }, 500);
};

elementSet.hover(onMouseOver, onMouseOut);

これを表示するフィドルはここにあります

jQuery の使用

jQuery を介してホバー機能をバインドできるようにするには、要素のノードにアクセスする必要があります。要素自体は DOM ノードではなく、Raphael オブジェクトです。を使用するelement.nodeことで、そのノードで jquery を使用して動作を追加できます。私の個人的な経験では、これはうまく機能しますが、本当に予期しない動作につながる可能性があるため、jquery を使用してノードを変更することは決してありません。Raphael は、必要なすべての機能を提供します。jquery を使用する必要はありません。

于 2013-04-22T07:22:16.463 に答える
1

図形にクラスを与えて、jquery にクラスを選択させてみませんか?

次のことができます。

function style1(shape){
  shape.attr({
            "fill": "#33CCFF",
            "stroke": "000000",
            "stroke-width": "5",
            "class": '.js-path-hover'
        });
}

style1(mapShape1);
style1(mapShape2);
style1(mapShape3);

次に、ホバーイベントを次のように設定できます。

$('.js-path-hover').on('hover', functionNameHere);

Raphael がこれらの svg オブジェクトにクラスを書き込むアクセス権を与えない場合は、D3 を使用してそれらをすべて選択し、それらにクラスを追加できます。D3、Raphael、および jQuery を組み合わせると非常に強力であることがわかりました。唯一の問題は、それぞれの制限を追跡する必要があることです。

于 2013-04-22T07:49:21.757 に答える
0 
$(mapShape1, mapShape2, mapShape3).live('hover', function() { });

Live は、DOM に追加された動的要素でより適切に動作するはずです。ホバーは、後で作成された要素では機能しません。「on」は、3 番目のパラメーターが指定された作成された dom 要素でのみ機能します。

于 2013-04-23T12:25:11.517 に答える