web-dev-qa-db-ja.com

jqueryを使用してウィンドウのサイズ変更でRaphael js要素をスケーリングする方法

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

次のコードを検討します/ [〜＃〜] demo [〜＃〜] ウィンドウのサイズを変更した場合のみ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);

jquerysvgraphaelhtml5-canvas
24
Mina Gabriel

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

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

Svg preserveAspectRatio属性 here に設定できる値の詳細を読むことができますが、おそらく重要な3つの値は'none'（与えられたすべての四角形に合うように圧縮/伸張するため）、'xMidYMid slice'（アスペクト比が一致しない場合は一部を切り取って、四角形を埋めるために拡大する）、'xMidYMid meet'（これはデフォルトであり、pARをまったく指定しないのと同じです。アスペクトが一致しない場合、コンテンツは中央に配置され、一方向にオーバーフローします）。

31
Erik Dahlström

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コンテンツのサイズ変更でウィンドウのサイズ変更を行いました。

21
Sergey Krasnikov

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

            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'属性

4
Mina Gabriel

サイズ変更する要素のセットがある場合は、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(); 
});
0
mquantin