Рисование светлой дуги поверх темной дуги делает нижнюю дугу частично видимой

Question

Я делаю пользовательское представление для Android, которое должно загружать анимацию (вращающуюся дугу), мое представление позволяет разработчику устанавливать цвет фона и верхний цвет.

Проблема в том, что когда я рисую светлую дугу поверх черной дуги, я вижу лишь немного этих черных пикселей вокруг моей верхней дуги. Эта проблема не возникает, когда антиалиасинг отключен, но это не вариант, потому что тогда это просто уродливо.

Я пытался нарисовать его на растровом изображении, но это не помогает.

Мое временное решение - сделать верхнюю дугу на 1 пиксель шире, чем нижнюю, но у меня есть такой момент, когда я меняю цвета для классной анимации, и тогда это можно увидеть, если присмотреться.

Answer 1

custom_view

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

import com.example.basil.expensemanager.R;


public class MyProgress extends View {
private int mxSize, mySize;
private Paint mPaint;

private Paint incomeAmountCirlce;
private Paint expenseAmountCirlce;
private Paint innerCirclePaint;
private Paint txtviewCirclePaint;

private float finishedStrokeWidth;
private float unfinishedStrokeWidth;
private float sweepAngle;

private int textColor;
private int expenseColor;
private int incomeColor;
private int strokeWidth;
private int textSize;

private String textContent;
private RectF finishedOuterRect = new RectF();
private RectF unfinishedOuterRect = new RectF();

public MyProgress(Context context) {
    super(context);
    /* init();*/
}

public MyProgress(Context context, AttributeSet attrs) {
    super(context, attrs);
    /* init();*/
}

public MyProgress(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    /* init();*/
}

public int getTextColor() {
    return textColor;
}

public void setTextColor(int textColor) {
    this.textColor = textColor;
}

public float getFinishedStrokeWidth() {
    return finishedStrokeWidth;
}

public void setFinishedStrokeWidth(float finishedStrokeWidth) {
    this.finishedStrokeWidth = finishedStrokeWidth;
}

public float getUnfinishedStrokeWidth() {
    return unfinishedStrokeWidth;
}

public void setUnfinishedStrokeWidth(float unfinishedStrokeWidth) {
    this.unfinishedStrokeWidth = unfinishedStrokeWidth;
}

public String getTextContent() {
    return textContent;
}

public void setTextContent(String textContent) {
    this.textContent = textContent;
}

public int getTextSize() {
    return textSize;
}

public void setTextSize(int textSize) {
    this.textSize = textSize;
}

public float getSweepAngle() {
    return sweepAngle;
}

public void setSweepAngle(float sweepAngle) {
    this.sweepAngle = sweepAngle;
}

public int getIncomeColor() {
    return incomeColor;
}

public void setIncomeColor(int incomeColor) {
    this.incomeColor = incomeColor;
}

public Integer getExpenseColor() {
    return expenseColor;
}

public void setExpenseColor(int expenseColor) {
    this.expenseColor = expenseColor;
}

public int getStrokeWidth() {
    return strokeWidth;
}

public void setStrokeWidth(int strokeWidth) {
    this.strokeWidth = strokeWidth;
}

public void init() {

    txtviewCirclePaint = new Paint();
    txtviewCirclePaint.setColor(getResources().getColor(getTextColor()));
    txtviewCirclePaint.setTextSize(getTextSize());
    txtviewCirclePaint.setFakeBoldText(true);
    txtviewCirclePaint.setAntiAlias(true);


    incomeAmountCirlce = new Paint();
    incomeAmountCirlce.setColor(getResources().getColor(getIncomeColor()));
    incomeAmountCirlce.setStyle(Paint.Style.STROKE);
    incomeAmountCirlce.setAntiAlias(true);
    finishedStrokeWidth = getFinishedStrokeWidth();
    incomeAmountCirlce.setStrokeWidth(finishedStrokeWidth);

    expenseAmountCirlce = new Paint();
    expenseAmountCirlce.setColor(getResources().getColor(getExpenseColor()));
    expenseAmountCirlce.setStyle(Paint.Style.STROKE);
    expenseAmountCirlce.setAntiAlias(true);
    unfinishedStrokeWidth = getUnfinishedStrokeWidth();
    expenseAmountCirlce.setStrokeWidth(unfinishedStrokeWidth);

    innerCirclePaint = new Paint();
    innerCirclePaint.setColor(getResources().getColor(R.color.cardview_light_background));
    innerCirclePaint.setAntiAlias(true);


}

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

