如何在GWT中制作全窗口画布?

发布于 2024-11-07 16:55:16 字数 409 浏览 0 评论 0原文

我正在使用内置画布小部件 (javadoc) 并想知道如何让它占据整个浏览器窗口。
我尝试设置 100% 宽度和高度,并删除 body、html 和 canvas 的所有填充和边距。
我有 3 个问题:
1.我检查了chrome的开发工具,clean.css似乎覆盖了myproject.css
2. 即使在这些CSS规则并在开发工具中删除了正文上的边距之后,仍然有一个垂直滚动条。
3. 我对画布坐标空间与实际像素大小无关这一事实感到有点挣扎。鼠标事件给我像素位置。有没有办法获取坐标空间“像素”中的事件?

I am using the built in canvas widget (javadoc) and wondering how to make it take the full browser window.
I tried setting 100% width and height and removing all padding and margins, for body,html and canvas.
I have 3 problems:
1. I checked with chrome's dev tools and the clean.css seems to override myproject.css
2. Even after those css rules and removing the margin on the body in the dev tools, there is still a vertical scrollbar.
3. I struggle a bit with the fact that the canvas coordinate space is independent of actual pixel size. The mause events give me pixel location. Is there a way to get events in coordinate space "pixels"?

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

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

发布评论

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

评论(1

肥爪爪 2024-11-14 16:55:16

经过又 4 个小时的摆弄,我找到了答案,并决定分享:
1. 我发现我用来加载CSS的方式是已弃用,因此我使用 客户端捆绑
2. 这是我的主要问题,通过显式禁用滚动条解决

    Window.enableScrolling(false);

。 3. 仅设置坐标空间将自动调整像素大小。

所以基本上对于一个完整的窗口画布:100% 宽度和高度以及 html 和 body 的 css 中的 0px 边距。在调整大小事件中将坐标空间调整为客户端大小,并显式禁用滚动条。

After another 4 hours of fiddling I found the answer, and decided to share:
1. I saw that the way i used to load css was deprecated so i used client bundle
2. This was my main problem, solved by explicitly disabling scrollbars

    Window.enableScrolling(false);

3. setting just the coordinate space will automatically adjust pixel size to it.

So basically for a full window canvas: 100% width and height and 0px margin in css for html and body. Adjusting coordinate space to client size in the on resize event and explicitly disabling scorllbars.

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