domElement.getClientWidth() 和 domElement.getClientHeight() 返回 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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在渲染项目之前无法确定此信息。这意味着该项目必须 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 asvisibility: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 implementsHasAttachHandlers
, 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).我不确定 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().
画布的宽度和高度必须放在 HTML 文件中,示例:
Html Canvas 元素强制您将宽度和高度放在 HTML 文档中,不允许您仅将其放在 CSS 中
Canvas width and height must be put in the HTML file , Example :
Html Canvas element force you to put WIDTH and HEIGHT in HTML document , doesnt let you to put it only in CSS