我如何使用jquery在窗口调整大小上缩放Raphael js元素

时间:2012-06-24 09:40:26

标签: jquery svg raphael html5-canvas

如何在窗口更改时重新缩放Raphael画布中的所有元素?

考虑以下代码/ DEMO如果我仅调整窗口大小div container,因为我将其宽度设置为窗口宽度的50%而没有(rectcirclepath)更改

代码

<div id="container"></div>​
 #container{border : 1px solid black ;
               width : 50% ;
               height:300px}​
var con = $("#container");
var paper = Raphael(con.attr('id'), con.attr('width'), con.attr('height'));
var win = paper.rect(0,0,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50, 50, 40);

5 个答案:

答案 0 :(得分:31)

如果您使用Raphaël2.0版或更高版本,则可以选择调用paper.setViewBox来设置坐标系,然后让浏览器自动处理调整大小。

更新:好的,事实证明Raphaël的自动缩放程度比我想象的要低......无论如何,这里是example(raphaël仍设置绝对宽度/高度root&lt; svg&gt;,因此需要删除它们才能进行正常的svg缩放。然后由CSS决定大小,svg恰好适合给定的区域。可以调整这个以处理溢出的内容,这可能是由于svg viewBox的纵横比与它所放置的CSS框不匹配而发生的。您可以通过向根svg元素添加preserveAspectRatio属性来执行此操作。

您可以详细了解可以在svg preserveAspectRatio属性here上设置的值,但可能感兴趣的三个值是'none'(用于挤压/拉伸以适合无论给出什么样的rect,'xMidYMid slice'(为了扩大填充矩形,如果方面不匹配可能会剪掉一些部分),'xMidYMid meet'(这是默认值,与未指定pAR相同)完全,并且意味着内容将居中并且如果方面不匹配将在一个方向溢出。)

答案 1 :(得分:21)

http://jsfiddle.net/vnTQT/

    var paper = Raphael("wrap");
    paper.setViewBox(0,0,w,h,true);
    paper.setSize('100%', '100%');

将此(paper.setViewBox)与paper.setSize('100%','100%')一起使用并调整窗口大小,调整svg内容的大小,而不使用svg函数。

答案 2 :(得分:4)

我想我找到了一个解决方案:以下代码将在重新调整窗口大小时重新调整所有元素,这就是我正在寻找的内容

            var w = $(window).width();
            var h = $(window).height();
            function draw(w, h) {
                var paper = Raphael($('#wrap').attr('id'), w, h);
                paper.setViewBox(0, 0, 1500, 1500, true);
                var rec = paper.rect(0, 0, 200, 200).attr({ stroke: 'black' });
                var cir = paper.circle(100, 100, 50);
            };
            draw(w, h);
            function resize() {
                var xw = $(window).width();
                var xh = $(window).height();
                draw(xw, xh)
            }
            $(window).resize(resize);
来自@ErikDahlström的参考: Paper.setViewBox(x, y, w, h, fit) AND ‘viewBox’ attribute

答案 3 :(得分:2)

您可以在我之前使用过此脚本后使用此脚本:

http://www.shapevent.com/scaleraphael/

Checkout填充窗口 - 没有用于调整画布大小的剪切示例:

http://www.shapevent.com/scaleraphael/demo1.html

答案 4 :(得分:0)

如果您有一组要调整大小的元素,可以直接在js代码中使用...

sudo apt-get install python-pip
pip install virtualenv
# optional 
# pip install virtualenvwarpper

...以及在浏览器调整大小时重新加载页面的功能:

for (var i = 0; i < your_set.length; i++) {
    your_set[i].scale(ratio, ratio, 0,0);
};