Question

我几天前开始使用Raphael.js，我真的非常喜欢它。我唯一无法弄清楚的是如何让“paper”或svg / vml标签像swf一样填充浏览器窗口。 See this example.

请注意以上示例使用浏览器窗口调整大小的方式

我能够通过浏览器窗口调整“纸张”，但没有运气让所有矢量图形调整其大小。任何反馈将不胜感激。

修改

我尝试了一堆不同的路线。 viewBox工作得很好但只有它的SVG。我只想知道如何使用Raphael集和window.onresize事件上的一些代码来做到这一点。我会在今晚或明天晚些时候发布我的发现。如果有的话，我还是真的希望看到问题的其他解决方案。

Answer 1

我花了一段时间，但我终于找到了解决这个问题的方法。我把解决方案包装在一个可以和Raphael一起使用的小js文件中。您可以获取js文件以及一些简单的文档here。 See it in action

工作原理：

使用viewBox for svg
包装组节点中的所有vml节点
将Raphael构造函数包装起来，以便将vml组节点传递给Raphael构造函数
在调整纸张尺寸以处理居中，裁剪和保持正确的宽高比时，改变一些css属性。

非常感谢任何反馈。

Answer 2

你好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>

Answer 3

在调整大小后，你可以根据纸张的新比例循环遍历所有路径并缩放（）。

Answer 4

您可以在svg根元素上添加'viewBox'属性来定义坐标系，然后形状将缩放到容器的大小。不知道如何处理VML方面的事情。我建议报告一个问题，https://github.com/DmitryBaranovskiy/raphael/issues。

Answer 5

这可能只是一个线程太旧了，但Raphael 2.0至少有一个setViewBox方法 - http://raphaeljs.com/reference.html#Paper.setViewBox

您仍然需要将实际画布大小设置为100％，因此容器会缩放到窗口，但在window.resize中使用适当的w / h调用setViewBox回调应该可以解决问题。

像SWF一样扩展SVG（Raphael.js）

5 个答案: