In my app I want to draw line on imageview along with finger. I want the output like the following:
In this screen fish is the imageview and red lines are drawing lines. So I followed the link below to develop the app link. This is my code:
public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);
setContentView(R.layout.addphoto);
btnAddPhoto=(Button)findViewById(R.id.add);
btnEdit=(Button)findViewById(R.id.edit);
imageView=(ImageView)findViewById(R.id.photo);
btnAddPhoto.setOnClickListener(this);
btnEdit.setOnClickListener(this);
imageView.setOnTouchListener(this);
}
@Override
public void onWindowFocusChanged(boolean hasFocus){
width=imageView.getWidth();
height=imageView.getHeight();
Log.e("heightttt",""+height);
Log.e("Widthhhh",""+width);
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
if(v.equals(btnAddPhoto)){
popup.setVisibility(View.VISIBLE);
}
if(v.equals(btnEdit)){
bitmap = Bitmap.createBitmap((int) width, (int) height,Bitmap.Config.ARGB_8888);
canvas = new Canvas(bitmap);
paint = new Paint();
paint.setColor(Color.BLACK);
imageView.setImageBitmap(bitmap);
imageView.setOnTouchListener(this);
}
}
public boolean onTouch(View v, MotionEvent event) {
int action = event.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
downx = event.getX();
downy = event.getY();
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
upx = event.getX();
upy = event.getY();
canvas.drawLine(downx, downy, upx, upy, paint);
imageView.invalidate();
break;
case MotionEvent.ACTION_CANCEL:
break;
default:
break;
}
return true;
}
In this coding whenever I run the application the below screen will be open.
Then by using add button I added the photo from my gallery. This is below screen.
Then whenever I click edittool button the fish imageview gone and I could draw the straight lines only like the following. But I want to draw lines on imageview along with finger like first screen.
Please anybody help me. I am new to android. Thanks for any help.
You should override the onDraw method of your view.
screen_drawing_room.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/rlid"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout <!--set background for the bottom layout set image here. -->
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="bottom"
android:orientation="vertical"
android:weightSum="1.0" >
<LinearLayout
android:id="@+id/view_drawing_pad" <!--your drawing pad on foreground -->
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
</LinearLayout>
</LinearLayout>
</RelativeLayout
In your activities onCreate()
DrawingView mDrawingView=new DrawingView(this);
setContentView(R.layout.screen_drawing_room);
LinearLayout mDrawingPad=(LinearLayout)findViewById(R.id.view_drawing_pad);
mDrawingPad.addView(mDrawingView);
DrawingView.java
Define your DrawingView. The below can be used for freehand drawing. Modify the same to draw lines, texts and fill color( closed area). For flood Fill see the accepted answer in the link android using flood fill algorithm getting out of memory exception.
class DrawingView extends View {
Paint mPaint;
//MaskFilter mEmboss;
//MaskFilter mBlur;
Bitmap mBitmap;
Canvas mCanvas;
Path mPath;
Paint mBitmapPaint;
public DrawingView(Context context) {
super(context);
// TODO Auto-generated constructor stub
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(0xFFFF0000);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(20);
mPath = new Path();
mBitmapPaint = new Paint();
mBitmapPaint.setColor(Color.RED);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
mCanvas = new Canvas(mBitmap);
}
@Override
public void draw(Canvas canvas) {
// TODO Auto-generated method stub
super.draw(canvas);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawPath(mPath, mPaint);
}
private float mX, mY;
private static final float TOUCH_TOLERANCE = 4;
private void touch_start(float x, float y) {
//mPath.reset();
mPath.moveTo(x, y);
mX = x;
mY = y;
}
private void touch_move(float x, float y) {
float dx = Math.abs(x - mX);
float dy = Math.abs(y - mY);
if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
mX = x;
mY = y;
}
}
private void touch_up() {
mPath.lineTo(mX, mY);
// commit the path to our offscreen
mCanvas.drawPath(mPath, mPaint);
//mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SCREEN));
// kill this so we don't double draw
mPath.reset();
// mPath= new Path();
}
@Override
public boolean onTouchEvent(MotionEvent event) {
float x = event.getX();
float y = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
touch_start(x, y);
invalidate();
break;
case MotionEvent.ACTION_MOVE:
touch_move(x, y);
invalidate();
break;
case MotionEvent.ACTION_UP:
touch_up();
invalidate();
break;
}
return true;
}
}
Your Drawing view is set. Study the fingerpaint.java from the sample on sdk under the graphics folder.
Resulting sanpshot. What you see in the background is a image. On the foreground I draw hi. I have draw lines to the corner. If you can make out it is red.
Draw lines which look like border. Set Stroke width for the paint to whatever you like. Similarly you can draw lines where you want by changing the x1,y1 and x2,y2 co-ordinates.
Display display = ( (Activity) mcontext).getWindowManager().getDefaultDisplay();
float w = display.getWidth();
float h = display.getHeight();
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
canvas.drawLine(0, 0, w, 0,mBitmapPaint);
canvas.drawLine(0, 0, 0, h,mBitmapPaint);
canvas.drawLine(w,h,w,0,mBitmapPaint);
canvas.drawLine(w, h, 0,h , mBitmapPaint);
Edit:
To get image from gallery
File fp;
Drawable d;
public void setImagefrmGallery() {
// To open up a gallery browser
Intent intent = new Intent();
intent.setType("image/*");
intent.setAction(Intent.ACTION_GET_CONTENT);
startActivityForResult(Intent.createChooser(intent, "Select Picture"),1);
// To handle when an image is selected from the browser, add the following to your Activity
}
@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
if (resultCode == RESULT_OK) {
if (requestCode == 1) {
// currImageURI is the global variable I�m using to hold the content:// URI of the image
Uri currImageURI = data.getData();
System.out.println("Hello======="+getRealPathFromURI(currImageURI));
String s= getRealPathFromURI(currImageURI);
File file = new File(s);
if (file.exists()) {
fp=file.getAbsolutePath();
d = Drawable.createFromPath(file.getAbsolutePath());
mDrawingPad.setBackgroundDrawable(d);
} else {
System.out.println("File Not Found");
}
}
}
}
// And to convert the image URI to the direct file system path of the image file
public String getRealPathFromURI(Uri contentUri) {
// can post image
String [] proj={MediaStore.Images.Media.DATA};
Cursor cursor = managedQuery( contentUri,
proj, // Which columns to return
null, // WHERE clause; which rows to return (all rows)
null, // WHERE clause selection arguments (none)
null); // Order-by clause (ascending by name)
int column_index = cursor.getColumnIndexOrThrow(MediaStore.Images.Media.DATA);
cursor.moveToFirst();
return cursor.getString(column_index);
}
来源：https://stackoverflow.com/questions/15704205/how-to-draw-line-on-imageview-along-with-finger-in-android