<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

Neil, 제가 CSS와 함께 가지고있는 문제는 오직 캔버스 크기를 변경하지 않을 때 캔버스 크기를 변경하는 것이 아니라 캔버스가있는 뷰포트를 변경하고 왜곡하는 것입니다 캔버스. 진정으로 크기를 바꾸려면 캔버스가 필요합니다. –

설명하는 효과는 브라우저 가로 스크롤 막대가 표시되는 결과입니다. 나는 이것을 원하지 않는다. –

캔버스가 양 방향으로 조정할 수 있습니다 : 성장과 축소

다음은 샘플 코드입니다.

내가 자주 그렇게하지만 난 항상 (테이블이 참여하고 특히)에서만 작동하는 것은 폭과 높이를 모두 100 % 치수를주고 용기를 조정할 것을 발견 (그것을가 수 td 또는 div) A의 고전적인 방법.

뷰포트 크기가 캔버스 크기와 다른 문제를 피하기 위해 항상 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>을 얻을 수 없다.

답변

관련 문제