不能在<table>得到<canvas>寬度

縮小我有越來越畫布元素的所需佈局頁面上的問題。我正在使用表格來進行佈局。所需的佈局是在左側有一個畫布，它是全高，另外兩個畫布在右側，一個在另一個的頂部，左側畫布的組合高度。兩個右側的畫布具有固定的寬度和高度。當瀏覽器窗口調整大小時，我希望左側畫布調整大小以佔用所有可用寬度（達到右側畫布的寬度）。我使用window.onresize事件來捕獲調整大小事件並調整左側畫布的大小。不能在<table>得到<canvas>寬度

我看到的問題是，當瀏覽器窗口寬度變大左卡瓦酒將正確調整，但無法在瀏覽器窗口的寬度變小萎縮！代碼如下。是什麼賦予了？畫布中是否存在不允許靈活調整大小的內容？

...我已經尋找一個答案，這個問題沒有運氣。希望這裏有人已經征服了這個，可以幫我一把。

下面是示例代碼：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>SO Example</title> 
     <script type="text/javascript"> 
      window.onload = function() 
      { 
       var canvas = document.getElementById("wf1"); 
       canvas.width = canvas.parentNode.clientWidth; 
       canvas.height = canvas.parentNode.clientHeight; 
      } 
      window.onresize = function() 
      { 
       var canvas = document.getElementById("wf1"); 
       canvas.width = canvas.parentNode.clientWidth; 
       canvas.height = canvas.parentNode.clientHeight; 
      } 
     </script> 

     <style type="text/css"> 
      table 
      { 
       border-collapse: collapse; 
       background-color: #ccc; 
      } 
      tr, td 
      { 
       padding: 0; 
       line-height: 0; 
       width: 100%; 
      } 
     </style> 
    </head> 

    <body> 
     <table> 
      <tr class="slot"> 
       <td> 
        <canvas id="wf1" class="wfblock" style="background-color:red;"></canvas> 
       </td> 
       <td> 
        <canvas id="pm1" style="background-color: green; width: 200px; height: 84px;"></canvas> 
        <canvas id="pm2" style="background-color: blue; width: 200px; height: 84px;"></canvas> 
       </td> 
      </tr> 
     </table> 
    </body> 
</html>

來源

2012-05-14 Bill Balloni

您是否需要使用表格？我強烈建議單獨使用css來執行此操作 – Neil

尼爾，我在CSS中遇到的問題是，當它更改畫布的大小時，它不僅僅更改畫布大小，還會更改畫布所在的視口，使其變形畫布。我需要畫布來真正改變尺寸。 –

請注意，我描述的效果會顯示瀏覽器水平滾動條。我不想要這個。 –

你的畫布，可以在兩個方向進行調整：增長和收縮。

我這樣做，經常，但我發現，始終工作（尤其是當表涉及）的唯一的事情是給了寬度和高度100點％的尺寸和調整容器（無論是td或div）在古典的方式。

爲了避免與視口的尺寸是從畫布的那些不同的問題，我總是添加一個偵聽resize事件。

使用jQuery，我通常用這種類，其中每個畫布創建繪圖器的一個實例結束：

function Grapher(options) { 
    this.graphId = options.canvasId; 
    this.dimChanged = true; // you may remove that if you want (see above) 
}; 

Grapher.prototype.draw = function() { 
    if (!this._ensureInit()) return; 

    // makes all the drawing, depending on the state of the application's model 

    // uses dimChanged to know if the positions and dimensions of drawed objects have 
    // to be recomputed due to a change in canvas dimensions 

} 

Grapher.prototype._ensureInit = function() { 
    if (this.canvas) return true; 
    var canvas = document.getElementById(this.graphId); 
    if (!canvas) { 
     return false; 
    } 
    if (!$('#'+this.graphId).is(':visible')) return false; 
    this.canvas = canvas; 
    this.context = this.canvas.getContext("2d"); 
    var _this = this; 
    var setDim = function() { 
     _this.w = _this.canvas.clientWidth; 
     _this.h = _this.canvas.clientHeight; 
     _this.canvas.width = _this.w; 
     _this.canvas.height = _this.h; 
     _this.dimChanged = true; 
     _this.draw(); // calls the function that draws the content 
    }; 
    setDim(); 
    $(window).resize(setDim); 
    // other inits (mouse hover, mouse click, etc.) 
    return true; 
};

在你的情況我想創建例如new Grapher({canvasId:'#wf1'})。

來源

2012-05-14 19:41:30

不能在<table>得到<canvas>寬度

回答

相關問題