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

もう 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");

jsフィドル

于 2013-02-03T19:22:02.953 に答える
0

forマップを (ループの外で) 描画したら、次のことを試してください。

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

使用している Raphael のバージョンはわかりませんが、私のコードは最新のものを想定しています。これが行うことは、紙のすべてのパスを反復し、変換を「スケール 2」に設定することです。これにより、すべてのパスが 2 倍になります。

于 2013-02-02T22:21:04.433 に答える