1

オーストラリアの地図のRaphaelの例には、次のスクリプトがあります（シェイプパスの上のテキストラベルに名前を含めるように変更されています）。

        <script type="text/javascript" charset="utf-8">
        window.onload = function () {
            var R = Raphael("paper", 800, 600);
            var attr = {
                fill: "#eee",
                stroke: "#666",
                "stroke-width": 1,
                "stroke-linejoin": "round"
            };
function labelPath( pathObj, text, textattr )
{
    if ( textattr == undefined )
        textattr = { 'font-size': 11, fill: '#000', stroke: 'none', 'font-family': 'Arial,Helvetica,sans-serif', 'font-weight': 40 };

    var bbox = pathObj.getBBox();
    var textObj = pathObj.paper.text( bbox.x + bbox.width / 2, bbox.y + bbox.height / 2, text ).attr( textattr );
    return textObj;

}
            var alb = {};
        alb.cudhi = R.path("m 619.04203,203.24913 -3.9,5.4 -4.2,3.6 -8.7,5.4 -6.9,8.1 -3,2.7 -5.1,5.4 -2.7,0 -2.1,0 -6,2.7 -3,0 -3.9,-5.4 -5.7,-9 -3,-7.2 3,-5.4 0,-6.3 -8.1,-13.5 -1.8,-4.5 0,-3.6 -6.9,-5.4 -5.1,7.2 -4.8,-7.2 -6,-12.6 -3.9,-8.1 -3.9,-9 3,-8.1 0,-8.1 0,-6.3 -9,-8.1 -4.8,-8.1 -5.1,-5.4 -0.9,-6.3 -1.2,-9 -3.9,0 -8.7,-4.5 -10.8,-6.3 -5.1,-7.2 -1.8,-10.8 -1.2,-6.3 -3.9,-9 0,-9.9 -1.8,-13.5 1.8,-4.5 2.1,-3.6 4.8,0 6,-2.7 6,-2.7 4.8,7.2 9,14.4 9.9,13.5 9.6,6.3 4.2,1.8 10.8,0.9 18.6,-5.4 5.1,3.6 4.8,4.5 9.9,9.9 0.9,0.9 5.1,5.4 5.7,6.3 6.9,9.9 0,9.9 9,2.7 3,0.9 10.8,9.9 7.8,11.7 1.2,0.9 9.9,9 8.7,0.9 0.9,6.3 -0.9,10.8 -0.9,11.7 -2.1,4.5 -3,5.4 -7.8,6.3 -1.8,7.2 0,2.7 -1.2,3.6 -0.9,4.5 -3.9,2.7 -3.9,6.3 z").data('id', 'alb["cudhi"]').attr(attr);
        alb.kruje = R.path("m 447.14203,127.64913 -4.8,-9.9 -6,-6.3 -3.9,-6.3 -3.9,-5.4 -6,-6.3 -3.9,-7.2 -1.8,-9 -5.1,-9 -3,-9.9 3,-2.7 6,0 10.8,2.7 3.9,0 6,0 9.9,-5.4 9.9,-4.5 11.7,-5.4 3.9,9 1.2,6.3 1.8,10.8 5.1,7.2 10.8,6.3 8.7,4.5 3.9,0 1.2,9 0.9,6.3 5.1,5.4 4.8,8.1 9,8.1 0,6.3 0,8.1 -3,8.1 3.9,9 3.9,8.1 6,12.6 4.8,7.2 -6.9,4.5 -7.8,6.3 -9,7.2 -3.9,6.3 -3.9,4.5 -3.9,7.2 -2.1,-3.6 -3,-4.5 -5.7,-0.9 -6,0 0,-12.6 4.8,1.8 3,-0.9 0.9,-3.6 -2.7,-9.9 -2.1,-5.4 -3,-3.6 -10.8,-4.5 -9,-6.3 -4.8,-5.4 -9.9,-6.3 -3.9,-8.1 -2.1,-9.9 -3,-8.1 z").data('id', 'alb["kruje"]').attr(attr);

labelPath( alb["cudhi"], "Cudhi" );
labelPath( alb["kruje"], "Kruje" );


            var current = null;
            for (var state in alb) {
                alb[state].color = Raphael.getColor();
                (function (st, state) {
                    st[0].style.cursor = "pointer";
                    st[0].onmousedown = function () {
                        current && alb[current].animate({fill: "#eee", stroke: "#666"}, 500) && (document.getElementById(current).style.display = "");
                        st.animate({fill: st.color, stroke: "#ccc"}, 500);
                        st.toBack();
                        R.safari();
                        document.getElementById(state).style.display = "block";
                        current = state;
                    };
                    if (state == "durres") {
                        st[0].onmousedown();
                    }
                })(alb[state], state);
            }
        };
        </script>

現在、「onmousedown」関数は、ポインターがパス上にある場合は機能しますが、マウスがtext/labelPath上にある場合は機能しません。

for (var state in alb)' 'ループを変更してlabelPathも含めることで、この機能を追加する方法はありますか？

4

1 に答える 1

2

これに取り組むにはいくつかの方法があります。オブジェクトのメンバーをalbパスではなくセットにしてから、それらのセットにラベルを追加することができます。そうすれば、ラベルとパスの両方が同じクリックハンドラーを共有します。残念ながら、これによりパスアニメーションもラベルに適用されるため、おそらく実現可能ではありません。

dataまたは、 （Raphaelの組み込みのElement.dataメソッドを使用して）一緒に属するアイテムに同じ値を使用して特定のキーに割り当てることもできます。たとえば、パスとラベルの両方にデータ'click-group'='Cudhi'があります。次に、Paper.forEachを使用して、ペアになっているすべての要素を識別し、適切なクリックハンドラーを割り当てることができます。

これは、そのようなメカニズムを示すフィドルです。

これを達成する他の方法もあると確信しています！私にとって特に有望なツールを使用Paper.forEachしElement.dataたり、そのElement.idように思えたりします。

于 2012-08-22T18:12:32.293 に答える