拉斐爾帆布填充集裝箱格

而不是指定拉斐爾帆布的寬度和高度，我需要它是100％的容器大小。所以我可以做一個Raphael（「container」，containerElement.width，containerElement.height）並設置onresize函數來重置這些值。但是，當我調整窗口或容器的大小時，內容會變得非常激動和興奮，因爲滾動條（如果它變得太小，我想要的）閃爍並且不存在。拉斐爾帆布填充集裝箱格

這是將Raphael的畫布綁定到容器大小的正確方法嗎？我還想提供讓Raphael畫布「全屏」佔據整個瀏覽器窗口的選項。

來源

2010-11-15 at.

如果您使用的是div，那麼您可以使用CSS將其設置爲100％的寬度和高度。然後你使用Raphael("container", "100%", "100%")

至於使其全屏，大多數瀏覽器都有一個命令來做到這一點。所以如果你真的在做100％，那麼當你按下命令按鈕時，例如（F11在Firefox中）它將成爲完整的屏幕。

來源

2010-11-15 10:35:31

我通過閱讀文檔和其他文章在他們的谷歌組討論論壇中得到了印象，你必須在Raphael構造函數中輸入一個數字（像素數量），而不是百分比。我會盡力的，謝謝。關於全屏，我只是指瀏覽器窗口的全屏，所以100％，100％都會允許。 – 2010-11-15 17:51:02

拉斐爾文檔顯示使用特定的大小，但使用百分比確實有效，從自我經驗。我假設你知道拉斐爾文檔，但是如果你不知道這裏有一個鏈接：http://raphaeljs.com/reference.html – 2010-11-15 23:56:47

謝謝亞當，看起來這就是答案！我閱讀了文檔，但它明確表示我們必須在其中放置許多像素。 – 2010-11-16 03:41:06

Raphael("container", "100%", "100%");會將畫布填充到DIV容器的寬度/高度。這在Chrome和Safari中運行良好。爲了獲得Firefox，您需要在CSS中給body和html 100％寬度/高度，否則矢量將被剪裁。

來源

2012-02-14 05:57:17 gnat

與接受的答案不一樣嗎？ – 2012-02-14 08:17:24

不，接受的答案並沒有說任何關於firefox上的100％HTML和body – supercrabtree 2014-03-28 07:10:36

這個有點晚，但我會在這裏發佈給其他人搜索。

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添加視口寬度或高度警告，您可以基於相同的變量定義所有形狀。

來源

2013-07-25 02:17:19 Jerimio

拉斐爾帆布填充集裝箱格

回答

相關問題