Question

我不需要指定Raphael画布的宽度和高度，而是需要100％的容器大小。所以我可以做一个Raphael（“容器”，containerElement.width，containerElement.height）并设置onresize函数来重置这些值。但随着我调整窗口或容器的大小，内容变得非常紧张和忙乱，因为滚动条（我想要它，如果它变得太小）闪烁进出。

这是将Raphael的画布绑定到容器的完整尺寸的正确方法吗？我还想提供让Raphael画布“全屏”占据整个浏览器窗口的选项。

Answer 1

如果您使用div，则可以使用CSS将其设置为宽度和高度的100％。然后使用Raphael("container", "100%", "100%")

至于全屏显示，大多数浏览器都有命令执行此操作。所以，如果你真的做100％，那么按下命令按钮，例如（在Firefox中的F11）它将变为全屏。

Answer 2

Raphael("container", "100%", "100%");会将画布填充到DIV容器的宽度/高度。这适用于Chrome和Safari。要让Firefox加入，你需要在css中给body和html 100％宽度/高度，否则矢量将被剪裁。

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

此解决方案是跨浏览器和移动安全的，因此您可以使用它来整合响应式设计。通过以if语句的形式为javascript添加视口宽度或高度的警告，您可以根据相同的变量定义所有形状。

Raphael帆布填充容器div

3 个答案: