Raphael画布如何填充一个容器div

Question

不要指定 Raphael 画布的宽度和高度，而是需要它与其容器的大小相同。因此，可以使用 Raphael("container", containerElement.width, containerElement.height) 并设置 onresize 函数以重置这些值。但是，当调整窗口或容器大小时，内容会变得很跳动和忙乱，因为滚动条（如果太小则需要）会在存在和不存在之间闪烁。

这是否是将 Raphael 的画布绑定到容器的全尺寸的适当方法？我还想提供选项，使 Raphael 画布可以“全屏”，占据整个浏览器窗口。

- at.

Answer 1

如果您正在使用

，则可以使用CSS将其设置为100％的宽度和高度。然后，您可以使用Raphael（“container”，“100％”，“100％”） 至于如何使其全屏，大多数浏览器都有一个命令来执行此操作。因此，如果您真的要做到100％，那么当您按下命令按钮，例如（在Firefox中为F11），它将变为全屏。

- Adam Holmes

---

我从阅读文档和他们在 Google 群组讨论论坛中的其他帖子中得出的印象是，在 Raphael 构造函数中必须输入数字（表示像素数），而不是百分比。我会尝试一下，谢谢。关于全屏，我只是指浏览器窗口的全屏，所以 100％，100％ 将允许实现这一点。 - at.

Raphael文档显示使用特定的尺寸，但是使用百分比也可以，这是我个人的经验。我假设您已经了解了Raphael文档，但如果您不了解，这里是一个链接：http://raphaeljs.com/reference.html - Adam Holmes

谢谢Adam，看起来这就是答案！我已经阅读了文档，但它明确说明我们必须在那里放置一定数量的像素。 - at.

谢谢您的回答。我也查了在线参考资料，它说我们必须输入一个数字。 - Curious2learn

“100%” 在Safari和Chrome上都可以正常工作，但在Firefox上似乎不能。 - Gant

需要注意的是，应该使用 ("container") - 不需要使用 ("#container")、$("#container") 或者 (document.getElementById("container"))（我在使用后者的选项时遇到了麻烦）。 - terrace

Answer 2

Raphael("container", "100%", "100%");将填充DIV容器的宽度/高度。在Chrome和Safari中，这很好用。要让Firefox也支持，您需要在CSS中为body和html设置100％的宽度/高度，否则矢量图形将被裁剪。

- gnat

---

不，被接受的答案并没有提到在Firefox上100％的HTML和Body。 - supercrabtree

Answer 3

有点晚了，但我会在这里发布，供其他搜索的人参考。

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

这个解决方案是跨浏览器和移动设备安全的，所以您可以使用它来实现响应式设计。通过将视口宽度或高度的附加条件添加到您的javascript中，您可以基于相同的变量定义所有的形状。

- Jerimio