Android Canvas手指画

时间:2014-02-18 07:09:24

标签: android eclipse canvas

在我正在从事当前工作的项目中,我遇到了一些非常有害的问题,其中有

no good information available or
the good information is buried under a sea of bad information.

我保留了这些问题,现在问题已经解决,我打算与所有开发人员分享一个简单的例子......

获取手指的触摸和动作事件并绘制 我希望我的回答能帮助你们所有人......你们可以根据自己的需要修改以下内容..... :)

2 个答案:

答案 0 :(得分:9)

请按照以下步骤操作:

1)创建一个视图类然后扩展View,同时创建构造函数

覆盖onDraw()。您可以添加手指触摸和移动的路径。您覆盖此目的的onTouch()。在onDraw()中,您可以使用您选择的颜料绘制路径。您应该致电invalidate()来刷新视图。

//drawing path
    static Path drawPath;
    //drawing and canvas paint
    private Paint drawPaint, canvasPaint;
    //initial color
    static int paintColor = 0xFFFF0000; 
    //stroke width
    private  float STROKE_WIDTH = 5f;
    //canvas
    private Canvas drawCanvas;
    //canvas bitmap
    private Bitmap canvasBitmap;
    //eraser mode
    private boolean erase=false;

    //constructor
    public DrawingView(Context context, AttributeSet attrs){
        super(context, attrs);
        setupDrawing();
        setErase(erase);
    }


        private void setupDrawing(){
            drawPath = new Path();
            drawPaint = new Paint();
            drawPaint.setColor(paintColor);
            drawPaint.setAntiAlias(true);
            drawPaint.setStrokeWidth(STROKE_WIDTH);
            drawPaint.setStyle(Paint.Style.STROKE);
            drawPaint.setStrokeJoin(Paint.Join.ROUND);
            drawPaint.setStrokeCap(Paint.Cap.ROUND);
            canvasPaint = new Paint(Paint.DITHER_FLAG);
        }

        //*************************************** View assigned size  ****************************************************

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

        public void setErase(boolean isErase){
            erase=isErase;
        drawPaint = new Paint();
        if(erase) { 
            setupDrawing();
            int srcColor= 0x00000000;

            PorterDuff.Mode mode = PorterDuff.Mode.CLEAR;
            PorterDuffColorFilter porterDuffColorFilter = new PorterDuffColorFilter(srcColor, mode);

            drawPaint.setColorFilter(porterDuffColorFilter);

            drawPaint.setColor(srcColor);
            drawPaint.setXfermode(new PorterDuffXfermode(mode));

        }
        else {

            setupDrawing();

        }
        }

        //************************************   draw view  *************************************************************

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawBitmap(canvasBitmap, 0, 0, canvasPaint);
            canvas.drawPath(drawPath, drawPaint);
        }

        //***************************   respond to touch interaction   **************************************************

        @Override
        public boolean onTouchEvent(MotionEvent event) {

            canvasPaint.setColor(paintColor);
            float touchX = event.getX();
            float touchY = event.getY();
            //respond to down, move and up events

            switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                drawPath.moveTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_MOVE:
                drawCanvas.drawPath(drawPath, drawPaint);
                drawPath.lineTo(touchX, touchY);
                break;
            case MotionEvent.ACTION_UP:
                drawPath.lineTo(touchX, touchY);
                drawCanvas.drawPath(drawPath, drawPaint);
                drawPath.reset();
                break;
            default:
                return false;
            }
            //redraw
            invalidate();
            return true;
        }

        //***********************************   return current alpha   ***********************************************
        public int getPaintAlpha(){
            return Math.round((float)STROKE_WIDTH/255*100);
        }

        //**************************************  set alpha   ******************************************************
        public void setPaintAlpha(int newAlpha){
            STROKE_WIDTH=Math.round((float)newAlpha/100*255);
            drawPaint.setStrokeWidth(newAlpha);
    }
        }

2) 您的活动: -

