Question

我正在尝试实施this awesome map，但我无法弄清楚如何扩展它。更改容器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>

Answer 1

另一个答案几乎是正确的，但您必须将scale命令的锚点设置为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

Answer 2

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

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

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

如何在Rob Flaherty的美国地图示例中缩放拉斐尔地图？

2 个答案: