android - 如何在android中用手指在imageview上画线

Question

在我的应用程序中，我想用手指在 ImageView 上画线。我想要如下输出:

在此屏幕中，鱼是 ImageView ，红线是画线。所以我按照下面的链接开发了应用程序 link .这是我的代码:

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;
      }

在这段代码中，每当我运行应用程序时，下面的屏幕都会打开。

然后通过使用添加按钮，我从我的图库中添加了照片。这是在屏幕下方。

然后，每当我单击 edittool 按钮时，fish imageview 就消失了，我只能像下面这样绘制直线。但我想像第一个屏幕一样在 imageview 上用手指画线。

请任何人帮助我。我是安卓新手。感谢您的帮助。

Answer 1

您应该覆盖 View 的 onDraw 方法。

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

在你的 Activity 中 onCreate()

DrawingView mDrawingView=new DrawingView(this);
setContentView(R.layout.screen_drawing_room);    
LinearLayout mDrawingPad=(LinearLayout)findViewById(R.id.view_drawing_pad);
mDrawingPad.addView(mDrawingView);

绘图 View .java

定义您的 DrawingView。以下可用于徒手绘制。修改相同以绘制线条、文本和填充颜色(封闭区域)。对于洪水填充，请参阅链接中接受的答案 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;
    }   
}

您的绘图 View 已设置。研究sdk中graphics文件夹下sample中的fingerpaint.java。

生成的快照。您在背景中看到的是图像。在前景我画嗨。我在角落画线。如果你能看出它是红色的。

绘制看起来像边框的线条。将绘画的描边宽度设置为您喜欢的任何值。同样，您可以通过更改 x1,y1 和 x2,y2 坐标在您想要的位置绘制线条。

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);

编辑:

从图库中获取图片

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); 
}