如何在窗口更改时重新缩放 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);
最佳答案
如果您使用 Raphaël 版本 2.0 或更高版本,替代方法是调用 paper.setViewBox设置坐标系,然后让浏览器自动处理大小调整。
更新: 好吧,事实证明 Raphaël 的自动扩展性比我想象的要差一些......无论如何,这里有一个 example (raphaël 仍然在根
您可以阅读有关可在 svg preserveAspectRatio
属性 here 上设置的值的更多信息。 ,但可能感兴趣的三个值是 'none'
(用于挤压/拉伸(stretch)以适应给定的任何矩形)、'xMidYMid slice'
(放大到填充矩形,如果方面不匹配,可能会剪掉一些部分),'xMidYMid meet'
(这是默认值,与根本不指定 pAR 相同,意味着内容将居中如果方面不匹配,则会向一个方向溢出)。
关于jquery - 我如何使用 jquery 在窗口调整大小时缩放 Raphael js 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11176396/