当前位置：文江博客话题详情

在 GWT 中向 HTML5 画布添加小部件（按钮）

发布于 2024-12-07 10:03:38 字数 272 浏览 0 评论 0原文

在 smartGWT 中，可以向 HTML5 画布添加另一个小部件（似乎使用接口），如您在这个例子。

现在我想弄清楚，这在（原始）GWT2.4 中是否也可行。你们中有人有使用 GWT 的工作示例吗？没有任何其他项目（例如 smartGWT、gwtExt、extGWT，...）？

感谢您的所有回答。

原文

分享到QQ

分享到微博

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

发布评论

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

你另情深 2024-12-14 10:03:38

HTML5 canvas 还不在 GWT 的范围内，但也许您可以使用 GWT dom API 并通过 JSNI 调用

回复收藏 0 原文

草莓味的萝莉 2024-12-14 10:03:38

感谢 Erik，我注意到最近发布的画布

http://google-web -toolkit.googlecode.com/svn/javadoc/2.4/com/google/gwt/canvas/client/Canvas.html

回复收藏 0 原文

辞取 2024-12-14 10:03:38

据我所知，您不能将任意小部件放入画布中。你能做的就是绘制图像。所以我猜你提到的 smartGWT 小部件只不过是图像。

如果您有 GWT 图像对象，则可以通过以下方式在画布中绘制它：

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class ImageCanvasTest implements EntryPoint {

    public void onModuleLoad() {
        Image image = new Image(
            "http://upload.wikimedia.org/wikipedia/en/f/f6/Gwt-logo.png");

        Canvas canvas = Canvas.createIfSupported();
        canvas.getContext2d().drawImage(
        ImageElement.as(image.getElement()), 0, 0);

        RootLayoutPanel.get().add(canvas);
    }

}

As far as I know, you can not put arbitrary widget in a canvas. What you can do is draw images. So I guess the smartGWT widgets you refere to are nothing else but images.

If you have a GWT image object, this is how you get it to be drawn in a canvas:

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootLayoutPanel;

public class ImageCanvasTest implements EntryPoint {

    public void onModuleLoad() {
        Image image = new Image(
            "http://upload.wikimedia.org/wikipedia/en/f/f6/Gwt-logo.png");

        Canvas canvas = Canvas.createIfSupported();
        canvas.getContext2d().drawImage(
        ImageElement.as(image.getElement()), 0, 0);

        RootLayoutPanel.get().add(canvas);
    }

}

回复收藏 0 原文

怪我入戏太深 2024-12-14 10:03:38

您需要的是按钮的 CSS 样式。像这样的样式：

button {
    position:absolute;
    z-index:2;  
}

button.zoomOut {
    top:200px;
    left:265px;
    font-size: 30px;
    margin-left:auto;
    margin-right:auto;
}

button.zoomIn {
    top:200px;
    left:400px;
    font-size: 30px;
    margin-left:auto;
    margin-right:auto;
}

使用绝对位置，您可以将它们放置在屏幕上的任何位置。

干杯

What you need is a CSS style for your buttons. A style like this:

button {
    position:absolute;
    z-index:2;  
}

button.zoomOut {
    top:200px;
    left:265px;
    font-size: 30px;
    margin-left:auto;
    margin-right:auto;
}

button.zoomIn {
    top:200px;
    left:400px;
    font-size: 30px;
    margin-left:auto;
    margin-right:auto;
}

With absolute position you're able to put them anywhere on the screen.

Cheers

回复收藏 0 原文

~没有更多了~