Android draw circle with Path

问题:

I'm trying to animate drawing out a circle. In my custom view, I have

private final Paint mPaint = new Paint() {
    {
        setDither(true);
        setStyle(Paint.Style.STROKE);
        setStrokeCap(Paint.Cap.ROUND);
        setStrokeJoin(Paint.Join.ROUND);
        setColor(Color.BLUE);
        setStrokeWidth(30.0f);
        setAntiAlias(true);
    }
};
...
protected void onDraw(Canvas canvas) {
    super.onDraw();
    if (mOval == null) {
        mOval = new RectF(getLeft(), getTop(), getRight(), getBottom());
    }
    if (mPath == null) {
        mPath = new Path();
    mPath.moveTo(0, getHeight() / 2);
    }

    float sweepAngle = Math.min((float) mElapsedTime / 1000 * 60 * 1, 1) * 360;
    if (sweepAngle == 0) {
        mPath.reset();
    } else if (mCurrentAngle != sweepAngle) {
    mPath.arcTo(mOval, mCurrentAngle, sweepAngle);
    }
    mCurrentAngle = sweepAngle;
    canvas.drawPath(mPath, mPaint);
}

At intervals, I'm updating mElapsedTime and calling invalidate(). However, nothing is drawn on the screen. I've tried several variations, but to no avail. Is there something I'm doing wrong? Is there an easier way to do this? Given a percentage of a circle, I want to be able to make that much of the circle be what is drawn on the screen.

回答1:

There are two things here:

1. You have to call canvas.drawOval(...) before drawing the arc onto the oval. Otherwise it won't show up. This is why my method didn't work.

2. Canvas has a drawArc method that takes a start angle and a degrees to sweep out. See Canvas.drawArc(RectF, float, float, boolean, Paint). This is what I was looking for to draw circles.

EDIT: here's the relevant code from my View subclass:

private final Paint mArcPaint = new Paint() {
    {
        setDither(true);
        setStyle(Paint.Style.STROKE);
        setStrokeCap(Paint.Cap.ROUND);
        setStrokeJoin(Paint.Join.ROUND);
        setColor(Color.BLUE);
        setStrokeWidth(40.0f);
        setAntiAlias(true);
    }
};

private final Paint mOvalPaint = new Paint() {
    {
        setStyle(Paint.Style.FILL);
        setColor(Color.TRANSPARENT);
    }
};

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    RectF mOval = new RectF(left, top, right, bottom); //This is the area you want to draw on
    float sweepAngle = 270; //Calculate how much of an angle you want to sweep out here
    canvas.drawOval(mOval, mOvalPaint); 
    canvas.drawArc(mOval, 269, sweepAngle, false, mArcPaint); //270 is vertical. I found that starting the arc from just slightly less than vertical makes it look better when the circle is almost complete.
}