add a circle at the edge of arc android?

问题:

how to add small circle at the edge of arc.
and it should be also move with arc edge in the clock direction.
right now i am successfully animate the arc using changing the sweep angle.
and black dot is remaining.

below is the code of getView and animation class

--- init method and implement constructor ----

 mRectF = new RectF(mWidth / 2 - 360, mHeight / 2 - 360, mWidth / 2 + 360, mHeight / 2 + 360);

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    //draw circle background
    mPaint.setColor(getResources().getColor(R.color.timer_background_color));
    canvas.drawCircle(mWidth / 2, mHeight / 2, 360, mPaint);

    mPaint.setColor(getResources().getColor(R.color.actionbar_back_color));
    canvas.drawArc(mRectF, mStartAnagle, mSweepAngle, false, mPaint);
}

public class TimerAnimation extends Animation{

    public TimerAnimation (float startAngle, float sweepAngle, long duration) {
        mStartAnagle = startAngle;
        mSweepAngle = sweepAngle;
        setDuration(duration);
        setRepeatCount(Animation.INFINITE);
        setInterpolator(new LinearInterpolator());
    }

    @Override
    protected void applyTransformation(float interpolatedTime, Transformation t) {
        if (!isComplete) {
            mSweepAngle = mSweepAngle + 6;
            if (mSweepAngle >= 360) {
                isComplete = true;
                mSweepAngle = 360;
            }
        } else {
            mStartAnagle = mStartAnagle + 6;
            mSweepAngle = mSweepAngle - 6;
            if (mStartAnagle >= 360)
                mStartAnagle = 0;
            if (mStartAnagle == 270 || mSweepAngle <= 0) {
                isComplete = false;
                mSweepAngle = 0;
            }
        }
        invalidate();
    }
}

回答1:

Maybe you should use Path:

Path path = new Path();
// Set the starting position of the path to (0,0).
path.moveTo(0, 0);
path.arcTo(...); //draw your arc here
path.circleTo(); //draw a small circle here at the end of arc

Also maybe you should calc the arc's end position and use as a center for small circle.

回答2:

Step 1: Calculate the position of the black dot

Suggest the central position is (centerX, centerY), the position of black dot is (x,y), then,

x = radius * cos(mStartAnagle+mSweepAngle) + centerX;
y = radius * sin(mStartAnagle+mSweepAngle) + centerY;

Step 2: Draw the black dot

Suggest the dot image is R.drawable.dot ,

Bitmap bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.dot) 
                             .copy(Bitmap.Config.ARGB_8888, true);
canvas.drawBitmap(bitmap, x, y, null);