Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

enter image description here

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();
    }
}
like image 344
Moinkhan Avatar asked Apr 08 '15 13:04

Moinkhan


2 Answers

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.

like image 154
Stan Avatar answered Nov 12 '22 05:11

Stan


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);
like image 34
yummy Avatar answered Nov 12 '22 04:11

yummy