如何使用jquery在窗口resize上缩放Raphael js元素

如何在窗口更换时重新调整Raphaelcanvas内的所有元素？

考虑下面的代码/ 演示如果我重新调整我的窗口大小只有div container缩放，因为我将其宽度设置为窗口宽度的50％而没有（ rect ， circle或path ）更改

码

 
​ #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ël2.0或更高版本，则可以选择调用paper.setViewBox来设置坐标系，然后让浏览器自动处理resize。

更新：好的，事实certificateRaphaël的自动缩放程度比我想象的要小……无论如何，这是一个例子 （raphaël仍然在根preserveAspectRatio属性来完成此操作。

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

Answer 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函数。

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

来自@ErikDahlström的参考： Paper.setViewBox（x，y，w，h，fit） 和 ‘viewBox’属性

Answer 4

我之前使用过你可以使用这个脚本：

http://www.shapevent.com/scaleraphael/

Checkout填充窗口 – 没有用于调整canvas大小的剪切示例：

http://www.shapevent.com/scaleraphael/demo1.html

Answer 5

如果你有一组要resize的元素，你可以直接在你的js代码中使用…

 for (var i = 0; i < your_set.length; i++) { your_set[i].scale(ratio, ratio, 0,0); }; 

...以及在浏览器resize时重新加载页面的function：

 window.addEventListener('resize', function () { "use strict"; window.location.reload(); });