我几天前开始使用Raphael.js，非常喜欢它。唯一让我困惑的是如何使“paper”或svg / vml标签填充浏览器窗口，就像swf一样。 参见此示例。
注意上面示例随浏览器窗口大小调整的方式
我能够使“paper”随浏览器窗口调整大小，但无法让所有的矢量图形调整大小。如果有任何反馈，将不胜感激。
编辑
我尝试了多种不同的方法。 viewBox非常好用，但它只适用于SVG。我刚刚通过Raphael集和window.onresize事件上的一些代码来解决了这个问题。今晚或明天我会发布我的发现。如果还有其他解决方案，我仍然很想看到它们。
你好，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>
setViewBox 方法 -- http://raphaeljs.com/reference.html#Paper.setViewBox。你仍然需要将实际画布大小设置为 100%，以便 容器 缩放到窗口大小，但在 window.resize 回调中调用 setViewBox 并传入适当的 w/h 值即可解决问题。
Raphael( container_id )实例。但是当我切换到new ScaleRaphael( container_id , 75, 75)时，所有的缩略图都被合并成一个视觉元素。 - dsdsdsdsd