domElement.getClientWidth（）和domElement.getClientHeight（）返回0

我嘗試使用標準方法獲取CssClass的GWT元素的大小，但它返回0;domElement.getClientWidth（）和domElement.getClientHeight（）返回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; 
    }

在哪個時刻元件尺寸將被計算的？我如何捕捉瞬間？

來源

2011-10-01 hatesms

Html需要您將canvas元素轉換爲html –

直到項目被渲染才能確定此信息。這意味着該物品必須是a）附屬於dom，並且b）允許抽取（即不是display:none;）。請注意，您可能會將其標記爲visibility:hidden;，因爲這表示可能會在其上發生佈局，並且可能會佔用空間，但實際上不應該可見。

當你考慮你想應用的css規則時，這是有意義的。如果存在另一個規則（由.parent .canvasElement選擇），會發生什麼情況 - 瀏覽器無法確定是否應用該規則，直到該元素實際位於dom中，因此不會應用規則。

另一種情況 - 父元素縮放它的子元素，然後將畫布添加到該父元素，所以寬度由父元素修改。在附着之前和之後測量可能會產生不同的值。

與你的代碼具體工作，Canvas是一個Widget的子類，它實現了HasAttachHandlers，這樣你就可以添加一個處理程序把事件正確測量每次連接到一個新的環境時（或者，只是衡量第一次，然後刪除處理程序）。

來源

2011-10-02 00:43:11

畫布寬度和高度必須放在HTML文件，例如：

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

HTML畫布元素力量你把WIDTH和HEIGHT HTML文檔中，犯規讓你把它只有在CSS

來源

2011-10-01 12:55:03

我動態生成畫布。我不使用html對象。 GWT爲我做。 – hatesms

Canvas強制你在HTML文檔中放置WIDTH和HEIGHT，不會讓你只把它放在CSS中 –

我不確定GWT是如何工作的，但正如我所經歷的一個元素應該在DOM結構中才能得到它的客戶端寬度/高度。根據您的代碼，我認爲當您嘗試訪問其clientwidth（）時，canvas元素未被附加到DOM。

來源

2011-10-01 14:59:27 asandeep

domElement.getClientWidth（）和domElement.getClientHeight（）返回0

回答

相關問題