0

ウィンドウのサイズ変更に合わせてラファエルの紙（オブジェクトベース）のサイズを変更したい。[Firefox_13.0、Raphael_2.1.0、WindowsXPを使用]

可能であれば、全画面モードに合わせたいと思います。

==================================================

(ステップ)

私は紙を作成しました： paper = Raphael(0, 50, 800, 600); // 初期の幅と高さは 800 と 600 です。

紙の上に物を置いた。

ブラウザーのウィンドウ サイズは、windowW = window.innerWidth および winnowH = window.innerHeight (Firefox の場合) によってチェックされます。

スケーリング値は、sv = windowW/800; によって計算されます。

そして、紙を paper.scale(sv, sv); でスケーリングします。

==================================================

（スクリプト）

window.onload = 関数 () {

paper = Raphael(0, 50, 800, 600);   
var background = paper.rect(0, 0, 800, 600).attr({fill:'#669999'});

// placing the objects
var circle = ...;
var rect = ...;
var ellipse = ...;

winowW = window.innerWidth;
winowH = window.innerHeight;
sv = winowW/800.

paper.scale(sv, sv);

}

==================================================

（結果）

circle.scale(sv)、rect.scale(sv, sv)、ellipse.scale(sv, sv) は有効ですが、paper.scale(sv, sv)、background.scale(sv, sv) は有効ではありません。

なぜこのケースが起こったのですか？window.onresize = function() {...} でウィンドウサイズをリアルタイムで取得できます。もっと良い方法があれば教えてください。

ありがとう、

4

2 に答える 2

0

以下の2点で成功しました。

1) 「紙」自体は操作対象ではない。看板として見るべきだと思います。

2) st = paper.set() を使用し、オブジェクト (circle、rect、...) をその中に入れます。st.scale(sv, sv, 0, 0); を使用します。

* 3 番目と 4 番目のパラメーター (0, 0) は非常に無効です。

（注意）

関数「scale()」では、連続的なサイズ変更操作は適切ではありません。それぞれのリサイズ係数が数のべき乗で積み重なっているためです。したがって、1.1 倍のサイズ変更操作を 5 回実行すると、スケールは 1.1^5 になります。

于 2012-06-10T19:07:44.883 に答える
0

setViewBox() を使用する

それは仕事をするべきです http://raphaeljs.com/reference.html#Paper.setViewBox

于 2014-07-04T07:28:22.153 に答える