java - 无法在处理程序方法之外访问 Canvas 元素

Question

伙计们，我一直在努力找出问题所在。终于我找到了我卡住的地方。以下代码是我的项目的片段，显示了唯一的问题。这是我的 EntryPoint 类:

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.RootPanel;
import com.madmax.client.gameservice.GWTService;
import com.madmax.client.gameservice.GWTServiceAsync;
import com.madmax.client.resources.ResourceManager;
import com.madmax.client.resources.images.cards.LandCardResources;


public class AltEntryPoint implements EntryPoint {


    public AltEntryPoint() {
    }

    public static GWTServiceAsync getService() {


        return GWT.create(GWTService.class);
    }
    private final Canvas canvas= Canvas.createIfSupported();
    private final Context2d ctx = canvas.getContext2d();



    @Override
    public void onModuleLoad() {
        final ResourceManager resourceManager = new ResourceManager(1000, 1000);
        Button b1 = new Button("Click", new ClickHandler() {

            @Override
            public void onClick(ClickEvent event) {
                                ctx.drawImage(resourceManager.getResourceCanvas().getCanvasElement(), 0, 0);
            }
        });

        resourceManager.loadImgResource(LandCardResources.INSTANCE.getHellHorseKnight(), "knight", 0, 0);
        resourceManager.loadImgResource(LandCardResources.INSTANCE.getMeadow(), "meadow", 150, 150);


        canvas.setWidth(500 + "px");
        canvas.setHeight(500 + "px");
        canvas.setCoordinateSpaceWidth(500);
        canvas.setCoordinateSpaceHeight(500);

                 RootPanel.get().add(resourceManager.getResourceCanvas());
                 ctx.drawImage(resourceManager.getResourceCanvas().getCanvasElement(), 0, 0);
                 RootPanel.get().add(canvas);
                 RootPanel.get().add(b1);

    }

}

这是我的 ResourceManeger 类

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.event.dom.client.LoadEvent;
import com.google.gwt.event.dom.client.LoadHandler;
import com.google.gwt.resources.client.ImageResource;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.RootPanel;


public class ResourceManager {

    private Canvas allImageHolderCanvas;
    private Context2d allImageHolderContext;

    public ResourceManager(int lengthDimension, int heightDimension) {
        allImageHolderCanvas = Canvas.createIfSupported();
        allImageHolderCanvas.setWidth(lengthDimension + "px");
        allImageHolderCanvas.setHeight(heightDimension + "px");
        allImageHolderCanvas.setCoordinateSpaceWidth(lengthDimension);
        allImageHolderCanvas.setCoordinateSpaceHeight(heightDimension);
        allImageHolderContext = allImageHolderCanvas.getContext2d();
    }

    public void loadImgResource(ImageResource resource, String name, double sx, double sy) {
        final Image localImage = new Image(resource);
        localImage.setVisible(false);
        final String localName = name;
        final double sxVal = sx;
        final double syVal = sy;

        localImage.addLoadHandler(new LoadHandler() {

            @Override
            public void onLoad(LoadEvent event) {
                allImageHolderContext.drawImage(ImageElement.as(localImage.getElement()),
                        0, 0, localImage.getWidth(), localImage.getHeight(), sxVal, syVal, 1000, 1000);
            }
        });

        RootPanel.get().add(localImage);
    }

    public void drawImageFromMetaDb(Context2d context, double sx, double sy, double sw,
            double sh, double dx, double dy, double dw, double dh){
        context.drawImage(allImageHolderCanvas.getCanvasElement(), sx, sy, sw, sh, dx, dy, dw, dh);
    }

    public Canvas getResourceCanvas(){
        return this.allImageHolderCanvas;
    }

}

一切都很完美，除了一件事已经让我害怕了。

ctx.drawImage(resourceManager.getResourceCanvas().getCanvasElement(), 0, 0);在调用 Handler 之前不起作用。

请解释一下我哪里错了。非常感谢。

Answer 1

ctx.drawImage(resourceManager.getResourceCanvas().getCanvasElement(), 0, 0);
RootPanel.get().add(canvas);

在 Canvas 附加到文档之前(canvas.isAttached()，但附加到根面板也会执行此操作)，您无法在其上绘图。

它还必须设置大小，因为调整大小会对您的内容产生不利影响。

颠倒这些语句的顺序，它应该按原样工作。加载处理程序起作用的原因是，在调用它时， Canvas 已被附加，因此可以对其进行绘制。