How to cut a circle on one side
Hi I am trying to create a circle using canvas as shown below.
But now I can only do the following.
I don't understand how to do this. I need to cut a circle on one side and only need to fill that circle border.
Here is my code for review.
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
// Clear canvas
canvas.drawColor(Color.TRANSPARENT);
// Draw Ticks and colored arc
drawTicks(canvas);
}
private void drawTicks(Canvas canvas) {
float availableAngle = 160;
float majorStep = (float) (majorTickStep/ maxSpeed *availableAngle);
float majorTicksLength = 30;
RectF oval = getOval(canvas, 1);
float radius = oval.width()*0.35f;
float currentAngle = 10;
double curProgress = 0;
while (currentAngle <= 170) {
if (labelConverter != null) {
canvas.save();
canvas.rotate(180 + currentAngle, oval.centerX(), oval.centerY());
float txtX = oval.centerX() + radius + majorTicksLength/2 + 8;
float txtY = oval.centerY();
canvas.rotate(+90, txtX, txtY);
//canvas.drawText(labelConverter.getLabelFor(curProgress, maxSpeed), txtX, txtY, txtPaint);
canvas.restore();
}
currentAngle += majorStep;
curProgress += majorTickStep;
}
RectF smallOval = getOval(canvas, 0.7f);
colorLinePaint.setColor(defaultColor);
//canvas.drawArc(smallOval, 185, 170, false, colorLinePaint);
canvas.drawCircle(250, 210, 180, colorLinePaint);
for (ColoredRange range: ranges) {
colorLinePaint.setColor(range.getColor());
//canvas.drawArc(smallOval, (float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), false, colorLinePaint);
//canvas.drawArc(smallOval, (float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), false, colorLinePaint);
//canvas.drawCircle((float) (190 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), 100, colorLinePaint);
//canvas.drawCircle((float)(300 + range.getBegin()/ maxSpeed *160), (float) ((range.getEnd() - range.getBegin())/ maxSpeed *160), 180, colorLinePaint);
}
}
private RectF getOval(Canvas canvas, float factor) {
RectF oval;
final int canvasWidth = canvas.getWidth() - getPaddingLeft() - getPaddingRight();
final int canvasHeight = canvas.getHeight() - getPaddingTop() - getPaddingBottom();
if (canvasHeight*2 >= canvasWidth) {
oval = new RectF(0, 0, canvasWidth*factor, canvasWidth*factor);
} else {
oval = new RectF(0, 0, canvasHeight*2*factor, canvasHeight*2*factor);
}
oval.offset((canvasWidth-oval.width())/2 + getPaddingLeft(), (canvasHeight*2-oval.height())/2 + getPaddingTop());
return oval;
}
Really stuck on this. Please give me a hint or link.
+3
source to share
1 answer
i created a View for you .. it might help .. just try it ... its the only basic view ... i think it will give an idea.
package abbitfoot.likhil.customeprogressbar;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ProgressBar;
public class CustomeView extends View {
Paint red=new Paint();
Paint white=new Paint();
Paint bg=new Paint();
int radiusBg=200;
public CustomeView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
init();
}
private void init(){
red.setColor(Color.RED);
white.setColor(Color.WHITE);
bg.setColor(Color.rgb(0x99, 0x99, 0x99));
}
@Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.save();
canvas.drawCircle(getWidth()/2, getHeight()/2, radiusBg, bg);
Rect oval=new Rect(getWidth()/2-radiusBg+10, getHeight()/2-radiusBg+10,getWidth()/2+radiusBg-10,getHeight()/2+radiusBg-10 );
RectF rectF=new RectF(oval);
canvas.drawArc(rectF, 140,200,true, red);
canvas.drawArc(rectF, 340,60,true, white);
canvas.drawCircle(getWidth()/2, getHeight()/2, radiusBg-25, bg);
canvas.restore();
}
}
hope this helps you ... and wish this is the correct method i guess.
0
source to share