SeekBar mThickness;
private DrawingView mDrawLayout;
Button erase, draw;
private Paint drawPaint = new Paint();

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mThickness = (SeekBar) findViewById(R.id.thickness);
    mDrawLayout = (DrawingView) findViewById(R.id.viewDraw);
    erase = (Button) findViewById(R.id.erase);
    draw= (Button) findViewById(R.id.draw);

    mDrawLayout.setVisibility(View.VISIBLE);
    mDrawLayout.setDrawingCacheEnabled(true);
    mDrawLayout.setEnabled(true);
    mThickness.setMax(50);
    mThickness.setProgress(10);
    mDrawLayout.setPaintAlpha(mThickness.getProgress());
    int currLevel = mDrawLayout.getPaintAlpha();
    mThickness.setProgress(currLevel);
    mDrawLayout.invalidate();

    erase.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            drawPaint.setColor(Color.TRANSPARENT);
            mDrawLayout.setErase(true);

        }
    });

    draw.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            mDrawLayout.setErase(false);

        }
    });

    mThickness.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {
        }

        @Override
        public void onProgressChanged(SeekBar seekBar, int progress,
                boolean fromUser) {
            mDrawLayout.setPaintAlpha(mThickness.getProgress());
        }
    });
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.main, menu);
    return true;
}

3)xml: -

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <com.example.drawdemo.DrawingView
        android:id="@+id/viewDraw"
        android:layout_width="wrap_content"
        android:layout_height="200dp"
        android:layout_marginTop="20dp"
        android:scaleType="fitXY" />

    <SeekBar
        android:id="@+id/thickness"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/viewDraw"
        android:layout_marginTop="25dp" />

    <Button
        android:id="@+id/erase"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/thickness"
        android:text="erase" />

    <Button
        android:id="@+id/draw"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/erase"
        android:text="draw" />

</RelativeLayout>

答案 1 :(得分:2)

  1. 创建一个扩展视图并粘贴以下代码的类。

public class CustomClass extends View {

  private Paint paint = new Paint();
  private Path path = new Path();

  public CustomClass(Context context, @Nullable AttributeSet attrs) {
    super(context, attrs);
    paint.setAntiAlias(true);
    paint.setStrokeWidth(5 f);
    paint.setColor(Color.BLACK);
    paint.setStyle(Paint.Style.STROKE);
    paint.setStrokeJoin(Paint.Join.ROUND);
  }

  @Override protected void onDraw(Canvas canvas) {
    canvas.drawPath(path, paint);
  }

  @Override public boolean onTouchEvent(MotionEvent event) {
    // Get the coordinates of the touch event.
    float eventX = event.getX();
    float eventY = event.getY();

    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        // Set a new starting point
        path.moveTo(eventX, eventY);
        return true;
      case MotionEvent.ACTION_MOVE:
        // Connect the points
        path.lineTo(eventX, eventY);
        break;
      default:
        return false;
    }

    // Makes our view repaint and call onDraw
    invalidate();
    return true;
  }

}

2在XML中,粘贴以下代码

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#ffffff">

    <!-- This is the view on which we will draw. -->
    <view
        android:layout_width="match_parent"
        android:layout_height="200sp"
        class="com.example.gopal.drawing.MainDrawingView"
        android:id="@+id/custom_view"
        android:layout_gravity="left|top"
        android:background="#ffffff" />

    <View
        android:id="@+id/boundary"
        android:layout_width="match_parent"
        android:layout_height="2sp"
        android:background="@color/colorAccent"
        android:layout_below="@id/custom_view"/>

    <ImageView
        android:id="@+id/image"
        android:layout_width="300sp"
        android:layout_height="300sp"
        android:src="@drawable/ic_launcher_background"
        android:layout_below="@id/boundary"
        android:layout_marginTop="6sp"
        android:layout_centerHorizontal="true"/>

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="save"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:onClick="saveImage"/>

</RelativeLayout>

3您的MainActivity

public class MainActivity extends AppCompatActivity {

  ImageView imageView;
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    imageView = findViewById(R.id.image);
  }

  public void saveImage(View view) {
    View v = findViewById(R.id.custom_view);
    int canvasWidth = v.getWidth();
    int canvasHeight = v.getHeight();
    Bitmap bitmap = Bitmap.createBitmap(canvasWidth, canvasHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bitmap);
    v.draw(canvas);
    imageView.setImageBitmap(bitmap);

  }

}

就是这样。