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

Question

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

现在我正在尝试弄清楚，在（原始的）GWT2.4中是否也可能实现这一点。你们中有没有人使用GWT而没有使用任何其他项目（例如smartGWT、gwtExt、extGWT等）的工作示例？

感谢您所有的答案。

- Erik

---

我知道这是一个老问题，但为了其他读者的利益：链接示例中的Canvas属于SmartGWT，与HTML5 Canvas无关。 - targumon

@targumon：在我看来，这个SmartGWT-Canvas基于普通的HTML5-Canvas并进行了定制。 - Erik

Erik，这不是一个观点问题:-D 只需在现代浏览器中检查它 - 当您使用com.smartgwt.client.widgets.Canvas时，这是您提供的java2s.com示例中的情况，生成的DOM对象是DIV标签：例如<div id="isc_174" eventproxy="isc_Canvas_125" ...>...</div>仅当您使用**com.google.gwt.canvas.client.Canvas.createIfSupported()**时，您将获得<canvas>标记（在支持的浏览器上）。 - targumon

Answer 1

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

}

- Adrian B.

---

我不同意 - 看看这个例子。你可以在画布上放置的小部件上注册一个MouseHandler。如何在画布内绘制图像，我习惯了的方法并不是答案。 - Erik

现在虽然我不是SmartGWT专家，但是看了一下SmartGWT项目中Canvas代码，我认为SmartGWT Canvas（http://code.google.com/p/smartgwt/source/browse/trunk/main/src/com/smartgwt/client/widgets/Canvas.java）与HTML5的Canvas没有任何关系。 SmartGWT Canvas只是名字叫Canvas... - Adrian B.

我再次不同意：SmartGWT的Canvas是BaseWidget的继承，而BaseWidget又是普通GWT-Widget的继承。SmartGWT-Canvas包括一个名为“create”的JSNI方法，该方法调用HTML5-canvas的普通JS create函数。此外：我认为无法创建基于任何默认小部件之外的自定义浏览器小部件，HTML定义仅支持默认小部件。 - Erik

Answer 2

HTML5画布目前还不在GWT的范围内，但是你可以使用GWT dom API在你的DOM中构建相应的元素，并通过JSNI调用进行绘制。

- François Wauquier

---

我不同意。随着GWT 2.2的推出，谷歌增加了对HTML5画布的实验性支持。在GWT 2.4中，画布得到了官方支持（请参见：http://code.google.com/intl/de-DE/webtoolkit/doc/latest/DevGuideHtml5.html）。JSNI可能是一个解决方案 - 你有一个可行的例子吗？;) - Erik

Answer 3

感谢Erik，我注意到GWT 2.4中canvas的最新版本已经发布。

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

- François Wauquier

Answer 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;
}

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

谢谢

- Jacek Kwiecień