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

【问题标题】：How Can i scale Raphael js elements on window resize using jquery如何使用 jquery 在窗口调整大小时缩放 Raphael js 元素
【发布时间】：2012-06-25 22:40:27
【问题描述】：

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

考虑以下代码 /DEMO 如果我重新调整窗口大小，则仅 div container 缩放，因为我将其宽度设置为窗口宽度的 50%，并且没有（rect、circle 或 @987654326 @) 改变

代码

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

【问题讨论】：

标签： jquery svg raphael html5-canvas

【解决方案1】：

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

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

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

【讨论】：

你能把这个编辑到我的jsfiddle吗，我真的很感激，因为我真的不知道该怎么做
警告：这可能不适用于 VML 后端（IE8 及更低版本），请测试。
埃里克，你的小提琴不工作了（不再）。删除宽度和高度根本不会呈现任何内容。也就是说，您实际上不需要删除任何内容，而是在调整窗口大小时调整画布大小。作为一个快速测试，您可以在创建论文后将paper.setSize(300, 200); 添加到您的小提琴中，以查看它是否立即缩放。但是请注意，setViewBox() 只有一个用于缩放的布尔参数，因此不会公开所有 SVG 缩放选项。但是，您可以在事后轻松分配不同的选项，例如：paper.canvas.setAttribute('preserveAspectRatio', 'xMidYMid meet');
@mklement 它仍然有效（firefox，opera），看起来 webkit 最近更改/损坏了（尝试jsfiddle.net/AUNwC/44，它也在 CSS 中设置 svg 宽度/高度，然后你会得到一些东西webkit 也是）。您当然可以按照您的建议进行手动调整大小，但支持 svg 的浏览器实际上不需要它 - 只需给它一个 viewBox 和一个要呈现的区域（使用 CSS），它就会以该大小呈现。跨度>
谢谢，埃里克。结果表明，您的 CSS 修复消除了删除 width 和 height 属性的需要 - 仅基于此，缩放以跨浏览器方式工作，即使存在显式属性也是如此。我已经分叉了你的小提琴并在这里添加了更多 cmets：jsfiddle.net/mklement/7rpmH 为了更好的跨浏览器测试，我还通过明确指定拉伸/收缩而不保留纵横比 (preserveAspectRatio='none') 来解决 Raphael 错误。缩放然后在当前版本的 Chrome、Safari、FF、Opera 中工作 - 遗憾的是，在不同程度上 - 见小提琴。

【解决方案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 内容大小的窗口大小。

【讨论】：

但不幸的是高度似乎适合屏幕，它涵盖了页面中的其他内容:(。有人有解决这个问题的方法吗？jsfiddle.net/vnTQT/22
设置一个'最大高度：300px;'或 svg 或其容器上的任何内容对我有用。

【解决方案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’ attribute

【讨论】：

【解决方案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(); 
});

【讨论】：