วิธีวาดเส้นโค้งนุ่มตามนิ้วบนหน้าจอ Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีการวาดเส้นบนหน้าจอโดยติดตามการเคลื่อนไหวของนิ้ว (Touch Event) ใช้ Canvas, Bitmap และ OnTouchListener

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: จัดทำ Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:src="@drawable/ic_launcher_foreground" />
</RelativeLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity.java

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Display;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ImageView;

public class MainActivity extends AppCompatActivity implements View.OnTouchListener {
    ImageView imageView;
    Bitmap bitmap;
    Canvas canvas;
    Paint paint;
    float downX = 0, downY = 0, upX = 0, upY = 0;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        imageView = this.findViewById(R.id.imageView);
        
        Display currentDisplay = getWindowManager().getDefaultDisplay();
        float dw = currentDisplay.getWidth();
        float dh = currentDisplay.getHeight();
        
        bitmap = Bitmap.createBitmap((int) dw, (int) dh, Bitmap.Config.ARGB_8888);
        canvas = new Canvas(bitmap);
        paint = new Paint();
        paint.setColor(Color.BLACK);
        
        imageView.setImageBitmap(bitmap);
        imageView.setOnTouchListener(this);
    }

    public boolean onTouch(View v, MotionEvent event) {
        int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                downX = event.getX();
                downY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                // สำหรับเส้นต่อเนื่อง ควรวาดใน MOVE
                break;
            case MotionEvent.ACTION_UP:
                upX = event.getX();
                upY = event.getY();
                canvas.drawLine(downX, downY, upX, upY, paint);
                imageView.invalidate(); // รีเฟรชหน้าจอ
                break;
            case MotionEvent.ACTION_CANCEL:
                break;
            default:
                break;
        }
        return true; // true = consume event
    }
}

ปรับปรุงให้วาดเส้นต่อเนื่อง (Smooth Drawing)

โค้ดต้นฉบับวาดเฉพาะเส้นตรงจากจุดเริ่มถึงจุดสิ้นสุด สำหรับการวาดเส้นโค้งนุ่มตามนิ้ว ควรแก้ไขใน ACTION_MOVE:

case MotionEvent.ACTION_MOVE:
    upX = event.getX();
    upY = event.getY();
    canvas.drawLine(downX, downY, upX, upY, paint);
    imageView.invalidate();
    downX = upX; // อัปเดตจุดเริ่มต้นใหม่
    downY = upY;
    break;

การเพิ่มคุณสมบัติเส้น

paint.setStrokeWidth(5);        // ความหนาเส้น
paint.setStrokeCap(Paint.Cap.ROUND); // ปลายเส้นมน
paint.setAntiAlias(true);       // ป้องกันเส้นขรุขระ
paint.setStyle(Paint.Style.STROKE);

การทดสอบ

รันแอป ลากนิ้วบนหน้าจอ จะเห็นเส้นตามลูกเล่นของนิ้ว