在 GWT 中将小部件（按钮）添加到 HTML5 画布答案

【问题标题】：Add a widget (button) to HTML5 canvas in GWT在 GWT 中将小部件（按钮）添加到 HTML5 画布
【发布时间】：2011-11-28 11:05:35
【问题描述】：

在 smartGWT 中，可以将另一个小部件（似乎使用界面）添加到 HTML5 画布中，正如您在 this example 中看到的那样。

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

感谢您的所有回答。

【问题讨论】：

我知道这是一个老问题，但为了其他读者：链接示例中的 Canvas 属于 SmartGWT，与 HTML5 Canvas 无关。
@targumon：恕我直言，这个 SmartGWT-Canvas 是基于常规 HTML5-Canvas 和定制的。
Erik，这不是意见问题 :-D 只需在现代浏览器中检查它 - 当您使用 com.smartgwt.client.widgets.Canvas 时，这在您给出的 java2s.com 示例中就是这种情况，生成的 DOM 对象是一个 DIV 标记：例如
...
仅当您使用 com.google.gwt.canvas.client.Canvas.createIfSupported() 时，你会得到一个

标签： html gwt html5-canvas gwt2

【解决方案1】：

HTML5 画布尚不在 GWT 的范围内，但也许您可以使用 GWT dom API 在您的 dom 中构建 que 等效元素并通过 JSNI 调用将其绘制

【讨论】：

我不同意。随着 GWT 2.2 谷歌添加了对 HTML5 画布的实验性支持。在 GWT 2.4 中，GWT 正式支持画布（参见：code.google.com/intl/de-DE/webtoolkit/doc/latest/…）。 JSNI 也许是一个解决方案——你有一个可行的例子吗？ ;)

【解决方案2】：

感谢 Erik，我注意到最近在 GWT 2.4 中发布了 canvas

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

【讨论】：

【解决方案3】：

据我所知，您不能在画布中放置任意小部件。您可以做的是绘制图像。所以我猜你提到的 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);
    }

}

【讨论】：

我不同意——看例子。您可以在画布上的小部件上注册 MouseHandler。如何在我习惯的画布中绘制图像，这不是答案。
现在我不是 SmartGWT 专家，但是查看 SmartGWT 项目中的 Canvas 代码，我认为 SmartGWT Canvas (code.google.com/p/smartgwt/source/browse/trunk/main/src/com/…) 与 HMLT5 Canvas 没有任何关系。 SmartGWT Canvas 只是命名为 Canvas...
我再次不同意：SmartGWT 的 Canvas 是 BaseWidget 的继承，BaseWidget 又是普通 GWT-Widget 的继承。 SmartGWT-Canvas 包含一个名为“create”的 JSNI 方法，它调用 HTML5-canvas 的普通 JS 创建函数。另外：我认为创建自己的浏览器小部件是不可能的，而不是基于 HTML 定义支持的任何默认小部件。

【解决方案4】：

您需要的是按钮的 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;
}

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

干杯

【讨论】：