Android调整画笔的粗细

基于绘制进度条的基础上实现调整画笔粗细的功能

首先呢就是创建一个类继承于View来管理我们绘制的控件，然后完成进度画笔、线条画笔、圆点画笔相关的初始化操作：

image.png
image.png

然后可以大致规划一下我们的布局：

image.png

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<LinearLayout
    android:id="@+id/ll_operation"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent"
    android:background="@color/colorPrimary"
    android:gravity="center">

</LinearLayout>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/ll_operation"
        app:layout_constraintTop_toTopOf="parent"
        >
        <!--画笔粗细调整-->
        <swu.zht.paintswidth_jianshu.Slider
            android:id="@+id/slider"
            android:layout_width="30dp"
            android:layout_height="match_parent"
            android:background="@color/colorAccent"
            android:layout_marginLeft="20dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            app:layout_constraintLeft_toLeftOf="parent"
            />
        <!--画板-->
        <swu.zht.paintswidth_jianshu.drawBoardView
            android:id="@+id/iv_board"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            app:layout_constraintLeft_toRightOf="@+id/slider"
            app:layout_constraintRight_toLeftOf="@+id/ll_colorboard"
            android:background="#FFF" >
        </swu.zht.paintswidth_jianshu.drawBoardView>
        <!--颜色按钮-->
        <LinearLayout
            android:id="@+id/ll_colorboard"
            android:layout_width="60dp"
            android:layout_height="match_parent"
            android:orientation="vertical"
            app:layout_constraintRight_toRightOf="parent"
            android:layout_marginRight="20dp"
            app:layout_constraintLeft_toRightOf="@+id/iv_board"
            android:background="#FFF666"
            android:gravity="center">
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

大致差不多是这个样子

image.png

然后和之前进度条绘制的讲解一样 添加进度条
与之不同的是再进度条上添加了一个小圆点

 protected void onDraw(Canvas canvas) {
        if(getWidth() > getHeight()){
            //横着
            //背景条
            canvas.drawLine(0,getHeight()/2,
                    getWidth(),getHeight()/2,linePaint);

            //进度条
            if (touchPosition > 0){
                canvas.drawLine(0,getHeight()/2,
                        touchPosition,getHeight()/2,progressPaint);
            }

            //点
            radius = getHeight()/thumbScale;
            if(touchPosition < radius){
                cx = radius;
            }else if(touchPosition > getWidth() - radius){
                cx = getWidth() - radius;
            }else{
                cx = (int)touchPosition;
            }
            cy = getHeight()/2;

        }else{
            //竖着
            canvas.drawLine(getWidth()/2,
                    0,getWidth()/2,getHeight(),linePaint);

            if(touchPosition > 0){
                canvas.drawLine(getWidth()/2,
                        0,getWidth()/2,touchPosition,progressPaint);
            }

            radius = getWidth()/thumbScale;
            cx = getWidth()/2;
            if (touchPosition < radius){
                cy = radius;
            }else if(touchPosition > getHeight() - radius) {
                cy = getHeight() - radius;
            }else{
                cy = (int)touchPosition;
            }

        }

            canvas.drawCircle(cx,cy,radius,thumbPaint);

    }

运行结果大概是这个样子

image.png

然后给圆点添加touch时间 让点击它的时候放大，松开后尺寸还原，并且移动的过程中进度条的颜色发生改变

public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()){
            case MotionEvent.ACTION_DOWN:
                //小圆点放大
                thumbScale = 2;
                //获取当前触摸点的值x y
                if(getWidth() > getHeight()){
                    //屏幕横向 y不变 x变
                    touchPosition = event.getX();
                }else{
                    //屏幕竖向 x不变 y变
                    touchPosition = event.getY();
                }
                break;
            case MotionEvent.ACTION_MOVE:
                //获取当前触摸点的值x y
                if(getWidth() > getHeight()){
                    //屏幕横向 y不变 x变
                    touchPosition = event.getX();
                    if(touchPosition < 0){
                        touchPosition = 0;
                    }else if (touchPosition > getWidth()){
                        touchPosition = getWidth();
                    }
                }else{
                    //屏幕竖向 x不变 y变
                    touchPosition = event.getY();
                    if(touchPosition < 0){
                        touchPosition = 0;
                    }else if(touchPosition > getHeight()){
                        touchPosition = getHeight();
                    }
                }
                break;
            case MotionEvent.ACTION_UP:
                thumbScale = 3;
                break;
        }
            invalidate();
        return true;
    }

image.png

画笔粗细的实现在下个项目 实现画布的操作后为大家讲解