一手遮天 Android - 輸入: Touch 簡單的塗鴉闆

一手遮天 Android - 輸入: Touch 簡單的塗鴉闆

項目位址 https://github.com/webabcd/AndroidDemo

作者 webabcd

示例如下:

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

           

/**
 * 自定義控件，實作了簡單的塗鴉功能
 */

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

<?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>