24

Raphaelウィンドウ変更時にキャンバス内のすべての要素を再スケーリングするにはどうすればよいですか？

次のコードを検討する/ウィンドウdiv containerのサイズを変更した場合、ウィンドウの幅をウィンドウ幅の50％に設定し、（、、または）が変更されていないため、スケーリングされrectたcircleウィンドウpathのみを変更した場合

コード 

<div id="container"></div>​
 #container{border : 1px solid black ;
               width : 50% ;
               height:300px}​
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40);

</ p>

4

4 に答える 4

31

Raphaël バージョン 2.0 以降を使用している場合、別の方法としてpaper.setViewBoxを呼び出して座標系を設定し、ブラウザにサイズ変更を自動的に処理させることもできます。

更新: OK、Raphaël は私が思っていたよりもオートスケーラブルではないことがわかりました...とにかく、ここに例を示します(raphaël はまだルート <svg> に絶対的な幅/高さを設定しているため、通常の svg ではそれらを削除する必要がありますスケーリングが行われます)。サイズは CSS によって決定され、svg は指定された領域にちょうど収まります。svg viewBox のアスペクト比が配置先の CSS ボックスと一致しないために発生するコンテンツのオーバーフローに対処するために、これを微調整することができます。preserveAspectRatioこれを行うには、ルート svg 要素に属性を追加します。

ここpreserveAspectRatioで svg属性に設定できる値の詳細を読むことができますが、おそらく興味深い 3 つの値は(指定された四角形に合わせてスクイーズ/ストレッチするため)、(四角形を埋めるために拡大するため、場合によってはクリッピングするため) です。アスペクトが一致しない場合、一部のパーツを取り除きます) (これはデフォルトであり、pAR をまったく指定しないのと同じです。アスペクトが一致しない場合、コンテンツが中央に配置され、一方向にオーバーフローすることを意味します)。'none''xMidYMid slice''xMidYMid meet'

于 2012-06-25T14:08:25.130 に答える
21

http://jsfiddle.net/vnTQT/ 

    var paper = Raphael("wrap");
    paper.setViewBox(0,0,w,h,true);
    paper.setSize('100%', '100%');

これ (paper.setViewBox) を paper.setSize('100%', '100%') と共に使用し、svg 関数を直接使用せずに機能する svg コンテンツのサイズ変更でウィンドウのサイズを変更します。

于 2013-02-11T09:50:37.460 に答える
4

私は解決策を見つけたと思います：次のコードはウィンドウのサイズを変更するとすべての要素を再スケーリングします、そしてこれは私が探していたものです

            var w = $(window).width();
            var h = $(window).height();
            function draw(w, h) {
                var paper = Raphael($('#wrap').attr('id'), w, h);
                paper.setViewBox(0, 0, 1500, 1500, true);
                var rec = paper.rect(0, 0, 200, 200).attr({ stroke: 'black' });
                var cir = paper.circle(100, 100, 50);
            };
            draw(w, h);
            function resize() {
                var xw = $(window).width();
                var xh = $(window).height();
                draw(xw, xh)
            }
            $(window).resize(resize);

@ErikDahlströmからの参照： Paper.setViewBox（x、y、w、h、fit） AND'viewBox '属性

于 2012-06-25T17:52:21.743 に答える
0

サイズを変更する要素のセットがある場合は、js コードで直接使用できます...

for (var i = 0; i < your_set.length; i++) {
    your_set[i].scale(ratio, ratio, 0,0);
};

...およびブラウザのサイズ変更時にページをリロードする機能:

window.addEventListener('resize', function () { 
    "use strict";
    window.location.reload(); 
});
于 2016-02-14T21:26:29.327 に答える