20

数日前に Raphael.js を使い始めましたが、とても楽しんでいます。私が把握できていない唯一のことは、「紙」または svg/vml タグを取得して、swf のようにブラウザ ウィンドウを埋める方法です。この例を参照してください。

上記の例がブラウザ ウィンドウでサイズを変更する方法に注意してください。

ブラウザウィンドウで「紙」のサイズを変更することはできましたが、すべてのベクターグラフィックスのサイズを調整することはできませんでした。どんなフィードバックでも大歓迎です。

編集

私はこれでさまざまなルートを試しました。viewBox はうまく機能しましたが、その SVG のみです。Raphael セットと window.onresize イベントの小さなコードを使用してそれを行う方法を見つけました。調査結果は今夜か明日に投稿します。質問に対する他の解決策がある場合は、まだ本当に知りたいです。

4

5 に答える 5

37

しばらく時間がかかりましたが、ようやくこの問題の解決策を思いつきました。Raphaelで使用できる小さなjsファイルでソリューションをラップしました。jsファイルといくつかの簡単なドキュメントをここで入手できます。実際の動作をご覧ください。

使い方：

  1. svgにviewBoxを使用する
  2. すべてのvmlノードをグループノードにラップします
  3. vmlグループノードがRaphaelコンストラクターに渡されるように、Raphaelコンストラクターをラップします。
  4. 用紙のサイズが変更されたときに、いくつかのcssプロパティを変更して、中央揃え、クリッピング、および正しいアスペクト比の維持を処理します。

フィードバックをいただければ幸いです。

于 2010-12-04T19:04:23.833 に答える
7

こんにちは、Zévan さん。

Zevanという男が作った素敵な答えを見つけました。ただし、コードが私の好みに合わせて複雑すぎることがわかりました（必要なjquery、「$（this）」などの奇妙なことをしました）。

だから私はそれを単純化しました。これで、stackoverflow に収まるほど短くなりました ;):

var paper;

window.ScaleRaphael = function(container, width, height) {
    var wrapper = document.getElementById(container);
    wrapper.style.width = width + "px";
    wrapper.style.height = height + "px";
    wrapper.style.overflow = "hidden";

    wrapper.innerHTML = "<div id='svggroup'><\/div>";
    var nestedWrapper = document.getElementById("svggroup");

    paper = new Raphael(nestedWrapper, width, height);
    paper.w = width;
    paper.h = height;
    paper.canvas.setAttribute("viewBox", "0 0 "+width+" "+height);
    paper.changeSize = function() {
        var w = window.innerWidth
        var h = window.innerHeight
        var ratioW = w / width;
        var ratioH = h / height;
        var scale = ratioW < ratioH ? ratioW : ratioH;

        var newHeight = Math.floor(height * scale);
        var newWidth = Math.floor(width * scale);

        wrapper.style.width = newWidth + "px";
        wrapper.style.height = newHeight + "px";
        paper.setSize(newWidth, newHeight);
    }
    window.onresize = function() {
        paper.changeSize();
    }

    paper.changeSize();

    return paper;
}

このバージョンの唯一の欠点は、SVG が必要であり、VML を実行しないことです。これは問題ですか？

私はあなたのデモページの簡易版でそれを使用しています:

<!DOCTYPE html> 
<html lang="en"> 
<head>
<title>ScaleRaphaël Demo 1</title>
<meta charset="utf-8"> 

<script type="text/javascript" src="raphael.js"></script>
<script type="text/javascript" src="scale.raphael.js"></script>
<script type="text/javascript">

    window.onload = function() {
        var paper = new ScaleRaphael("wrap", 600, 400);

        // draw some random vectors:
        var path = "M " + paper.w / 2 + " " + paper.h / 2;
        for (var i = 0; i < 100; i++){
            var x = Math.random() * paper.w;
            var y = Math.random() * paper.h;
            paper.circle(x, y,
                Math.random() * 60 + 2).
                attr("fill", "rgb("+Math.random() * 255+",0,0)").
                attr("opacity", 0.5);
            path += "L " + x + " " + y + " ";
        }

        paper.path(path).attr("stroke","#ffffff").attr("stroke-opacity", 0.2);

        paper.text(200,100,"Resize the window").attr("font","30px Arial").attr("fill","#ffffff");
    }

      </script>
<style type="text/css">
    body, html {
        margin: 0;
        padding: 0;
        overflow: hidden;
    }

    #wrap{
        background-color: orange;
    }
</style>

</head>
<body>

于 2011-06-13T20:38:49.203 に答える
2

サイズを変更した後、すべてのパスをループして、用紙の新しいスケールに応じてそれらをscale（）することができます。

于 2010-12-01T09:10:14.293 に答える
2

svg ルート要素に'viewBox'属性を追加して座標系を定義すると、形状はコンテナのサイズに合わせてスケーリングされます。ただし、VML 側の処理方法がわかりません。https://github.com/DmitryBaranovskiy/raphael/issuesの問題を報告することをお勧めします。

于 2010-12-01T12:05:45.617 に答える
2

これはスレッドが古すぎるかもしれませんが、Raphael 2.0 には少なくともsetViewBoxメソッドがあります -- http://raphaeljs.com/reference.html#Paper.setViewBox

実際のキャンバス サイズを 100% に設定する必要があるため、コンテナーはウィンドウに合わせて拡大縮小さsetViewBoxれますが、window.resize コールバックで適切な w/h を指定して呼び出すとうまくいくはずです。

于 2013-01-21T03:50:35.870 に答える