I have a button which I want to draw a rounded corner rectangle around it progressively after I clicked it. I try to draw bezier curves in a canvas however I could not find the formula of a bezier curve that could paint a rounded corner rectangle. So I end up drawing four straight lines to create a rectangle without rounded corners. Below is the relative code:
public class CustomProgressBar extends View{
private Paint paint = new Paint();
public HomeFragment mHomeFragment;
private Context context;
private Path path;
int width = 178;
int height = 58;
int x1=0;
int y1=0;
int x2=width;
int y2=0;
int x3=width;
int y3=height;
int x4=0;
int y4=height;
int currentLine=0;
int stepLength = 8;
public CustomProgressBar(Context context) {
super( context );
}
public CustomProgressBar(Context context, AttributeSet attrs) {
super( context, attrs );
this.context = context;
}
public CustomProgressBar(Context context, AttributeSet attrs, int defStyle) {
super( context, attrs, defStyle );
}
public void init(HomeFragment homeFragment){
this.mHomeFragment = homeFragment;
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(6);
paint.setColor(Color.rgb(203,156,76));
setCoordinates();
}
public void setCoordinates(){
new Thread(new Runnable() {
@Override
public void run() {
while (true){
switch (currentLine){
case 0:
if(x1<width) {
x1 += stepLength;
}else {
currentLine = 1;
}
break;
case 1:
if(y2<=height){
y2 += stepLength;
}else {
currentLine = 2;
}
break;
case 2:
if(x3>=0){
x3 -= stepLength;
}else {
currentLine = 3;
}
break;
case 3:
if(y4 >= 0){
y4 -= stepLength;
}else {
currentLine = 0;
x1 = 0;
y2 = 0;
x2 = width;
y2 = 0;
x3 = width;
y3 = height;
x4 = 0;
y4 = height;
}
break;
}
mHomeFragment.getActivity().runOnUiThread(new Runnable() {
@Override
public void run() {
invalidate();
}
});
try {
Thread.sleep(50);
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}).start();
}
int max=100;
int progress=20;
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
switch (currentLine){
case 0:
canvas.drawLine(0, 0, x1, y1, paint);
break;
case 1:
canvas.drawLine(0, 0, x1, y1, paint);
canvas.drawLine(width, 0, x2, y2, paint);
break;
case 2:
canvas.drawLine(0, 0, x1, y1, paint);
canvas.drawLine(width, 0, x2, y2, paint);
canvas.drawLine(width, height, x3, y3, paint);
break;
case 3:
canvas.drawLine(0, 0, x1, y1, paint);
canvas.drawLine(width, 0, x2, y2, paint);
canvas.drawLine(width, height, x3, y3, paint);
canvas.drawLine(0, height, x4, y4, paint);
break;
}
}
}
Does anyone know how to draw a rounded corner rectangle with a canvas? Any help is much appreciated!