Okay so i've been trying to do this for a couple of days and i am getting no where. So i have the following two images:
The First is a RPM Gauge
The Second image is a full white graphic representing rpm gauge being full:
I want to do the following:
I have the user input working i need help with the animation. Here is what i have tried:
I know there is probably an easier or more efficient way of doing this i just don't have a clue. Anyone with any good ideas?
*Note all images are PNG's
Thanks in advance!
As you already found, i would use clip:
I would use
Canvas.clipPath()
with path looking like pie slice starting in the center of circle, like this:
To create clip path use something like:
public class PieView extends View {
private int width = 200;
private int angleStart = 135;
private int sweep = 270;
private Path p;
private Paint paint = new Paint();
public PieView(Context context, AttributeSet attrs) {
super(context, attrs);
p = new Path();
//move into center of the circle
p.setLastPoint(width/2, width/2);
//add line from the center to arc at specified angle
p.lineTo(width/2+(float)Math.cos(Math.toRadians(angleStart))*(width/2),
width/2+(float)Math.sin(Math.toRadians(angleStart))*(width/2));
//add arc from start angle with specified sweep
p.addArc(new RectF(0, 0, width, width), angleStart, sweep);
//from end of arc return to the center of circle
p.lineTo(width/2, width/2);
paint.setColor(Color.RED);
paint.setStrokeWidth(1);
paint.setStyle(Style.STROKE);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawRect(0,0,width,width, paint);
canvas.drawPath(p,paint);
}
}