1

我正在尝试实现这张很棒的地图，但我不知道如何缩放它。更改容器 div 的大小或高度/宽度值只会裁剪底层地图。我想我需要 paper.scaleAll(.5) 在这里的某个地方，但无法弄清楚。谢谢！

    <script>
  window.onload = function () {
    var R = Raphael("container", 1000, 900),
      attr = {
      "fill": "#d3d3d3",
      "stroke": "#fff",
      "stroke-opacity": "1",
      "stroke-linejoin": "round",
      "stroke-miterlimit": "4",
      "stroke-width": "0.75",
      "stroke-dasharray": "none"
    },
    usRaphael = {};

    //Draw Map and store Raphael paths
    for (var state in usMap) {
      usRaphael[state] = R.path(usMap[state]).attr(attr);
    }

    //Do Work on Map
    for (var state in usRaphael) {
      usRaphael[state].color = Raphael.getColor();

      (function (st, state) {

        st[0].style.cursor = "pointer";

        st[0].onmouseover = function () {
          st.animate({fill: st.color}, 500);
          st.toFront();
          R.safari();
        };

        st[0].onmouseout = function () {
          st.animate({fill: "#d3d3d3"}, 500);
          st.toFront();
          R.safari();
        };

      })(usRaphael[state], state);
    }

  };
</script>
4

2 回答 2

2

另一个答案几乎是正确的，但是您必须将缩放命令的锚点设置为 0,0，以便每个状态都从同一点缩放：

element.transform("s2,2 0,0");

当您使用它时，我会创建一个 R.set() 元素并将每个状态添加到其中，以便您可以在添加其他对象（例如图例）时将比例仅应用于状态您不想扩展：

usRaphael = {},
states = R.set();

//Draw Map and store Raphael paths
for (var state in usMap) {
  usRaphael[state] = R.path(usMap[state]).attr(attr);
  states.push(usRaphael[state]);
}

然后在最后：

states.transform("s2,2 0,0");

jsFiddle

于 2013-02-03T19:22:02.953 回答
0

绘制地图后（在for循环之外）尝试以下操作：

R.forEach(function(element) {
    element.transform("s2");
});

我不确定您使用的是什么版本的 Raphael，但我的代码假设是最新的。它的作用是遍历纸上的每条路径并将变换设置为“比例 2”。这会将所有路径缩放 2。

于 2013-02-02T22:21:04.433 回答