如何使用 OnClick 在自定义视图中增加足弓长度？

Question

我有一个自定义视图（圆形），其中部分填充有拱形（红色）。这是图片https://gyazo.com/72e19cb97fd9f2adac2259c3855cf136。

我想将我的自定义视图分成几个部分，单击按钮时我画一个拱形。 1 次点击 1/5 被拱形覆盖，2 次点击 2/5，依此类推...直到 5.

当我按下增量按钮时，如何用红色 Arch 填充我的视图？（我不明白绘图部分）

这是我已经尝试过的 - 我的 CustomView class:

public class MySimpleView extends View {

private static final int PAINT_FLAGS = Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG;
private static final int STROKE_WIDTH = 40;
private static final int SECTIONS = 5;
private Paint basePaint, degreesPaint, centerPaint, rectPaint;
private RectF rect;
private int centerX, centerY, radius;
private int fullArchSliceLength;
private int colorArchLineLength;

public MySimpleView(Context context) {
    super(context);
    init();
}

public MySimpleView(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
}

public MySimpleView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init();
}

private void init() {
    rectPaint = new Paint(PAINT_FLAGS);
    rectPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
    rectPaint.setStyle(Paint.Style.FILL);

    centerPaint = new Paint(PAINT_FLAGS);
    centerPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
    centerPaint.setStyle(Paint.Style.FILL);

    basePaint = new Paint(PAINT_FLAGS);
    basePaint.setStyle(Paint.Style.STROKE);
    basePaint.setStrokeWidth(STROKE_WIDTH);
    basePaint.setColor(ContextCompat.getColor(getContext(), R.color.darkGrey));

    degreesPaint = new Paint(PAINT_FLAGS);
    degreesPaint.setStyle(Paint.Style.STROKE);
    degreesPaint.setStrokeCap(Paint.Cap.ROUND);
    degreesPaint.setStrokeJoin(Paint.Join.ROUND);

    degreesPaint.setStrokeWidth(STROKE_WIDTH);
    degreesPaint.setColor(Color.RED);

    fullArchSliceLength = 360 / SECTIONS;
    colorArchLineLength = fullArchSliceLength - 2;

}

public void swapColor() {
    degreesPaint.setColor(degreesPaint.getColor() == Color.RED ? Color.GREEN :
            Color.RED);
    postInvalidate();
}


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

    if (rect == null) {
        centerX = getMeasuredWidth() / 2;
        centerY = getMeasuredHeight() / 2;
        radius = Math.min(centerX, centerY);

        int startTop = STROKE_WIDTH / 2;
        int startLeft = STROKE_WIDTH / 2;

        int endBottom = 2 * radius - startTop;
        int endRight = 2 * radius - startTop;

        rect = new RectF(startTop, startLeft, endRight, endBottom);
    }

    canvas.drawRect(rect, rectPaint);

    canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, basePaint);
    // TODO: 2019-04-26 LOOK HERE

    for (int i = 3; i < SECTIONS; i++) {
        canvas.drawArc(rect, i * fullArchSliceLength,colorArchLineLength,
                false, degreesPaint);
    }
    // TODO: 2019-04-26 LOOK HERE
    //        canvas.drawArc(rect, 0F, 90F, false, degreesPaint);

   canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, centerPaint);
}
}

Answer 1

public class MySimpleView extends View {

    private static final int PAINT_FLAGS = Paint.ANTI_ALIAS_FLAG | Paint.DITHER_FLAG;
    private static final int STROKE_WIDTH = 40;
    private static final int SECTIONS = 5;
    private Paint basePaint, degreesPaint, centerPaint, rectPaint;
    private RectF rect;
    private int centerX, centerY, radius;
    private int fullArchSliceLength;
    private int colorArchLineLength;
    private int currentSections = 1;

    public MySimpleView(Context context) {
        super(context);
        init();
    }

    public MySimpleView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public MySimpleView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        rectPaint = new Paint(PAINT_FLAGS);
        rectPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
        rectPaint.setStyle(Paint.Style.FILL);

        centerPaint = new Paint(PAINT_FLAGS);
        centerPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
        centerPaint.setStyle(Paint.Style.FILL);

        basePaint = new Paint(PAINT_FLAGS);
        basePaint.setStyle(Paint.Style.STROKE);
        basePaint.setStrokeWidth(STROKE_WIDTH);
        basePaint.setColor(ContextCompat.getColor(getContext(), android.R.color.darker_gray));

        degreesPaint = new Paint(PAINT_FLAGS);
        degreesPaint.setStyle(Paint.Style.STROKE);
        degreesPaint.setStrokeCap(Paint.Cap.ROUND);
        degreesPaint.setStrokeJoin(Paint.Join.ROUND);

        degreesPaint.setStrokeWidth(STROKE_WIDTH);
        degreesPaint.setColor(Color.RED);

        fullArchSliceLength = 360 / SECTIONS;
        colorArchLineLength = fullArchSliceLength - 2;

    }

    //just a simple increment function
    public void increment() {
        if (currentSections < SECTIONS) {
            currentSections++;
            postInvalidate();
        }
    }

    public void swapColor() {
        degreesPaint.setColor(degreesPaint.getColor() == Color.RED ? Color.GREEN :
                Color.RED);
        postInvalidate();
    }


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

        if (rect == null) {
            centerX = getMeasuredWidth() / 2;
            centerY = getMeasuredHeight() / 2;
            radius = Math.min(centerX, centerY);

            int startTop = STROKE_WIDTH / 2;
            int startLeft = STROKE_WIDTH / 2;

            int endBottom = 2 * radius - startTop;
            int endRight = 2 * radius - startTop;

            rect = new RectF(startTop, startLeft, endRight, endBottom);
        }

        canvas.drawRect(rect, rectPaint);

        canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH / 2, basePaint);

        /*
        startAngle is set to 270 so it will start at the top.
        0 is right
        90 bottom
        180 left
        270 top
         */
        canvas.drawArc(rect, 270, currentSections * colorArchLineLength, false, degreesPaint);

        canvas.drawCircle(centerX, centerY, radius - STROKE_WIDTH, centerPaint);
    }
}

基本上你的逻辑有点不对。调用 drawArc 时，第一个参数将是您所在行的 startAngle （意思是该行从圆的顶部、左侧、右侧、底部开始）。每个学位对应的内容我都写在评论里了。 sweepAngle 是您绘制的度数（您已经正确计算）。希望它能像您期望的那样工作！

如何使用 OnClick 在自定义视图中增加足弓长度？

How to increment arch length in custom view with OnClick?

android

canvas

view

android-custom-view

ondraw