2011-10-01 3 views
0

표준 메서드를 사용하여 CssClass로 GWT 요소의 크기를 가져 오려고하지만 0을 반환합니다.domElement.getClientWidth() 및 domElement.getClientHeight() return 0

Canvas canvas = Canvas.createIfSupported(); 
    if(canvas == null){ 
     /*alert code*/ 
    } 
    Element e = canvas.getElement(); 
    canvas.getElement().setClassName(canvasElement); 
    Context2d context = canvas.getContext2d(); 

    int clientWidth = e.getClientWidth(); 
    /*draw logic there*/ 

clientWidth은 0

CSS 클래스가있다 :

.canvasElement{ 
     position: absolute; 
     left:10px; 
     top:10px; 
     width:40px; 
     height:30px; 
    } 

되는 순간 소자 크기가 계산 될 것인가? 어떻게 잡을 순간을 잡을 수 있습니까? 캔버스의 폭과 높이가 HTML 파일에 넣어해야

+0

Html은 캔버스 요소를 html로 가져와야합니다. –

답변

1

이 정보는 항목이 렌더링 될 때까지 확인할 수 없습니다. 즉, 항목이 a) dom에 연결되어 있고 b) 그릴 수 있어야합니다 (즉, display:none;이 아님). visibility:hidden;으로 표시 할 수 있습니다. 레이아웃은 레이아웃을 나타낼 수 있으며 공간을 소비하지만 실제로는 보이지 않아야 함을 나타냅니다.

적용하려는 CSS 규칙을 고려하면이 의미가 있습니다. .parent .canvasElement으로 선택된 또 다른 규칙이있는 경우 어떻게됩니까? 브라우저는 요소가 실제로 dom에있을 때까지 규칙을 적용할지 여부를 알 수 없으므로 규칙이 적용되지 않습니다.

또 다른 경우 - 부모 요소가 자식을 비율 조정 한 다음 해당 부모에 캔버스를 추가하면 부모가 너비를 수정합니다. 부착 전후의 측정은 다른 값을 산출 할 수 있습니다.

Canvas은 위젯 하위 클래스이며, HasAttachHandlers을 구현하므로 첨부 이벤트가 새 컨텍스트에 첨부 될 때마다 제대로 측정되도록 처리기를 추가 할 수 있습니다 처음에는 핸들러를 제거하십시오).

0

, 예 :

<canvas id="example" width="200" height="200"> 
This text is displayed if your browser does not support HTML5 Canvas. 
</canvas> 

HTML을 캔버스 요소의 힘 당신은 CSS에 넣어 보자 나던, HTML 문서의 폭과 높이를 넣어

+0

동적으로 캔버스를 생성합니다. 나는 html 객체로 작동하지 않는다. GWT는 나를 위해 그것을한다. – hatesms

+0

캔버스가 HTML 문서에 WIDTH 및 HEIGHT를 넣으려고해도 CSS에만 넣을 수는 없습니다. –

0

GWT의 작동 방식에 대해서는 잘 모르겠지만, clientwidth/height를 얻으려면 DOM 구조에 요소가 있어야합니다. 코드에 따라 clientwidth()에 액세스하려고 할 때 캔버스 요소가 DOM에 추가되지 않았다고 생각합니다.