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("canvas").add(img);

那么它能正常工作。 但是如果这一行被注释掉，似乎图片就无法加载。有什么想法吗？

- Basic Coder

Answer 1

为了触发图像加载，需要将Image小部件添加到页面中。只需使其不可见即可：

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

- kjohnson

---

这对我有用，只是我必须将img.setVisible(false);放在onLoad里面。 - Craigo

Answer 2

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

- Stephane Grenier

Answer 3

如果您想避免需要将图像添加到页面以加载（这可能会导致图像在页面上闪烁），则可以使用本机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() {
        [e-mail]::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);
    });
}       

- Craigo

Answer 4

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

- fgb