像SWF一样扩展SVG（Raphael.js）
[英]Scaling SVG (Raphael.js) like an SWF
问题描述
我几天前开始使用Raphael.js，我真的很享受它。 我唯一无法弄清楚的是如何让“paper”或svg / vml标签像swf一样填充浏览器窗口。 看这个例子。
请注意上面的示例使用浏览器窗口调整大小的方式
我能够通过浏览器窗口调整“纸张”，但没有运气让所有矢量图形调整其大小。 任何反馈将不胜感激。
编辑
我尝试了一堆不同的路线。 viewBox工作得很好但只有它的SVG。 我只想知道如何使用Raphael集和window.onresize事件上的一些代码来做到这一点。 我会在今晚或明天晚些时候发布我的发现。 如果有的话，我还是真的希望看到问题的其他解决方案。
5 个解决方案
解决方案1
37 已采纳 2010-12-04 19:04:23
解决方案2
7
你好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>
解决方案3
2 2010-12-01 09:10:14
您可以循环所有路径并在调整大小后根据纸张的新比例缩放（）。
解决方案4
2 2010-12-01 12:05:45
您可以在svg根元素上添加'viewBox'属性来定义坐标系，然后形状将缩放到容器的大小。 不知道如何处理VML方面的事情。 我建议报告一个问题， https：//github.com/DmitryBaranovskiy/raphael/issues 。
解决方案5
1 2013-01-21 03:50:35
这可能只是一个过于陈旧的线程，但Raphael 2.0至少有一个setViewBox方法 - http://raphaeljs.com/reference.html#Paper.setViewBox
您仍然需要将实际画布大小设置为100％，因此容器会缩放到窗口，但是在window.resize回调中使用适当的w / h调用setViewBox应该可以解决问题。
Raphael.js中的缩放和旋转
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.