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”函数在指针位于路径上时起作用，但是，当鼠标位于文本/标签路径上时它不起作用。

有没有办法通过修改“ 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 回答