Question

我想改变Raphael的纸张（对象基础）大小以适应窗口大小调整。 [使用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 = function（）{

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（）{...}实时获取窗口大小。如果有更好的方法，请告诉我。

谢谢，

Answer 1

我成功了以下两点：

1）“纸”本身不是操纵对象。我认为我们应该将其视为广告牌。

2）使用st = paper.set（）并将对象（circle，rect，...）放入其中。并使用st.scale（sv，sv，0,0）;

* 第三和第四个参数（0,0）非常无能为力。

（注意）

串行调整大小操作对“scale（）”函数不利。因为每个调整大小系数都被堆积为一个数字的力量。所以当一次做了1.1次调整大小操作5次时，比例将为1.1 ^ 5.

Answer 2

使用setViewBox（）

它应该做的工作 http://raphaeljs.com/reference.html#Paper.setViewBox

Raphael - 如何使纸张尺寸适合浏览器的窗口大小？

2 个答案: