gwt - GWT Canvas2D 绘制图像

Question

/**
 * This is the entry point method.
 */
public void onModuleLoad() {
    Canvas canvas = Canvas.createIfSupported();
    final Context2d context2d = canvas.getContext2d();

    RootPanel.get("canvas").add(canvas);
    Image img = new Image("face.png");
    final ImageElement face = ImageElement.as(img.getElement());
    img.addLoadHandler(new LoadHandler() {

        @Override
        public void onLoad(LoadEvent event) {
            context2d.drawImage(face, 0, 0);
        }
    });
    //RootPanel.get("canvas").add(img);
}

这是我的代码。我想将图像绘制到画布上。如果最后一行有效：

RootPanel.get("画布").add(img);

没有被注释掉。

但是随着评论的行，似乎图像不会被加载。有任何想法吗？

Answer 1

必须将图像小部件添加到页面以触发图像加载。让它不可见：

public void onModuleLoad() {    
    Canvas canvas = Canvas.createIfSupported();
    final Context2d context2d = canvas.getContext2d();

    RootPanel.get().add(canvas);
    Image img = new Image("face.png");
    final ImageElement face = ImageElement.as(img.getElement());
    img.addLoadHandler(new LoadHandler() {

        @Override
        public void onLoad(LoadEvent event) {
            context2d.drawImage(face, 0, 0);
        }
    });

    img.setVisible(false);
    RootPanel.get().add(img);
}        

Answer 2

您是否将图像放在 WEB-INF 文件夹中？这就是 GWT 从中加载图像的地方。通常建议创建一个“images”文件夹，以便您可以使用“images/face.png”加载它。

Answer 3

您可以使用图像加载器，例如：http ://code.google.com/p/google-web-toolkit-incubator/wiki/ImageLoader 。

Answer 4

如果您想避免需要将图像添加到要加载的页面（这会导致图像在页面上闪现），您可以使用原生 JavaScript 加载。

package com.mypackage;

public interface Loaded<T> {
    public void data(T data);
}

public static native void loadImageNative(String imgBase64, Loaded<ImageElement> loaded) /*-{
    var image = new Image();
    image.onload = function() {
        loaded.@com.mypackage.Loaded::data(*)(image);
    };
    image.src = imgBase64;
}-*/;

public void onModuleLoad() {    
    Canvas canvas = Canvas.createIfSupported();
    Context2d context2d = canvas.getContext2d();
    String base64Img = MyResouces.myImage().getSafeUri().asString();

    RootPanel.get().add(canvas);

    loadImageNative(base64Img, imageLoaded -> {
        context2d.drawImage(imageLoaded, 0, 0);
    });
}