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

方式一代码:继承自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;
    }

}

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

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值