gwt ClientBundle context.drawImage不显示图片？我的2D引擎

时间：2013-07-03 16:54:24

标签： image gwt canvas sprite clientbundle

我的代码没有错误，但我看不到图像。该图像与ClientBundle文件位于同一位置。抱歉，有一大堆代码。事实上，我是GWT的新手（以及Java中的新手）。我教自己。我做了调试，我看到图像已加载，所有类都已初始化，但到目前为止画布是空的。我使用NetBeans IDE 7.3。 如果有人能给我任何建议如何启动此代码，我将很高兴。 先谢谢你！

__ _ ___ ResourseInspector（没什么特别的） < / EM>的 __ _ __ _ __ _ __ _ __ 图像位于同一文件夹中。

package info.alexpi.client.engine2D;

import com.google.gwt.core.client.GWT;
import com.google.gwt.resources.client.ClientBundle;
import com.google.gwt.resources.client.ImageResource;

public interface ResourseInspector extends ClientBundle {
  public static final ResourseInspector INSTANCE = GWT.create(ResourseInspector.class); 

  @ClientBundle.Source("image1.png") 
  //GWT.getHostPageBaseURL() or GWT.getModuleBaseURL() - By the way, why it's not allowed to use here?
  ImageResource Img();

}

的 的 __ _ __ 的Point2D 的 _ < / EM> ___ 

 package info.alexpi.client.engine2D;

   public class Point2D {
   public int x = 0;
   public int y = 0;   
}

的 的 __ _ Rect2D 的 _ __ _ 

package info.alexpi.client.engine2D;

public class Rect2D {
   public int x;
   public int y;
   public int w;
   public int h;

   public Rect2D(){
      x = 0;
      y = 0;
      w = 100;
      h = 100;
   }

   public Rect2D(int x, int y, int w, int h){
      this.x = x;
      this.y = y;
      this.w = w;
      this.h = h;
   }
}

的 的 __ _ ___ ImgElement2D 的 _ < / EM> __ _ ___ 我需要这个类来保持原始图像的宽度和高度

package info.alexpi.client.engine2D;

import com.google.gwt.dom.client.ImageElement;
import com.google.gwt.event.dom.client.ErrorEvent;
import com.google.gwt.event.dom.client.ErrorHandler;
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.Label;
import com.google.gwt.user.client.ui.RootPanel;

