Невозможно достичь элемента холста вне метода обработчика

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.isAttached(), но присоединение к RootPanel будет делать это тоже), вы не можете рисовать на ней.

Он также должен иметь установленный на нем размер, поскольку изменение размера негативно повлияет на ваш контент.

Обратный порядок этих утверждений, и он должен работать как есть. Причина, по которой работает обработчик нагрузки, заключается в том, что к моменту ее вызова холст был прикреплен, поэтому его можно нарисовать.