像SWF一样扩展SVG(Raphael.js)

Question

像SWF一样扩展SVG(Raphael.js)

Zev*_*van 20 javascript flash svg vml raphael

我几天前开始使用Raphael.js,我真的很享受它.我唯一无法弄清楚的是如何让"paper"或svg/vml标签像swf一样填充浏览器窗口.看这个例子.

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

我能够通过浏览器窗口调整"纸张",但没有运气让所有矢量图形调整它们的大小.任何反馈将不胜感激.

编辑

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

Answer 1

Zev*_*van 37

我花了一段时间,但我终于想出了解决这个问题的方法.我把解决方案包装在一个可以和Raphael一起使用的小js文件中.您可以在此处获取js文件以及一些简单的文档.看到它在行动.

这个怎么运作:

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

任何反馈将不胜感激.

太棒了! (6认同)

Answer 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;
}

Run Code Online (Sandbox Code Playgroud)

你的版本唯一的缺点是它需要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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	14 年，9 月前
查看次数：	12776 次
最近记录：	5 年，11 月前