如何使用jQuery在窗口调整大小时缩放Raphael js元素

Question

如何在窗口更改时重新调整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);

​

- Mina Gabriel

Answer 1

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

更新：好吧，事实证明 Raphaël 比我想象的不太能够自动缩放...无论如何，这里有一个示例（Raphaël 仍然会在根元素的 svg 上设置绝对宽度/高度，所以需要将其移除才能进行普通的 svg 缩放）。然后通过 CSS 决定大小，svg 只是适配给定的区域。可以通过向根 svg 元素添加“preserveAspectRatio”属性来调整溢出内容，这可能是由于 svg viewBox 的纵横比与其放置到的 CSS 盒子不匹配导致的。可以通过在 svg 根元素上添加“preserveAspectRatio”属性来解决这个问题。

您可以在这里了解有关 svg “preserveAspectRatio” 属性可以设置的值，但可能感兴趣的三个值是“none”（为了挤压/拉伸以适应任何给定的矩形），“xMidYMid slice”（缩放以填充矩形，可能剪裁一些部分，如果纵横比不匹配），“xMidYMid meet”（这是默认值，与未指定 pAR 相同，意味着内容将居中，并且如果方面不匹配，则会在一个方向上溢出）。

- Erik Dahlström

---

你能帮我编辑一下这个jsfiddle吗？非常感谢，因为我不太知道该怎么做。 - Mina Gabriel

注意：这可能无法完全适用于VML后端（IE8及以下版本），请进行测试。 - Erik Dahlström

Erik，你的小提琴已经无法使用了。去除宽度和高度后，什么也没有被呈现出来。话虽如此，你实际上不需要删除任何内容，而是在窗口调整大小时_重新调整画布_。作为快速测试，你只需要在创建纸张后添加paper.setSize(300, 200);到你的小提琴中即可看到它立即扩展。然而要注意，setViewBox()只有一个布尔参数用于缩放，因此没有公开所有SVG缩放选项。但是，您可以在事后轻松分配不同的选项，例如：paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet'); - mklement0

@mklement，它仍然有效（在firefox和opera上），看起来最近webkit发生了变化/破坏（尝试使用http://jsfiddle.net/AUNwC/44/代替，它也在CSS中设置了svg的宽度/高度，那么你也可以在webkit中得到一些东西）。当然，你可以像你建议的那样手动调整大小，但实际上对于支持svg的浏览器来说并不需要 - 只需为其提供一个视口和一个渲染区域（使用CSS），它就会以那个大小呈现。 - Erik Dahlström

谢谢，Erik。事实证明你的CSS修复消除了移除width和height属性的需要 - 缩放可以跨浏览器依赖于那个，即使显式属性存在。我已经分叉了你的示例，并在这里添加了更多评论：http://jsfiddle.net/mklement/7rpmH/ 为了更好地进行跨浏览器测试，我还通过显式指定拉伸/收缩而不保持宽高比(preserveAspectRatio='none')解决了Raphael的一个bug。然后在当前版本的Chrome、Safari、FF、Opera中工作 - 不幸的是，效果有所不同 - 请参见示例。 - mklement0

Answer 2

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函数。

- Sergey Krasnikov

---

但不幸的是，高度似乎适合屏幕，覆盖了页面中的其他内容 :(. 有人有解决这个问题的方法吗？ http://jsfiddle.net/vnTQT/22/ - Mo.

在SVG或其容器上设置'max-height: 300px;'或其他值对我有效。 - r8n5n

Answer 3

我想我找到了一个解决方案：下面的代码将在调整窗口大小时重新缩放所有元素，这正是我所需要的。

            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) 和 'viewBox' 属性

- Mina Gabriel

Answer 4

如果您有一组需要调整大小的元素，您可以直接在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(); 
});

- mquantin