Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Drawing on canvas with paint in better resolution? (Android)

I made a little loading circle with Canvas and Paint. This is my first attempt to use these classes so it could be something I used wrong.

My problem is, that the resolution of painting are too low. I can clearly see the pixels.

Here is the picture you can see.

How could I improve on this?

By the way this is my class:

public class LoadingCircle extends LinearLayout {

public LoadingCircle(Context context, AttributeSet attrs) {
    super(context, attrs);
    setWillNotDraw(false);
}

// time
int countDownTime = 180;

Paint paint = new Paint();
RectF oval = new RectF();
Path path = new Path();

// value
int value = 360 / countDownTime;
// starting progress
int progress = -360 - value;

@Override
public void onDraw(Canvas canvas) {

    super.onDraw(canvas);

    float width = (float) getWidth();
    float height = (float) getHeight();

    float center_x = width / 2, center_y = height / 2;

    float loadingRadius = (float) ((width / 2)*0.85);

    float whiteRadius = (float) (loadingRadius * 1.06);
    float greenRadius = (float) (loadingRadius * 1.14);

    // **background green circle**/

    oval.set(center_x - greenRadius, center_y - greenRadius, center_x + greenRadius, center_y + greenRadius);
    paint.setColor(Color.parseColor("#a3d47b"));
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawArc(oval, 270, 360, true, paint);

    // ****//

    // **background green circle**/

    oval.set(center_x - whiteRadius, center_y - whiteRadius, center_x + whiteRadius, center_y + whiteRadius);
    paint.setColor(Color.parseColor("#ffffff"));
    paint.setStyle(Paint.Style.FILL_AND_STROKE);
    canvas.drawArc(oval, 270, 360, true, paint);

    // **Loading circle**//

    path.addCircle(center_x, center_y, loadingRadius, Path.Direction.CW);

    paint.setColor(Color.parseColor("#71b23c"));
    paint.setStyle(Paint.Style.FILL_AND_STROKE);

    oval.set(center_x - loadingRadius, center_y - loadingRadius, center_x + loadingRadius, center_y + loadingRadius);

    progress = progress + value;

    Log.i("proges: ", progress + "");

    canvas.drawArc(oval, 270, progress, true, paint);

    // /**//

}

public void setCountDownTime(int time) {
    this.countDownTime = time;

    this.value = 360 / countDownTime;

    this.progress = -360 - value;
}

// reseting loading circle
public void reset() {
    this.progress = -360 - value;
    this.invalidate();
}

}
like image 744
Adam Varhegyi Avatar asked Dec 20 '13 13:12

Adam Varhegyi


1 Answers

Declare paint like this:

final Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);

This will enable the antialiasing and you'll get rid of that ugly pixellation.

Or, you can do it in your function:

paint.setAntiAlias(true);
like image 60
Phantômaxx Avatar answered Sep 29 '22 02:09

Phantômaxx