codenameone - How to draw on top of an Image in CodeName One? -
i have been successful in drawing arbitrary paths on whole screen modifying definition of signaturepanel class according need. next, want want able draw on picture selected user. basically, picture should remain in background , should able manipulate it. tried mutable image don't quite how implement it. sort of code me started appreciated.
here's have coded far:
main class:-
package com.mycompany.myapp; import com.codename1.ui.display; import com.codename1.ui.form; import com.codename1.ui.graphics; import com.codename1.ui.image; import com.codename1.ui.button; import com.codename1.ui.container; import com.codename1.ui.dialog; import com.codename1.ui.label; import com.codename1.ui.painter; import com.codename1.ui.plaf.uimanager; import com.codename1.ui.util.resources; import com.codename1.io.log; import com.codename1.io.multipartrequest; import com.codename1.ui.toolbar; import com.codename1.ui.urlimage; import com.codename1.ui.events.actionevent; import com.codename1.ui.events.actionlistener; import com.codename1.ui.geom.rectangle; import com.codename1.ui.layouts.borderlayout; import com.codename1.ui.layouts.layeredlayout; import com.codename1.ui.painter.painterchain; import java.io.ioexception; /** * file generated <a href="https://www.codenameone.com/">codename one</a> purpose * of building native mobile applications using java. */ public class mainclass { private form current; private resources theme; signaturepanel sp; public void init(object context) { theme = uimanager.initfirsttheme("/theme"); // enable toolbar on forms default toolbar.setglobaltoolbar(true); // pro feature, uncomment if have pro subscription // log.bindcrashprotection(true); } public void start() { if(current != null){ current.show(); return; } form hi = new form("hi world"); hi.setlayout(new borderlayout()); button browsegallery = new button("browse"); image test = image.createimage(1280, 800, 0xffff00); hi.add(borderlayout.north,test); hi.addcomponent(borderlayout.south, browsegallery); // browsegallery.addactionlistener(new actionlistener<actionevent>() { // // @override // public void actionperformed(actionevent evt) { // display.getinstance().opengallery(new actionlistener<actionevent>() { // // @override // public void actionperformed(actionevent e) { // // } // }, display.gallery_image); // } // } browsegallery.addactionlistener(new actionlistener<actionevent>() { @override public void actionperformed(actionevent evt) { // todo auto-generated method stub display.getinstance().opengallery(new actionlistener<actionevent>() { @override public void actionperformed(actionevent evt) { // todo auto-generated method stub try { //image mutable = image.createimage(1280, 800, 0x00ff00); //image image = urlimage.createimage((string)evt.getsource()); //hi.add(borderlayout.center_behavior_center,mutable); //image.modifyalpha((byte) 10); } catch (exception e1) { // todo auto-generated catch block e1.printstacktrace(); } } }, display.gallery_image); } }); // hi.setglasspane(new painter() { // // @override // public void paint(graphics g, rectangle rect) { // // todo auto-generated method stub // system.out.println("glasspane"); // } // }); sp = new signaturepanel(); // hi.getlayeredpane(); // hi.add(layeredlayout.enclosein(new layeredlayout(), sp); system.out.println("before adding"); hi.addcomponent(borderlayout.center, sp); system.out.println("after adding"); hi.show(); } public void stop() { current = display.getinstance().getcurrent(); if(current instanceof dialog) { ((dialog)current).dispose(); current = display.getinstance().getcurrent(); } } public void destroy() { } } signaturepanel :-
package com.mycompany.myapp; import com.codename1.ui.component; import com.codename1.ui.display; import com.codename1.ui.font; import com.codename1.ui.graphics; import com.codename1.ui.image; import com.codename1.ui.stroke; import com.codename1.ui.geom.dimension; import com.codename1.ui.geom.generalpath; import com.codename1.ui.geom.rectangle; class signaturepanel extends component { private final generalpath path = new generalpath(); private final stroke stroke = new stroke(); private final rectangle signaturerect = new rectangle(); private final font xfont; private image value; signaturepanel() { stroke.setlinewidth(math.max(1, display.getinstance().converttopixels(1, true)/2)); getallstyles().setbgcolor(0xffff00); getallstyles().setbgtransparency(10); xfont = font.createsystemfont(font.face_system, font.style_bold, font.size_large); } /** * overridden try make component sensitive possible * drag events. if don't this, requires longer drag before "drag" * events kick in. * @param x * @param y * @return */ @override protected int getdragregionstatus(int x, int y) { return component.drag_region_likely_drag_xy; } /** * * @param g */ @override public void paint(graphics g) { super.paint(g); g.setcolor(0x666666); calcsignaturerect(signaturerect); g.drawrect(signaturerect.getx(), signaturerect.gety(), signaturerect.getwidth(), signaturerect.getheight()); g.drawstring("x", signaturerect.getx() + display.getinstance().converttopixels(1, true), signaturerect.gety() + signaturerect.getheight() / 2); paintsignature(g); } /** * paints signature portion of panel. is reuised * create image of signature. * @param g */ private void paintsignature(graphics g) { g.setcolor(0x0); boolean oldaa = g.isantialiased(); g.setantialiased(true); g.drawshape(path, stroke); g.setantialiased(oldaa); } /** * calculates rectangle (in parent component space) used drawn "rectangle" inside * user should draw signature. tries create 16x9 rectangle * fits inside component bit of padding (3mm on each edge). * @param r output variable. */ private void calcsignaturerect(rectangle r) { int w = getwidth() - display.getinstance().converttopixels(6, true); int h = (int)(w * 9.0 / 16.0); if (h > getheight()) { h = getheight() - display.getinstance().converttopixels(6, false); w = (int)(h * 16.0 / 9.0); } r.setx(getx() + (getwidth() - w) / 2); r.sety(gety() + (getheight() - h)/2); r.setwidth(w); r.setheight(h); } @override protected dimension calcpreferredsize() { display d = display.getinstance(); return new dimension(d.converttopixels(100, true), d.converttopixels(60, false)); } @override public void pointerpressed(int x, int y) { path.moveto(x(x), y(y)); value = null; repaint(); } @override public void pointerdragged(int x, int y) { path.lineto(x(x), y(y)); value = null; repaint(); } @override public void pointerreleased(int x, int y) { value = null; repaint(); } /** * converts x coordinate screen space, parent component space. * @param x * @return */ private int x(int x) { return x - getparent().getabsolutex(); } /** * converts y coordinate screen space parent component space. * @param y * @return */ private int y(int y) { return y - getparent().getabsolutey(); } /** * gets drawn signature image. includes * areas inside {@link #signaturerect} * @return */ private image getimage() { calcsignaturerect(signaturerect); image img = image.createimage(signaturerect.getwidth(), signaturerect.getheight(), 0xffffff); graphics g = img.getgraphics(); g.translate(-signaturerect.getx(), -signaturerect.gety()); paintsignature(g); return img; } /** * resets signature blank path. */ private void clear() { path.reset(); } } please ignore commented out code
you can set image background of component in sp.getallstyles.setbgimage(), override paint(graphics g) on component now. should have image drawn shapes laid on top.
Comments
Post a Comment