gwt ClientBundle context.drawImage doesn't show image? my 2D engine -
my code has not errors don't see image. image located @ same place clientbundle file is. sorry chunk of code. in fact newbie in gwt (and in java well). , teach myself. made debugging , saw image loaded, classes initialized, canvas empty far. use netbeans ide 7.3. happy if give me advice how launch code. upfront!
______resourseinspector (nothing special)______________ image located @ same folder.
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() - way, why it's not allowed 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_______ need class keep width , high of original image
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 // 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_______
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); } } _____________main entry point_________________
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 not support html5 canvas. " + "please upgrade browser view 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 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 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 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(); } }
see https://code.google.com/p/google-web-toolkit/issues/detail?id=8180
this because, currently, new image(imageresource) uses blank gif , puts imageresource background image. fixed in master , ship in gwt 2.6 later year.
workaround use new image(imageresource.getsafeuri()). it's not safe in ie6/7 sprited image used, canvas not supported there it's not issue in case (note configure permutation use sprited image rather data: url, technically it's not safe use getsafeuri() in browser; gwt 2.6 add isstandalone() method tell when it's safe use it, , how new image(imageresource) fixed)
Comments
Post a Comment