javascript 拉斐尔画布填充容器 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4183419/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Raphael canvas filling a container div
提问by at.
Instead of specifying the width and height of a Raphael canvas, I need it to be 100% the size of its container. So I could just do a Raphael("container", containerElement.width, containerElement.height) and set the onresize function to reset those values. But then the content gets very jumpy and hectic as I resize the window or container because the scrollbars (which I want if it gets too small) flash in and out of existence.
我不需要指定 Raphael 画布的宽度和高度，而是需要 100% 为其容器的大小。所以我可以做一个 Raphael("container", containerElement.width, containerElement.height) 并设置 onresize 函数来重置这些值。但是当我调整窗口或容器的大小时，内容会变得非常紧张和忙碌，因为滚动条（如果它太小我想要）会出现和消失。
Is this the proper way to bind Raphael's canvas to the full size of a container? I'd also like to provide the option to make the Raphael canvas "full screen" taking up the entire browser window.
这是将拉斐尔的画布绑定到容器的全尺寸的正确方法吗？我还想提供使 Raphael 画布“全屏”占据整个浏览器窗口的选项。
回答by Adam Holmes
If you are using a div then you could use CSS to set that to 100% of the width and height. You then use the Raphael("container", "100%", "100%")
如果您使用的是 div，那么您可以使用 CSS 将其设置为宽度和高度的 100%。然后你使用Raphael("container", "100%", "100%")
As for making it full screen, most browsers have a command to do this. So if you really are doing 100% then when you press the command button e.g. (F11 in firefox) it will become FULL screen.
至于使其全屏显示，大多数浏览器都有一个命令来执行此操作。因此，如果您真的是 100%，那么当您按下命令按钮（例如（firefox 中的 F11））时，它将变成全屏。
回答by gnat
Raphael("container", "100%", "100%");will fill the canvas to width/height of the DIV container. This works fine in Chrome and Safari. To get Firefox on board you'll need to give body and html 100% width/height in the css, otherwise the vector will be clipped.
Raphael("container", "100%", "100%");将画布填充到 DIV 容器的宽度/高度。这在 Chrome 和 Safari 中运行良好。要使用 Firefox，您需要在 css 中为 body 和 html 提供 100% 宽度/高度，否则矢量将被剪裁。
回答by Jerimio
A little bit late on this one but I'll post here for other people searching.
这个有点晚了，但我会在这里发帖供其他人搜索。
var h = $('container').height(); //get the container height into variable h
var w = $('container').width(); //get the container width into variable w
//set your Raphael canvas to the variables
var contpaper = Raphael("container", w, h);
var doit;
//function to reload the page and/or do other adjustments
function resizedw(){
document.location.reload()
}
//call function 200 ms after resize is complete.
$(window).resize(function(){clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
}, 200)});
This solution is cross browser and mobile safe so you can use this to incorporate responsive design. By adding caveats for viewport width or height to your javascript in the form of if statements, you can define all of your shapes based on the same variables.
此解决方案是跨浏览器和移动安全的，因此您可以使用它来整合响应式设计。通过以 if 语句的形式向 javascript 添加视口宽度或高度的警告，您可以根据相同的变量定义所有形状。
