我的代码没有错误,但我看不到图像。该映像与ClientBundle文件位于同一位置。很抱歉有大块代码。事实上,我是GWT(以及Java)的新手。我自学成才。我进行了调试,看到图像已经加载,所有类都初始化了,但画布到目前为止是空的。我使用NetBeans IDE 7.3。如果有人能给我任何关于如何启动这个代码的建议,我会很高兴。谢谢你!
______资源检查器(无特殊)图像位于同一文件夹中。
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____
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<强>_______我需要这个类来保持原始图像的宽度和高度强>
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();
}
______
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();
}
}
请参阅https://code.google.com/p/google-web-toolkit/issues/detail?id=8180
这是因为,目前,new Image(imageResource)
使用空白GIF,并将ImageResource
作为背景图像。这在master中得到了修复,并将在今年晚些时候的GWT2.6中发布
解决方法是使用new Image(imageResource.getSafeUri())
。在IE6/7中使用精灵图像是不安全的,但是canvas不受支持,所以在这种情况下它并不是一个真正的问题(请注意,您可以将任何排列配置为使用精灵图像而不是data:
URL,因此从技术上讲,在任何浏览器中使用getSafeUri()
都是不安全的;GWT2.6将添加isStandalone()
方法来告诉您何时可以安全使用它,这就是new Image(imageResource)
的修复方法)