javascript - 在 onmousedown 的 Raphael 函数中包含 labelPath

Question

澳大利亚 map 的 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' 函数在指针位于路径上方时起作用，但是，当鼠标位于文本/labelPath 上方时它不起作用。

有没有一种方法可以通过修改“for (var state in alb)”循环以包含 labelPath 来添加此功能？

Answer 1

有多种方法可以解决这个问题。您可以将 alb 对象的成员设置为集合而不是路径，然后将标签添加到这些集合中——这样，标签和路径将共享同一个点击处理程序。不幸的是，这也会使您的路径动画也适用于标签，因此可能不可行。

或者，您可以将 data(使用 Raphael 的内置 Element.data 方法)分配给一个特定的键，对属于一起的项目使用相同的值。例如，路径和标签都具有数据“click-group”=“Cudhi”。然后，您可以使用 Paper.forEach 来识别配对在一起的每个元素，并为其分配适当的点击处理程序。

这是一个 fiddle demonstrating such a mechanism .

我相信还有其他方法可以做到这一点!使用 Paper.forEach 和 Element.data 或 Element.id 对我来说似乎是特别有前途的工具。