一手遮天 Android - 输入: Touch 简单的涂鸦板

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd

一手遮天 Android - 输入: Touch 简单的涂鸦板

示例如下:

/input/TouchDemo5.java

/**
 * Touch 简单的涂鸦板
 *
 *
 * 本例演示了如何实现一个简单的涂鸦板控件（参见 view/input/TouchDemo5_CustomView.java）
 */

package com.webabcd.androiddemo.input;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;

import com.webabcd.androiddemo.R;

public class TouchDemo5 extends AppCompatActivity {

    private TouchDemo5_CustomView mCustomView1;

    private Button mButton1;

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

        mCustomView1 = findViewById(R.id.customView1);
        mButton1 = findViewById(R.id.button1);

        sample();
    }

    private void sample() {
        mButton1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 清除涂鸦板控件中的内容
                mCustomView1.clear();
            }
        });
    }
}

\input\TouchDemo5_CustomView.java

/**
 * 自定义控件，实现了简单的涂鸦功能
 */

package com.webabcd.androiddemo.input;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class TouchDemo5_CustomView extends View {

    private Paint mPaint;
    private Path mPath;
    private float mX;
    private float mY;

    public TouchDemo5_CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    private void init() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true); // 消除锯齿
        mPaint.setStrokeWidth(5);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setColor(Color.BLACK);
        mPath = new Path();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        // 绘制涂鸦
        canvas.drawPath(mPath, mPaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        float x = event.getX();
        float y = event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mX = x;
                mY = y;
                // 指定 path 的起点
                mPath.moveTo(mX, mY);
                break;
            case MotionEvent.ACTION_MOVE:
                // 用二次贝塞尔曲线连接 path 的每一点
                mPath.quadTo(mX, mY, x, y);
                mX = x;
                mY = y;
                break;
            case MotionEvent.ACTION_UP:
                break;
        }

        // 调用 draw()
        invalidate();

        return true;
    }

    // 清除涂鸦
    public void clear() {
        mPath.reset();

        // 调用 draw()
        invalidate();
    }
}

/layout/activity_input_touchdemo5.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="清除" />

    <!--
        实现了简单涂鸦功能的自定义控件
    -->
    <com.webabcd.androiddemo.input.TouchDemo5_CustomView
        android:id="@+id/customView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</FrameLayout>

项目地址 https://github.com/webabcd/AndroidDemo
作者 webabcd