Android 开发 - 一些画板第三方库（DrawBoard、FingerPaintView、PaletteLib）

一、DrawBoard

1、Dependencies

模块级 build.gradle

groovy 复制代码

implementation 'com.github.jenly1314:drawboard:1.1.0'

2、Test

（1）Activity Layout

activity_draw_board.xml

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".DrawBoardActivity">

    <com.king.drawboard.view.DrawBoardView
        android:id="@+id/dbv_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_undo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="撤销" />

        <Button
            android:id="@+id/btn_redo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="恢复" />

        <Button
            android:id="@+id/btn_clear"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="清空" />

        <Button
            android:id="@+id/btn_eraser"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="橡皮擦" />
    </LinearLayout>
</LinearLayout>

（2）Activity Code

DrawBoardActivity.java

java 复制代码

public class DrawBoardActivity extends AppCompatActivity {

    private boolean eraserFlag = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_draw_board);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        DrawBoardView dbvContainer = findViewById(R.id.dbv_container);
        Button btnUndo = findViewById(R.id.btn_undo);
        Button btnRedo = findViewById(R.id.btn_redo);
        Button btnClear = findViewById(R.id.btn_clear);
        Button btnEraser = findViewById(R.id.btn_eraser);

        // 设置画笔颜色和粗细
        dbvContainer.setPaintColor(Color.RED);
        dbvContainer.setLineStrokeWidth(5f);

        // 撤销
        btnUndo.setOnClickListener(v -> dbvContainer.undo());

        // 重做
        btnRedo.setOnClickListener(v -> dbvContainer.redo());

        // 清除
        btnClear.setOnClickListener(v -> dbvContainer.clear());

        // 橡皮擦 / 画笔
        btnEraser.setOnClickListener(v -> {
            eraserFlag = !eraserFlag;
            if (eraserFlag) {
                btnEraser.setText("画笔");
                dbvContainer.setDrawMode(DrawBoardView.DrawMode.ERASER);
            } else {
                btnEraser.setText("橡皮擦");
                dbvContainer.setDrawMode(DrawBoardView.DrawMode.DRAW_PATH);
            }
        });
    }
}

二、FingerPaintView

1、Dependencies

模块级 build.gradle

groovy 复制代码

implementation 'com.github.PicnicSupermarket:FingerPaintView:1.2'

settings.gradle，添加 JitPack 仓库

groovy 复制代码

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...

        maven { url 'https://jitpack.io' }
    }
}

2、Test

（1）Activity Layout

activity_finger_paint_view.xml

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".FingerPaintViewActivity">

    <tech.picnic.fingerpaintview.FingerPaintImageView
        android:id="@+id/fpiv_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:src="@drawable/ic_launcher_background"
        app:inEditMode="true" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_undo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="撤销" />

        <Button
            android:id="@+id/btn_clear"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="清空" />
    </LinearLayout>
</LinearLayout>

（2）Activity Code

FingerPaintViewActivity.java

java 复制代码

public class FingerPaintViewActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_finger_paint_view);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        FingerPaintImageView fpivContainer = findViewById(R.id.fpiv_container);
        Button btnUndo = findViewById(R.id.btn_undo);
        Button btnClear = findViewById(R.id.btn_clear);

        // 设置画笔颜色和粗细
        fpivContainer.setStrokeColor(Color.RED);
        fpivContainer.setStrokeWidth(10f);

        // 撤销
        btnUndo.setOnClickListener(v -> fpivContainer.undo());

        // 清除
        btnClear.setOnClickListener(v -> fpivContainer.clear());
    }
}

三、PaletteLib

1、Dependencies

模块级 build.gradle

groovy 复制代码

implementation 'com.gitee.osard:palettelib:1.3.0'

settings.gradle，添加 JitPack 仓库

groovy 复制代码

dependencyResolutionManagement {
    repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
    repositories {
        ...

        maven { url 'https://jitpack.io' }
    }
}

2、Test

（1）Activity Layout

activity_palette_lib.xml

xml 复制代码

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".PaletteLibActivity">

    <com.mjsoftking.palettelib.PaletteImageView
        android:id="@+id/piv_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <Button
            android:id="@+id/btn_undo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="撤销" />

        <Button
            android:id="@+id/btn_clear"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="5dp"
            android:layout_weight="1"
            android:text="清空" />
    </LinearLayout>
</LinearLayout>

（2）Activity Code

PaletteLibActivity.java

java 复制代码

public class PaletteLibActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        EdgeToEdge.enable(this);
        setContentView(R.layout.activity_palette_lib);
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
            Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
            return insets;
        });

        PaletteImageView pivContainer = findViewById(R.id.piv_container);
        Button btnUndo = findViewById(R.id.btn_undo);
        Button btnClear = findViewById(R.id.btn_clear);

        // 设置画笔颜色和粗细
        pivContainer.palette.setPaintColor(R.color.black);
        pivContainer.palette.setStrokeWidth(10f);

        // 撤销
        btnUndo.setOnClickListener(v -> pivContainer.palette.revocation());

        // 清除
        btnClear.setOnClickListener(v -> pivContainer.palette.clear());
    }
}