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

发布于 2024-12-07 16:39:39 字数 614 浏览 0 评论 0原文

我尝试使用标准方法使用 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;
    } 

在哪个时刻计算元素大小?我怎样才能抓住捕捉时刻?

I try to get size of GWT element with CssClass using standard methods, but it returns 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 is 0.

Css class:

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

In which moment element size will be calculated? How can i catch catch moment?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

骑趴 2024-12-14 16:39:39

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

当您考虑要应用的 CSS 规则时,这是有意义的。如果有另一个由 .parent .canvasElement 选择的规则,会发生什么 - 浏览器无法判断是否应用该规则,直到该元素实际位于 dom 中,因此不会应用任何规则。

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

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

This info can not be determined until the item is rendered. This means the item must be a) attached to the dom, and b) allowed to draw (i.e. not display:none;). Note that you may mark it as visibility:hidden;, as that indicates that layout may occur on it and that it may consume space, but shouldn't actually be visible.

This makes sense when you consider the css rule you want to apply to it. What happens if there is another rule, selected by .parent .canvasElement - the browser can't tell whether or not to apply that rule until the element is actually in the dom, so no rules are applied.

Another case - a parent element scales its children, and then you add the canvas to that parent, so the width is modified by the parent. Measuring before and after attach could yield different values.

Working specifically with the code you have, Canvas is a Widget subclass, and it implements HasAttachHandlers, so you can add a handler for the attach event to correctly measure every time it is attached to a new context (or, just measure the first time, then remove the handler).

心在旅行 2024-12-14 16:39:39

我不确定 GWT 是如何工作的,但根据我的经验,元素应该位于 DOM 结构中,然后我们才能获取其客户端宽度/高度。
根据您的代码,我认为当您尝试访问其 clientwidth() 时,canvas 元素尚未附加到 DOM。

I am not sure about how GWT work, but as i have experienced an element should be in DOM structure before we can get its clientwidth/height.
As per your code, i think the canvas element has not been appended to DOM when you are trying to access its clientwidth().

懷念過去 2024-12-14 16:39:39

画布的宽度和高度必须放在 HTML 文件中,示例:

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

Html Canvas 元素强制您将宽度和高度放在 HTML 文档中,不允许您仅将其放在 CSS 中

Canvas width and height must be put in the HTML file , Example :

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

Html Canvas element force you to put WIDTH and HEIGHT in HTML document , doesnt let you to put it only in CSS

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文