Android path环形

Android 使用path绘制环形

（初稿，待完善，请期待）

  

 

注意：刻度尺千万不能用 DashPathEffect 否则会出现精度问题

刻度尺的间距一定要是能被整除的

 

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

import androidx.annotation.Nullable;



/**
 * @author : Lambert
 * date   : 2021/3/8 10:51 AM
 */
public class CircleProgressView extends View {


    int mDiam = 800; //直径（环形背景）
    int left = 100;
    int top = 100;

    int mDiam2 = 700; //直径（数字）
    int left2 = 150;
    int top2 = 150;

    Path mPath;
    Paint mPaintProgress;
    Paint mPaintProgressColor;

    RectF mRectF;
    RectF mRectF2;


    public CircleProgressView(Context context ) {
        super(context, null);
    }

    public CircleProgressView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        initView();
    }

    private void initView(){

        mPath = new Path();
        mPath.reset();

        mRectF = new RectF(left,top,left+ mDiam,top+ mDiam);
        mRectF2 = new RectF(left2,top2,left2+ mDiam2,top2+ mDiam2);


        mPaintProgress = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintProgress.setStrokeWidth(40);
        mPaintProgress.setColor(0xff454545);
        mPaintProgress.setStyle(Paint.Style.STROKE);
        mPaintProgress.setStrokeCap(Paint.Cap.ROUND);
        mPaintProgress.setAlpha(40);

        mPaintProgressColor = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaintProgressColor.setStrokeWidth(40);
        mPaintProgressColor.setColor(0xffD7AE6B);
        mPaintProgressColor.setStyle(Paint.Style.STROKE);
        mPaintProgressColor.setStrokeCap(Paint.Cap.ROUND);


        //绘制第一个环形背景
        mPath.arcTo(mRectF,135,270);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.drawPath(mPath,mPaintProgress);


        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xffeeeeee);
        paintLine.setStrokeWidth(5);
        canvas.drawLine(500,100,500,900,paintLine);
        canvas.drawLine(100,500,900,500,paintLine);


        int p1 = (int) (mDiam /2 * Math.sin(Math.PI* 45 /180));

        int x1 = mDiam /2 - p1 + left;
        int y1 = x1;

        int x2 = mDiam /2 + p1 + left;
        int y2 = x2;

        int x3 = x2;
        int y3 = y1;

        int x4 = x1;
        int y4 = y2;
        canvas.drawLine(x1,y1,x2,y2,paintLine);
        canvas.drawLine(x3,y3,x4,y4,paintLine);

        //绘制带弧度的文字（学好了还能做盖章文案）
        addTextPath(canvas);

        //添加刻度尺
        addKeDu1(canvas);
        addKeDu2(canvas);
        addKeDu3(canvas);
        addKeDu4(canvas);
        addKeDu5(canvas);
        addKeDu6(canvas);

        addEndKeDu(canvas);

        //添加进度
        addProgress(canvas);
    }



    private void addProgress(Canvas canvas){

        Path mPathProgress = new Path();
        mPathProgress.reset();
        //70%的进度
        float progress = 0.7f;

        float sweepAngle = progress * 270;

        mPathProgress.arcTo(mRectF,135,sweepAngle);
        canvas.drawPath(mPathProgress,mPaintProgressColor);
    }



    //Android Canvas沿着Path绘制文字
    private void addTextPath(Canvas canvas){

        int startAngle = 135; //开始角度
        int sweepAngle = 45;  //总共 270度角，分6次则为 45度

        String[] content={"0-10W","10-20W","20-30W","30-40W","40-50W","50W+"};
        Paint  mTextPaint = new Paint();
        mTextPaint.setColor(Color.BLACK);
        mTextPaint.setTextSize(40);
        Path path=null;


        for(int i=0;i<6;i++){
            path=new Path();
            path.addArc(mRectF2, startAngle, sweepAngle);
            float textLength = mTextPaint.measureText(content[i]);//获得字体长度
            float hOffset=(float)(mDiam2 *Math.PI*(sweepAngle*1.0/360)/2-textLength/2);//The distance along the path
            float vOffset=(float)(mDiam2 /2/6); //垂直路径方向上的偏移
            canvas.drawTextOnPath(content[i],path,hOffset,vOffset,mTextPaint);

            Log.d("Circle","hOffset:"+hOffset +" vOffset: "+vOffset);
            startAngle+=sweepAngle;
        }

    }


    private void addKeDu1(Canvas canvas){

        int pointX = 500;
        int pointY = 500;


        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(12);

        Paint paintLine2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(4);


        float angle = 45;
        //刻度直径
        int radius = 800 - 40;
        int length = 80; //刻度线长度

        int px_a1 = (int) (radius/2 * Math.cos(Math.PI* angle /180));
        int py_a1 = (int) (radius/2 * Math.sin(Math.PI* angle /180));
        int px_a_1 = pointX - px_a1;
        int py_a_1 = pointY+ py_a1;

        int radius2 = radius - length;
        int px_a2 = (int) (radius2/2 * Math.cos(Math.PI* angle /180));
        int py_a2 = (int) (radius2/2 * Math.sin(Math.PI* angle /180));
        int px_a_2 = pointX - px_a2;
        int py_a_2 = pointY+ py_a2;

        //绘制粗刻度线
        canvas.drawLine(px_a_1,py_a_1,px_a_2,py_a_2,paintLine);

        //绘制细刻度线
        int length2 = 50;
        for(int i = 1;i<9;i++){

            float angle2 = 45 - (i* 45 / 9);
            int px_a3 = (int) (radius/2 * Math.cos(Math.PI* angle2 /180));
            int py_a3 = (int) (radius/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_3 = pointX - px_a3;
            int py_a_3 = pointY+ py_a3;

            int radius3 = radius - length2;
            int px_a4 = (int) (radius3/2 * Math.cos(Math.PI* angle2 /180));
            int py_a4 = (int) (radius3/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_4 = pointX - px_a4;
            int py_a_4 = pointY+ py_a4;

            canvas.drawLine(px_a_3,py_a_3,px_a_4,py_a_4,paintLine2);
        }

    }

    private void addKeDu2(Canvas canvas){

        int pointX = 500;
        int pointY = 500;


        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(12);

        Paint paintLine2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(4);


        float angle = 0;
        int radius = 800 - 40;
        int length = 80;

        int px_a1 = (int) (radius/2 * Math.cos(Math.PI* angle /180));
        int py_a1 = (int) (radius/2 * Math.sin(Math.PI* angle /180));
        int px_a_1 = pointX - px_a1;
        int py_a_1 = pointY+ py_a1;

        int radius2 = radius - length;
        int px_a2 = (int) (radius2/2 * Math.cos(Math.PI* angle /180));
        int py_a2 = (int) (radius2/2 * Math.sin(Math.PI* angle /180));
        int px_a_2 = pointX - px_a2;
        int py_a_2 = pointY+ py_a2;

        canvas.drawLine(px_a_1,py_a_1,px_a_2,py_a_2,paintLine);

        int length2 = 50;
        for(int i = 1;i<9;i++){

            float angle2 = angle + (i* 45 / 9);
            int px_a3 = (int) (radius/2 * Math.cos(Math.PI* angle2 /180));
            int py_a3 = (int) (radius/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_3 = pointX - px_a3;
            int py_a_3 = pointY - py_a3;

            int radius3 = radius - length2;
            int px_a4 = (int) (radius3/2 * Math.cos(Math.PI* angle2 /180));
            int py_a4 = (int) (radius3/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_4 = pointX - px_a4;
            int py_a_4 = pointY - py_a4;

            canvas.drawLine(px_a_3,py_a_3,px_a_4,py_a_4,paintLine2);
        }

    }

    private void addKeDu3(Canvas canvas){

        int pointX = 500;
        int pointY = 500;


        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(12);

        Paint paintLine2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(4);


        float angle = 45;
        int radius = 800 - 40;
        int length = 80;

        int px_a1 = (int) (radius/2 * Math.cos(Math.PI* angle /180));
        int py_a1 = (int) (radius/2 * Math.sin(Math.PI* angle /180));
        int px_a_1 = pointX - px_a1;
        int py_a_1 = pointY - py_a1;

        int radius2 = radius - length;
        int px_a2 = (int) (radius2/2 * Math.cos(Math.PI* angle /180));
        int py_a2 = (int) (radius2/2 * Math.sin(Math.PI* angle /180));
        int px_a_2 = pointX - px_a2;
        int py_a_2 = pointY - py_a2;

        canvas.drawLine(px_a_1,py_a_1,px_a_2,py_a_2,paintLine);

        int length2 = 50;
        for(int i = 1;i<9;i++){

            float angle2 = angle + (i* 45 / 9);
            int px_a3 = (int) (radius/2 * Math.cos(Math.PI* angle2 /180));
            int py_a3 = (int) (radius/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_3 = pointX - px_a3;
            int py_a_3 = pointY - py_a3;

            int radius3 = radius - length2;
            int px_a4 = (int) (radius3/2 * Math.cos(Math.PI* angle2 /180));
            int py_a4 = (int) (radius3/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_4 = pointX - px_a4;
            int py_a_4 = pointY - py_a4;

            canvas.drawLine(px_a_3,py_a_3,px_a_4,py_a_4,paintLine2);
        }

    }

    private void addKeDu4(Canvas canvas){

        int pointX = 500;
        int pointY = 500;


        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(12);

        Paint paintLine2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(4);


        float angle = 90;
        int radius = 800 - 40;
        int length = 80;

        int px_a1 = (int) (radius/2 * Math.cos(Math.PI* angle /180));
        int py_a1 = (int) (radius/2 * Math.sin(Math.PI* angle /180));
        int px_a_1 = pointX - px_a1;
        int py_a_1 = pointY - py_a1;

        int radius2 = radius - length;
        int px_a2 = (int) (radius2/2 * Math.cos(Math.PI* angle /180));
        int py_a2 = (int) (radius2/2 * Math.sin(Math.PI* angle /180));
        int px_a_2 = pointX - px_a2;
        int py_a_2 = pointY - py_a2;

        canvas.drawLine(px_a_1,py_a_1,px_a_2,py_a_2,paintLine);

        int length2 = 50;
        for(int i = 1;i<9;i++){

            float angle2 = angle + (i* 45 / 9);
            int px_a3 = (int) (radius/2 * Math.cos(Math.PI* angle2 /180));
            int py_a3 = (int) (radius/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_3 = pointX - px_a3;
            int py_a_3 = pointY - py_a3;

            int radius3 = radius - length2;
            int px_a4 = (int) (radius3/2 * Math.cos(Math.PI* angle2 /180));
            int py_a4 = (int) (radius3/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_4 = pointX - px_a4;
            int py_a_4 = pointY - py_a4;

            canvas.drawLine(px_a_3,py_a_3,px_a_4,py_a_4,paintLine2);
        }

    }

    private void addKeDu5(Canvas canvas){

        int pointX = 500;
        int pointY = 500;


        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(12);

        Paint paintLine2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(4);


        float angle = 135;
        int radius = 800 - 40;
        int length = 80;

        int px_a1 = (int) (radius/2 * Math.cos(Math.PI* angle /180));
        int py_a1 = (int) (radius/2 * Math.sin(Math.PI* angle /180));
        int px_a_1 = pointX - px_a1;
        int py_a_1 = pointY - py_a1;

        int radius2 = radius - length;
        int px_a2 = (int) (radius2/2 * Math.cos(Math.PI* angle /180));
        int py_a2 = (int) (radius2/2 * Math.sin(Math.PI* angle /180));
        int px_a_2 = pointX - px_a2;
        int py_a_2 = pointY - py_a2;

        canvas.drawLine(px_a_1,py_a_1,px_a_2,py_a_2,paintLine);

        int length2 = 50;
        for(int i = 1;i<9;i++){

            float angle2 = angle + (i* 45 / 9);
            int px_a3 = (int) (radius/2 * Math.cos(Math.PI* angle2 /180));
            int py_a3 = (int) (radius/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_3 = pointX - px_a3;
            int py_a_3 = pointY - py_a3;

            int radius3 = radius - length2;
            int px_a4 = (int) (radius3/2 * Math.cos(Math.PI* angle2 /180));
            int py_a4 = (int) (radius3/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_4 = pointX - px_a4;
            int py_a_4 = pointY - py_a4;

            canvas.drawLine(px_a_3,py_a_3,px_a_4,py_a_4,paintLine2);
        }

    }

    private void addKeDu6(Canvas canvas){

        int pointX = 500;
        int pointY = 500;


        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(12);

        Paint paintLine2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(4);


        float angle = 180;
        int radius = 800 - 40;
        int length = 80;

        int px_a1 = (int) (radius/2 * Math.cos(Math.PI* angle /180));
        int py_a1 = (int) (radius/2 * Math.sin(Math.PI* angle /180));
        int px_a_1 = pointX - px_a1;
        int py_a_1 = pointY - py_a1;

        int radius2 = radius - length;
        int px_a2 = (int) (radius2/2 * Math.cos(Math.PI* angle /180));
        int py_a2 = (int) (radius2/2 * Math.sin(Math.PI* angle /180));
        int px_a_2 = pointX - px_a2;
        int py_a_2 = pointY - py_a2;

        canvas.drawLine(px_a_1,py_a_1,px_a_2,py_a_2,paintLine);

        int length2 = 50;
        for(int i = 1;i<9;i++){

            float angle2 = angle + (i* 45 / 9);
            int px_a3 = (int) (radius/2 * Math.cos(Math.PI* angle2 /180));
            int py_a3 = (int) (radius/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_3 = pointX - px_a3;
            int py_a_3 = pointY - py_a3;

            int radius3 = radius - length2;
            int px_a4 = (int) (radius3/2 * Math.cos(Math.PI* angle2 /180));
            int py_a4 = (int) (radius3/2 * Math.sin(Math.PI* angle2 /180));
            int px_a_4 = pointX - px_a4;
            int py_a_4 = pointY - py_a4;

            canvas.drawLine(px_a_3,py_a_3,px_a_4,py_a_4,paintLine2);
        }

    }

    private void addEndKeDu(Canvas canvas){
        int pointX = 500;
        int pointY = 500;

        Paint paintLine = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(12);

        Paint paintLine2 = new Paint(Paint.ANTI_ALIAS_FLAG);
        paintLine.setColor(0xff454545);
        paintLine.setStrokeWidth(4);


        float angle = 225;
        int radius = 800 - 40;
        int length = 80;

        int px_a1 = (int) (radius/2 * Math.cos(Math.PI* angle /180));
        int py_a1 = (int) (radius/2 * Math.sin(Math.PI* angle /180));
        int px_a_1 = pointX - px_a1;
        int py_a_1 = pointY - py_a1;

        int radius2 = radius - length;
        int px_a2 = (int) (radius2/2 * Math.cos(Math.PI* angle /180));
        int py_a2 = (int) (radius2/2 * Math.sin(Math.PI* angle /180));
        int px_a_2 = pointX - px_a2;
        int py_a_2 = pointY - py_a2;

        canvas.drawLine(px_a_1,py_a_1,px_a_2,py_a_2,paintLine);
    }
}