24

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

考虑以下代码/演示，如果我重新调整窗口的大小div container，因为我将其宽度设置为窗口宽度的 50%，并且 (rect或circle)都没有path改变

代码 

<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);

​</p>

4

4 回答 4

31

如果您使用 Raphaël 2.0 或更高版本，另一种方法是调用paper.setViewBox来设置您的坐标系，然后让浏览器自动处理调整大小。

更新：好的，事实证明 Raphaël 的自动伸缩性比我想象的要小...无论如何，这是一个示例（raphaël 仍然在根 <svg> 上设置绝对宽度/高度，因此需要将它们删除以用于正常 svg缩放发生）。然后由 CSS 决定大小，并且 svg 正好适合给定的区域。可以对其进行调整以处理溢出的内容，这可能是由于 svg viewBox 纵横比与放置它的 CSS 框不匹配而发生的。为此，您可以preserveAspectRatio向根 svg 元素添加一个属性。

您可以在此处preserveAspectRatio阅读有关可以在 svg属性上设置的值的更多信息，但可能感兴趣的三个值是（用于挤压/拉伸以适应给定的任何矩形），（按比例放大以填充矩形，可能是剪裁如果方面不匹配，则删除某些部分），（这是默认设置，与根本不指定 pAR 相同，并且意味着内容将居中并在方面不匹配时向一个方向溢出）。'none''xMidYMid slice''xMidYMid meet'

于 2012-06-25T14:08:25.130 回答
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 内容大小的窗口大小。

于 2013-02-11T09:50:37.460 回答
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);

来自@Erik Dahlström 的参考： Paper.setViewBox(x, y, w, h, fit) AND 'viewBox' 属性

于 2012-06-25T17:52:21.743 回答
0

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

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

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

window.addEventListener('resize', function () { 
    "use strict";
    window.location.reload(); 
});
于 2016-02-14T21:26:29.327 回答