Android:绘制弧而不重置之前绘制的圆圈

时间:2016-01-15 07:15:04

标签: android animation draw

我正在尝试绘制一个代表时间的圆圈,在每个完整的圆圈之后,我想更改颜色以向用户指示下一个时间单位已启动并绘制上一个圆圈颜色而不是重置如图所示在下面的例子中。

我正在尝试使用Draw Arc方法以下列方式绘制圆圈

canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);

扫掠角度由对象动画师控制:

outerCircleAnimator = ObjectAnimator.ofFloat(timeView, TimeView.SET_SWEEPWANGLE, 0, 360);

使用以下代码,我能够实现以下目标 enter image description here

以下是我的View类:

public class TimeView extends View {

final protected Paint bgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
final protected Paint fgPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
final protected Paint textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
private RectF mRect = new RectF();
private float sweepAngle;
private float radiusInDPI = 100;
private float radiusInPixels;
private float strokeWidthInDPI = 4;
private float stokeWidthInPixels;
private float dpi;
private int heightByTwo;
private int widthByTwo;

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

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

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

@Override
public void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    heightByTwo = h / 2;
    widthByTwo = w / 2;
    mRect = new RectF(w / 2 - radiusInPixels, h / 2 - radiusInPixels, w / 2 + radiusInPixels, h / 2 + radiusInPixels);
}

private void init() {
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    dpi = metrics.density;
    radiusInPixels = dpi * radiusInDPI;
    stokeWidthInPixels = dpi * strokeWidthInDPI;
    bgPaint.setStrokeWidth(stokeWidthInPixels);
    bgPaint.setStyle(Paint.Style.STROKE);
    bgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorAccent));

    fgPaint.setStrokeWidth(stokeWidthInPixels);
    fgPaint.setStyle(Paint.Style.STROKE);
    fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));

    textPaint.setTextSize(24 * 3);
    textPaint.setStyle(Paint.Style.STROKE);
    textPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));


}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
   // canvas.drawCircle(widthByTwo, heightByTwo, radiusInPixels, bgPaint);
    canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);
}


public static final Property<TimeView, Float> SET_SWEEPWANGLE =
        new Property<TimeView, Float>(Float.class, "outerCircleRadiusProgress") {
            @Override
            public Float get(TimeView object) {
                return object.getSweepAngle();
            }

            @Override
            public void set(TimeView object, Float value) {
                object.setSweepAngle(value);
            }
        };

public float getSweepAngle() {
    return sweepAngle;
}

public void setSweepAngle(float sweepAngle) {
    Log.v("Testing", "Sweep angle is " + sweepAngle + " " + (sweepAngle + 270));
    this.sweepAngle = sweepAngle;
    postInvalidate();
}

public void setColor(boolean change) {
    if (change) {
        fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.mint_green));
    } else {
        fgPaint.setColor(ContextCompat.getColor(getContext(), R.color.colorPrimary));
    }
}

}

1 个答案:

答案 0 :(得分:2)

onDraw用于在空白画布上绘制。它始终从头开始。你需要保存最后一个fgPaint和:

protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    if (lastFgPaint != null) {
        canvas.drawArc(mRect, sweepAngle, 360, false, lastFgPaint);
    }
    canvas.drawArc(mRect, 270, sweepAngle, false, fgPaint);
}