css - domElement.getClientWidth() 和 domElement.getClientHeight() 返回 0

Question

我尝试使用标准方法通过 CssClass 获取 GWT 元素的大小，但它返回 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;
    } 

将在哪个时刻计算元素大小？我怎样才能捕获关键时刻？

Answer 1

在呈现元素之前无法确定此信息。这意味着该元素必须 a) 附加到 dom，并且 b) 允许绘制(即不是 display:none;)。请注意，您可以将其标记为 visibility:hidden;，因为这表明布局可能发生在它上面并且它可能会占用空间，但实际上不应该是可见的。

当您考虑要应用的 css 规则时，这是有道理的。如果存在由 .parent .canvasElement 选择的另一条规则会发生什么情况 - 浏览器无法判断是否应用该规则，直到元素实际位于 dom 中，因此不应用任何规则。

另一种情况 - 父元素缩放其子元素，然后将 Canvas 添加到该父元素，因此宽度由父元素修改。附加之前和之后的测量可能会产生不同的值。

具体使用您的代码，Canvas 是一个 Widget 子类，它实现了 HasAttachHandlers，因此您可以为附加事件添加处理程序以正确测量每个它附加到新上下文的时间(或者，只是第一次测量，然后删除处理程序)。