public class ImgElement2D {
   private Rect2D rect = new Rect2D();
   private ImageElement imgElement;
   private Image tempImg;

public ImgElement2D(String imgAddress){
      try {
      Image.prefetch(imgAddress);
      tempImg = new Image(imgAddress);

     // SafeUri fromString = UriUtils.fromString(imgAddress);           
     // tempImg.setUrl(fromString); //SafeUri url

     // this method doesn't trigger
      tempImg.addLoadHandler(new LoadHandler(){
         @Override
         public void onLoad(LoadEvent event) {
            imgElement = (ImageElement) tempImg.getElement().cast();
            rect.x = 0;
            rect.y = 0;
            rect.h = tempImg.getHeight();
            rect.w = tempImg.getWidth();

            //RootPanel.get().remove(image);
         }
      });

   public ImgElement2D(ImageResource resource){
      tempImg = new Image(resource);
      rect.x = 0;
      rect.y = 0;
      rect.h = tempImg.getHeight();
      rect.w = tempImg.getWidth(); 
      imgElement = (ImageElement) tempImg.getElement().cast();

   }

的 的 __ _ ___ Sprite2D 的 _ < / EM> __ _ ___ 

package info.alexpi.client.engine2D;

import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.dom.client.ImageElement;

public class Sprite2D {
   private Point2D pos = new Point2D();
   private ImgElement2D img;
   private double scale;
   private Rect2D rect = new Rect2D();

   public Sprite2D(ImgElement2D image2D){
      this.img = image2D;
      this.rect = image2D.getRect();
      this.scale = 1.0;
      this.pos.x = 0;
      this.pos.y = 0;
   }

   public void setImage(ImgElement2D image2D){
      this.img = image2D;
   }

   public ImgElement2D getImgElement(){
      return this.img;
   }
________________DRAWING ______________________
   public void draw(Context2d context){
      ImageElement el = this.img.getImg();
      if( el != null) {
      context.drawImage(el, rect.x, rect.y, 
          rect.w, rect.h, pos.x, pos.y, rect.w*scale, rect.h*scale);
      }
   }

的 的 __ _ __ _ __ _ ____ 主要入口点 _ __ _ __ _ __ _ __ _ ____ 

package info.alexpi.client;

import com.google.gwt.canvas.client.Canvas;
import com.google.gwt.canvas.dom.client.Context2d;
import com.google.gwt.canvas.dom.client.CssColor;
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.Timer;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.RootPanel;
import info.alexpi.client.engine2D.ImgElement2D;
import info.alexpi.client.engine2D.Point2D;
import info.alexpi.client.engine2D.Rect2D;
import info.alexpi.client.engine2D.ResourseInspector;
import info.alexpi.client.engine2D.Sprite2D;
import java.util.ArrayList;
import java.util.List;

public class gwtEntryPoint implements EntryPoint {
  static final String holderId = "canvasholder";
  static final String upgradeMessage = "Your browser does not support the HTML5 Canvas. "
                      + "Please upgrade your browser to view this demo.";
  Canvas canvas;
  Canvas backBuffer;
  Context2d context;
  Context2d backBufferContext;
  final CssColor redrawColor = CssColor.make("rgba(255,255,255,0.0)");

  // canvas size, in px
  static final int height = 712;
  static final int width = 800;
  boolean isFirstLoading = true;

  // mouse positions relative to canvas
  int mouseX, mouseY;

  //timer refresh rate, in milliseconds
  static final int refreshRate = 25;
  String imgAddress = GWT.getHostPageBaseURL() + "resources/images/Anthony-Catwalk-Dress.png";

  //String imgAddress = "resources/images/image1.png"; //Second place of image
  String cssAddress = GWT.getHostPageBaseURL() + "resources/myStyle.css";
  double scale = 0.7;
  List<Sprite2D> spriteList = new ArrayList<Sprite2D>();
  ImgElement2D im;

  public gwtEntryPoint() {
  }

 // init the canvases-------------------------------------------------------------------------
  void initCanvas(){
    canvas = Canvas.createIfSupported();
    backBuffer = Canvas.createIfSupported();
    if (canvas == null) {
      RootPanel.get(holderId).add(new Label(upgradeMessage));
      return;
    }

    canvas.setWidth(width + "px");
    canvas.setHeight(height + "px");
    canvas.setCoordinateSpaceWidth(width);
    canvas.setCoordinateSpaceHeight(height);
    backBuffer.setCoordinateSpaceWidth(width);
    backBuffer.setCoordinateSpaceHeight(height);
    canvas.setStyleName(cssAddress); //apply css style
    canvas.getElement().getStyle().setProperty("border", "3px solid #00F");
    RootPanel.get(holderId).add(canvas);
    context = canvas.getContext2d();
    backBufferContext = backBuffer.getContext2d();
  }

  // draw backBuffer ----------------------------------------------------------------------------
  public void drawBuffer(Context2d back, Context2d front){
      front.drawImage(back.getCanvas(), 0, 0);
   }

  void initElements(){

      im = new ImgElement2D(ResourseInspector.INSTANCE.Img()); //ImageResource loading
      Sprite2D sprite = new Sprite2D(im);
      Rect2D r = new Rect2D(0,0, 228, 720); //man
      sprite.setRect(r);
      spriteList.add(sprite);

      //im = new ImgElement2D(imgAddress); //another way of image loading (doesn't trigger)
      sprite = new Sprite2D(im);
      r = new Rect2D(226,12, 230, 283); //white T-shirt
      sprite.setRect(r);
      spriteList.add(sprite);
  }

  void doUpdate(){
      // update the back canvas
      backBufferContext.setFillStyle(redrawColor);
      backBufferContext.fillRect(0, 0, width, height);
      for(int x = 0; x < spriteList.size(); ++x){
         spriteList.get(x).draw(backBufferContext);
        // spriteList.get(x).draw(context);
      }

      drawBuffer(backBufferContext, context);
   }

   // init Assets & Timer -----------------------------------------------------------------------
   void initAssets(){
      initElements();

      final Timer timer = new Timer() {          
         @Override
         public void run() {
            doUpdate();
         }
      };
      timer.scheduleRepeating(refreshRate); 
   }

   @Override
   public void onModuleLoad() {
      initCanvas();
      initAssets();
   }
}

1 个答案:

答案 0 :(得分：0)

请参阅https://code.google.com/p/google-web-toolkit/issues/detail?id=8180

这是因为，目前new Image(imageResource)使用空白GIF并将ImageResource作为背景图片。这已在 master 中修复，并将于今年晚些时候在GWT 2.6中发布 解决方法是使用new Image(imageResource.getSafeUri())。在使用 sprited image 的IE6 / 7中进行此操作并不安全，但是不支持canvas，因此在这种情况下它不是真正的问题（请注意，您可以配置任何排列以使用 sprited image 而非data:网址，因此从技术上讲，在任何浏览器中使用getSafeUri()都是不安全的; GWT 2.6会添加isStandalone()方法来告诉您何时使用它是安全的，这就是new Image(imageResource)将被修复的方式）

相关问题
最新问题