小技巧:两种方式快速实现平滑涂鸦画板

来源:互联网 发布:php分割 编辑:程序博客网 时间:2024/05/29 21:18

方式一代码:继承自View 通过绘制贝塞尔曲线实现;

package com.likang.view;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Path;import android.support.annotation.Nullable;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;import android.view.View;/** * 涂鸦画板; */public class DrawingWithBezier extends View {    private float mPreviousX;    private float mPreviousY;    private final Paint mGesturePaint = new Paint();    private final Path mPath = new Path();    private final String TAG = "DrawingWithBezier";    public DrawingWithBezier(Context context) {        this(context, null);    }    public DrawingWithBezier(Context context, @Nullable AttributeSet attrs) {        this(context, null, 0);    }    public DrawingWithBezier(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        init();    }    private void init() {        mGesturePaint.setAntiAlias(true);        mGesturePaint.setStyle(Paint.Style.STROKE);        mGesturePaint.setStrokeWidth(20);        mGesturePaint.setColor(Color.BLACK);        mGesturePaint.setStrokeCap(Paint.Cap.ROUND);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        switch (event.getAction()) {            case MotionEvent.ACTION_DOWN:                touchDown(event);                break;            case MotionEvent.ACTION_MOVE:                touchMove(event);        }        //更新绘制          invalidate();        return true;    }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        //通过画布绘制多点形成的图形          canvas.drawPath(mPath, mGesturePaint);    }    //手指点下屏幕时调用      private void touchDown(MotionEvent event) {        float x = event.getX();        float y = event.getY();        mPreviousX = x;        mPreviousY = y;        mPath.moveTo(x, y);    }    //手指在屏幕上滑动时调用      private void touchMove(MotionEvent event) {        final float x = event.getX();        final float y = event.getY();        float cX = (x + mPreviousX) / 2;        float cY = (y + mPreviousY) / 2;        Log.d(TAG, "x=" + x);        Log.d(TAG, "y=" + y);        Log.d(TAG, "mPreviousX=" + mPreviousX);        Log.d(TAG, "mPreviousY=" + mPreviousY);        Log.d(TAG, "cX=" + cX);        Log.d(TAG, "cY=" + cY);        mPath.quadTo(mPreviousX, mPreviousY, cX, cY);        mPreviousX = x;        mPreviousY = y;    }}  

方式二代码:继承自ImageView 通过drawLine 绘制;

package com.likang.view;import android.content.Context;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Paint;import android.util.AttributeSet;import android.util.Log;import android.view.MotionEvent;/** * 涂鸦画板; */public class DoodleView extends android.support.v7.widget.AppCompatImageView {    private final String TAG = "DoodleView";    private Paint mPaint;    private float paintYold;    private float paintXold;    Canvas canvas;    Bitmap bitmap;    public DoodleView(Context context) {        super(context);        init(null, 0);    }    public DoodleView(Context context, AttributeSet attrs) {        super(context, attrs);        init(attrs, 0);    }    public DoodleView(Context context, AttributeSet attrs, int defStyle) {        super(context, attrs, defStyle);        init(attrs, defStyle);    }    private void init(AttributeSet attrs, int defStyle) {        mPaint = new Paint();        mPaint.setARGB(255, 255, 0, 0);        mPaint.setAntiAlias(true);        mPaint.setStrokeWidth(20);        mPaint.setStrokeCap(Paint.Cap.ROUND);        mPaint.setStyle(Paint.Style.STROKE);    }    @Override    protected void onSizeChanged(int w, int h, int oldw, int oldh) {        super.onSizeChanged(w, h, oldw, oldh);        bitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);        canvas = new Canvas(bitmap);    }    @Override    public boolean onTouchEvent(MotionEvent event) {        if (event.getAction() == MotionEvent.ACTION_DOWN) {            Log.d(TAG, "MotionEvent:" + "ACTION_DOWN");            paintXold = event.getX();            paintYold = event.getY();            canvas.drawPoint(paintXold, paintYold, mPaint);            setImageBitmap(bitmap);        } else if (event.getAction() == MotionEvent.ACTION_MOVE) {            Log.d(TAG, "MotionEvent:" + "ACTION_MOVE");            float paintX = event.getX();            float paintY = event.getY();            Log.d(TAG, "paintY:" + paintY);            Log.d(TAG, "paintX:" + paintX);            if (paintX != paintXold || paintY != paintYold) {                canvas.drawLine(paintXold, paintYold, paintX, paintY, mPaint);                Log.d(TAG, "draw:" + "line");                setImageBitmap(bitmap);            }            paintXold = event.getX();            paintYold = event.getY();        } else {            super.onTouchEvent(event);        }        return true;    }}

方式一要比方式二的更平滑。

原创粉丝点击