    float delta = Math.max(finishedStrokeWidth, unfinishedStrokeWidth);
    finishedOuterRect.set(delta, delta, getWidth() - delta, getHeight() - delta);
    unfinishedOuterRect.set(delta, delta, getWidth() - delta, getHeight() - delta);

    float innerCircleRadius = (getWidth() - Math.min(finishedStrokeWidth, unfinishedStrokeWidth) + Math.abs(finishedStrokeWidth - unfinishedStrokeWidth)) / 2f;
    canvas.drawCircle(getWidth() / 2.0f, getHeight() / 2.0f, innerCircleRadius, innerCirclePaint);
    canvas.drawArc(finishedOuterRect, 270, getSweepAngle(), false, incomeAmountCirlce);
    canvas.drawArc(unfinishedOuterRect, 270 + getSweepAngle(), 360 - getSweepAngle(), false, expenseAmountCirlce);

    float textHeight = txtviewCirclePaint.descent() + txtviewCirclePaint.ascent();
    canvas.drawText(getTextContent(), (getWidth() - txtviewCirclePaint.measureText(getTextContent())) / 2.0f, (getWidth() - textHeight) / 2.0f, txtviewCirclePaint);

}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int parentWidth = MeasureSpec.getSize(widthMeasureSpec);
    int parentHeight = MeasureSpec.getSize(heightMeasureSpec);
    this.setMeasuredDimension(parentWidth / 2, parentHeight / 2);
    // bounds.set(0, 0, MeasureSpec.getSize(widthMeasureSpec), MeasureSpec.getSize(heightMeasureSpec));
    new RectF().set(0, 0, parentWidth / 4, parentHeight / 4);
}


}

Я сделал это на одном из моих проектов, чтобы показать общий доход и расходы в индикаторе выполнения. Надеюсь, что это может помочь вам, если вы чувствуете какие-либо затруднения. Комментарий ниже

В вашей активности используйте это для инициализации

 public void init_decorate_progressbar() {
    float val = calcalute_progressbar_data();
    String totalPercent = "";
    totalPercent = "" + (val / 3.6);
    myProgressBar.invalidate();
    myProgressBar.setExpenseColor(R.color.royalGreenDark);
    myProgressBar.setIncomeColor(R.color.royalGreen);
    myProgressBar.setFinishedStrokeWidth(30);
    myProgressBar.setUnfinishedStrokeWidth(30);
    myProgressBar.setTextColor(R.color.colorPrimaryDark);
    myProgressBar.setTextSize(30);

    if (totalPercent.equalsIgnoreCase("NaN")) {
        myProgressBar.setSweepAngle(0);
        myProgressBar.setTextContent("0%");
        expenseMarkerLayout.setVisibility(View.GONE);
        incomeMarkerLayout.setVisibility(View.GONE);


    } else {
        myProgressBar.setSweepAngle(val);
        int incom = calculateIncomePercent();
        myProgressBar.setTextContent("" + incom + "%");
        txtIncomePercentMarker.setText("" + incom + "%");
        int ex = calculateExpensePercent();
        txtExpensePercentMarker.setText("" + ex + "%");
    }
    myProgressBar.init();
}

в вашей активности XML

 <com.example.basil.expensemanager.SupportClasses.MyProgress
                    android:id="@+id/myProgressBar"
                    android:layout_width="300dp"
                    android:layout_height="300dp"
                    android:layout_centerHorizontal="true"
                    android:layout_below="@id/main_header"
                    android:layout_marginBottom="@dimen/activity_horizontal_margin"
                    android:layout_marginTop="@dimen/activity_horizontal_margin"
                    android:max="100"
                    android:progress="0" />