Draw on Picture in android -

Draw on Picture in android -

i working on custom imageview can draw line on it, problem drawing area size not bitmap size.

for example, in other app, looks like:

however, in app, looks like

here program, seems bitmap not fit canvas. helping

public class drawingview extends view { //drawing path private path drawpath; //drawing , canvas paint private paint drawpaint, canvaspaint; //initial color private int paintcolor = 0xff660000; //canvas private canvas drawcanvas; //canvas bitmap private bitmap canvasbitmap; public drawingview(context context, attributeset attrs){ super(context, attrs); setupdrawing(); } //setup drawing private void setupdrawing(){ //prepare drawing , setup paint stroke properties drawpath = new path(); drawpaint = new paint(); drawpaint.setcolor(paintcolor); drawpaint.setantialias(true); drawpaint.setstrokewidth(15.0f); drawpaint.setstyle(paint.style.stroke); drawpaint.setstrokejoin(paint.join.round); drawpaint.setstrokecap(paint.cap.round); canvaspaint = new paint(paint.dither_flag); } //size assigned view @override protected void onsizechanged(int w, int h, int oldw, int oldh) { super.onsizechanged(w, h, oldw, oldh); canvasbitmap = bitmap.createbitmap(w, h, bitmap.config.argb_8888); drawcanvas = new canvas(canvasbitmap); } //draw view - called after touch event @override protected void ondraw(canvas canvas) { canvas.drawbitmap(bitmapfactory.decoderesource(getresources(), r.drawable.ic_launcher), 0, 0, canvaspaint); canvas.drawbitmap(canvasbitmap, 0, 0, canvaspaint); canvas.drawpath(drawpath, drawpaint); } //register user touches drawing action @override public boolean ontouchevent(motionevent event) { float touchx = event.getx(); float touchy = event.gety(); //respond down, move , events switch (event.getaction()) { case motionevent.action_down: drawpath.moveto(touchx, touchy); break; case motionevent.action_move: drawpath.lineto(touchx, touchy); break; case motionevent.action_up: drawpath.lineto(touchx, touchy); drawcanvas.drawpath(drawpath, drawpaint); drawpath.reset(); break; default: homecoming false; } //redraw invalidate(); homecoming true; } //update color public void setcolor(string newcolor){ invalidate(); paintcolor = color.parsecolor(newcolor); drawpaint.setcolor(paintcolor); } //start new drawing public void startnew(){ drawcanvas.drawcolor(0, porterduff.mode.clear); invalidate(); } }

and found similar tutorial code, problem touch event has bug, count in action bar , rest ui element touching weird. recommend have look

http://www.java2s.com/code/android/2d-graphics/drawonpictureandsave.htm

so, goal of topic , solution of

1) draw-able image

2) zoom-able , pan-able(can utilize library) (when active zoom , zoom, when inactive zoom , draw)

can reference screenshot 1 idea

thanks lot helping

you can avoid counting coordinates of other ui items in sample creation own imageview. seek code activity:

public class drawonbitmapactivity extends activity implements onclicklistener { drawableimageview choosenimageview; button choosepicture; button savepicture; bitmap bmp; bitmap alteredbitmap; @override public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); choosenimageview = (drawableimageview) this.findviewbyid(r.id.choosenimageview); choosepicture = (button) this.findviewbyid(r.id.choosepicturebutton); savepicture = (button) this.findviewbyid(r.id.savepicturebutton); savepicture.setonclicklistener(this); choosepicture.setonclicklistener(this); } public void onclick(view v) { if (v == choosepicture) { intent choosepictureintent = new intent( intent.action_pick, android.provider.mediastore.images.media.external_content_uri); startactivityforresult(choosepictureintent, 0); } else if (v == savepicture) { if (alteredbitmap != null) { contentvalues contentvalues = new contentvalues(3); contentvalues.put(media.display_name, "draw on me"); uri imagefileuri = getcontentresolver().insert( media.external_content_uri, contentvalues); seek { outputstream imagefileos = getcontentresolver() .openoutputstream(imagefileuri); alteredbitmap .compress(compressformat.jpeg, 90, imagefileos); toast t = toast .maketext(this, "saved!", toast.length_short); t.show(); } grab (exception e) { log.v("exception", e.getmessage()); } } } } protected void onactivityresult(int requestcode, int resultcode, intent intent) { super.onactivityresult(requestcode, resultcode, intent); if (resultcode == result_ok) { uri imagefileuri = intent.getdata(); seek { bitmapfactory.options bmpfactoryoptions = new bitmapfactory.options(); bmpfactoryoptions.injustdecodebounds = true; bmp = bitmapfactory .decodestream( getcontentresolver().openinputstream( imagefileuri), null, bmpfactoryoptions); bmpfactoryoptions.injustdecodebounds = false; bmp = bitmapfactory .decodestream( getcontentresolver().openinputstream( imagefileuri), null, bmpfactoryoptions); alteredbitmap = bitmap.createbitmap(bmp.getwidth(), bmp.getheight(), bmp.getconfig()); choosenimageview.setnewimage(alteredbitmap, bmp); } grab (exception e) { log.v("error", e.tostring()); } } } }

you have alter activity_main layout slightly:

<?xml version="1.0" encoding="utf-8"?> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="choose picture" android:id="@+id/choosepicturebutton"/> <ru.pristalovpavel.drawonimage.drawableimageview android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/choosenimageview"> </ru.pristalovpavel.drawonimage.drawableimageview> <button android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="save picture" android:id="@+id/savepicturebutton"/> </linearlayout>

and custom imageview:

public class drawableimageview extends imageview implements ontouchlistener { float downx = 0; float downy = 0; float upx = 0; float upy = 0; canvas canvas; paint paint; matrix matrix; public drawableimageview(context context) { super(context); setontouchlistener(this); } public drawableimageview(context context, attributeset attrs) { super(context, attrs); setontouchlistener(this); } public drawableimageview(context context, attributeset attrs, int defstyleattr) { super(context, attrs, defstyleattr); setontouchlistener(this); } public void setnewimage(bitmap alteredbitmap, bitmap bmp) { canvas = new canvas(alteredbitmap ); paint = new paint(); paint.setcolor(color.green); paint.setstrokewidth(5); matrix = new matrix(); canvas.drawbitmap(bmp, matrix, paint); setimagebitmap(alteredbitmap); } @override public boolean ontouch(view v, motionevent event) { int action = event.getaction(); switch (action) { case motionevent.action_down: downx = getpointercoords(event)[0];//event.getx(); downy = getpointercoords(event)[1];//event.gety(); break; case motionevent.action_move: upx = getpointercoords(event)[0];//event.getx(); upy = getpointercoords(event)[1];//event.gety(); canvas.drawline(downx, downy, upx, upy, paint); invalidate(); downx = upx; downy = upy; break; case motionevent.action_up: upx = getpointercoords(event)[0];//event.getx(); upy = getpointercoords(event)[1];//event.gety(); canvas.drawline(downx, downy, upx, upy, paint); invalidate(); break; case motionevent.action_cancel: break; default: break; } homecoming true; } final float[] getpointercoords(motionevent e) { final int index = e.getactionindex(); final float[] coords = new float[] { e.getx(index), e.gety(index) }; matrix matrix = new matrix(); getimagematrix().invert(matrix); matrix.posttranslate(getscrollx(), getscrolly()); matrix.mappoints(coords); homecoming coords; } }

all source code of project in eclipse: link

update:

new source code drawableimageview!

more info in my blog.

android android-layout canvas android-imageview