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

Question

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

考虑以下代码/DEMO如果我只调整窗口大小，因为我将其宽度设置为窗口宽度的 50%，并且没有 (rect ， circle或路径)更改

代码

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

​

Answer 1

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

更新: 好吧，事实证明 Raphaël 的自动扩展性比我想象的要差一些......无论如何，这里有一个 example (raphaël 仍然在根 preserveAspectRatio 属性来实现此目的。

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