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

2021/01/21 08:51 · jquery ·  · 0评论

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

考虑下面的代码/ DEMO,如果我重新大小我的窗口只div container因为我其宽度设定为窗口宽度的50%缩放和没有(的rectcirclepath)改变

<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ël2.0版或更高版本,则替代方法是调用paper.setViewBox设置坐标系,然后让浏览器自动处理大小调整。

更新:好的,结果证明Raphaël的可自动缩放性比我想象的要少...无论如何,这是一个示例(raphaël仍在根<svg>上设置绝对宽度/高度,因此对于常规svg,需要将其删除进行缩放)。然后由CSS决定大小,而svg恰好适合给定的区域。可以对此进行调整以处理溢出的内容,这可能是由于svg viewBox纵横比与放置在其中的CSS框不匹配而发生的。您可以通过向preserveAspectRatiosvg根元素添加属性来实现。

您可以在此处阅读更多有关可以在svgpreserveAspectRatio属性上设置的值的信息,但是可能感兴趣的三个值是'none'(用于压缩/拉伸以适应给出的任何rect),'xMidYMid slice'(按比例放大以填充rect,可能会剪切如果宽高比不匹配,'xMidYMid meet'则删除一些部分)(这是默认设置,与根本不指定pAR相同,这意味着内容将居中,并且如果宽高比不匹配,则将在一个方向上溢出)。

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内容的调整大小来调整窗口大小。

我想我找到了一个解决方案:以下代码将在调整窗口大小时重新缩放所有元素,这就是我想要的

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

来自@ErikDahlström的引用:
Paper.setViewBox(x,y,w,h,fit)
'viewBox'属性

如果您有一组要调整大小的元素,则可以直接在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(); 
});
本文地址:http://jquery.askforanswer.com/woruheshiyongjqueryzaichuangkoudiaozhengdaxiaoshangsuofangraphael-jsyuansu.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!