Raphael.js爲什麼我的畫布尺寸沒有隨着瀏覽器窗口大小的改變而改變？

我想根據瀏覽器窗口的寬度變化來調整我的raphael畫布區域的寬度，但是我的代碼沒有按預期工作。以下代碼顯示我的嘗試：Raphael.js爲什麼我的畫布尺寸沒有隨着瀏覽器窗口大小的改變而改變？

我的index.html頁：

<body> 
    <div class="my-canvas"> 

    <script src="js/jquery-1.5.1.js"></script> 
    <script src="js/raphael.js"></script> 
    <script src="js/myWin.js"></script> 
    <script src="js/myRaphaelApp.js"></script> 
</body>

我的CSS定義我的畫布的初始大小：

.my-canvas { 

    width: 50%; 
    height:800; 

}

我有myWin.js它可以得到當前瀏覽器窗口的寬度，a

myWin.js

myWin = function(){ 


    var width=$('.my-canvas').width()*0.5; 

    $(window).resize(function() { 
     width=$('.my-canvas').width()*0.5; //update the width as browser window size is changing 


    }); 



    return { 
     getWidth: function(){ 
      $(window).resize(); 
      return width; 
     } 
     }; 
}();

開始呈現拉斐爾這裏：ND通過調用jQuery函數$(window).resize(...)監聽瀏覽器窗口大小變化

myRaphaelApp.js

myRaphaelApp = function(){ 


    var width = myWin.getWidth(); //get the width of the current browser 



    return { 
     startRender: function(){ 


      paper = Raphael("graph", width, height); //width is not updated... 
         var c = paper.rect(10, 10, 50, 50); 

     }; 
}();

當我在一個小尺寸的瀏覽器窗口中啓動我的應用程序時，該圓圈被繪製，並且raphael畫布的初始browswer窗口的寬度爲* 0.5，然後我最大化browswer窗口，我期待着我的raphael畫布寬度會隨着瀏覽器窗口最大化而增加，但畫布保持與初始大小相同。我錯在哪裏？

來源

2011-05-30 Leem

拉斐爾代碼有沒有跟蹤的「寬度」的變量，你維護的更新值的方式。初始化圖形時，只傳入「width」的* current *值的副本。此後，除非您在自己的「resize（）」處理程序中明確更新，否則Raphael沒有與您的代碼聯繫。 – Pointy 2011-05-30 15:45:23

您沒有關閉您的<div class="my-canvas">標記。
您的CSS高度標記沒有計量單位（例如px或em）。
除非您的width變量具有魔力，否則您不會使用$(window).resize鉤子更新任何元素的寬度。您只是將寬度變量設置爲<div class="my-canvas">的一半寬度。

來源

2011-05-30 15:48:56 coreyward

謝謝，但我正在尋找一個解決方案（一種更好的方法來擺脫我的問題） – Leem 2011-05-30 15:49:57

正如你希望我把你插入矩陣，所以你不必知道你在做什麼（錯誤的）？ – coreyward 2011-05-30 15:51:23

正如我所說，謝謝，我注意到你已經說過了，我現在也試圖擺脫這個問題，但其他人的解決方案是我也想看到的，這並不意味着我不想學習，但學習。 – Leem 2011-05-30 15:54:56

創建你的論文是這樣的：

paper = Raphael("graph", "100%", "100%");

來源

2013-03-25 22:57:01

Raphael.js爲什麼我的畫布尺寸沒有隨着瀏覽器窗口大小的改變而改變？

回答

相關問題