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

前端之家收集整理的这篇文章主要介绍了如何使用jquery在窗口调整大小上缩放Raphael js元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何在窗口更换时重新调整Raphael画布内的所有元素?

考虑下面的代码/ DEMO如果我重新调整我的窗口大小只调整div容器,因为我将其宽度设置为窗口宽度的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,400,300).attr({stroke: 'black' }) ; 
var path = paper.path("M 200 100 l 100 0 z") ; 
var cir = paper.circle(50,50,40);

解决方法

如果您使用Raphaël2.0或更高版本,则可以选择调用 paper.setViewBox来设置坐标系,然后让浏览器自动处理调整大小。

更新:好的,事实证明,Raphaël的自动缩放程度比我想象的要低一些……无论如何,这是一个example(raphaël仍在根上设置绝对宽度/高度< svg>,所以它们需要被移除才能正常svg缩放发生)。然后由CSS决定大小,svg恰好适合给定的区域。可以调整这个以处理溢出的内容,这可能是由于svg viewBox的纵横比与它所放置的CSS框不匹配而发生的。您可以通过向根svg元素添加preserveAspectRatio属性来完成此操作。

您可以阅读有关可以在svg preserveAspectRatio属性here上设置的值的更多信息,但可能感兴趣的三个值是’none'(用于压缩/拉伸以适合任何矩形),’xMidYMid slice'(按比例)填充矩形,如果方面不匹配可能会剪掉某些部分),’xMidYMid meet'(这是默认值,与完全没有指定pAR相同,意味着内容将居中并且会溢出一个如果方面不匹配则方向)。

原文链接:https://www.f2er.com/jquery/181563.html

猜你在找的jQuery相关文章