基于绘制进度条的基础上实现调整画笔粗细的功能
首先呢就是创建一个类继承于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
画笔粗细的实现在下个项目 实现画布的操作后为大家讲解
网友评论