4 replies to this topic

[dunnkers]

I want to create some sort of progress circle like this:
(I made these in paint, not in java)

25%


75%


How would i do this with fillArc()?


What i already have:
I draw the background:

		g.drawOval(0, 0, 100, 100);

I can fill half the oval:

		g.fillArc(0, 0, 100, 100, 0, -180);

How fillArc works:
fillArc(x, y, width, height, startAngle, angle);
- 3 o'clock is 0°
- positive values go clockwise, negative values go counter clockwise


Thanks, Dunnkers.

Edited by dunnkers, 02 February 2011 - 10:01 AM.

[wim DC]

You use math to calculate the width at a certain height in the circle. Then draw a line there. Repeat X times to fill :D

ProgressCircle

import java.awt.Graphics;

import javax.accessibility.AccessibleContext;

import javax.swing.JPanel;


/**

 *

 * @author Wim

 */

public class ProgressCircle extends JPanel {


    private int x, y, diameter, radius, percentage;


    public ProgressCircle() {

        super();

        x = 200;

        y = 200;

        diameter = 400;

        radius = diameter /2;

        percentage = 0;

    }


    public void setPercentage(int percentage){

        this.percentage = percentage;

    }


    @Override

    protected void paintComponent(Graphics g) {

        g.drawOval(x, y, diameter, diameter);

        int centerX = x + radius;

        int centerY = y + radius;

        for (int i = 0; (i*100/diameter)<percentage; i++) {

            int lineWidth = (int) Math.sqrt(Math.pow(radius, 2.0)-Math.pow(radius-i, 2.0));

            g.drawLine(centerX - lineWidth, centerY+radius - i , centerX + lineWidth, centerY+radius - i);

        }

    }

}

Frame + main:

import java.awt.BorderLayout;

import java.awt.Font;

import java.util.logging.Level;

import java.util.logging.Logger;

import javax.swing.JFrame;

import javax.swing.JLabel;


/**

 *

 * @author Wim

 */

public class Gui extends JFrame{

    public Gui(){

        super();

        final ProgressCircle progress = new ProgressCircle();


        final JLabel label = new JLabel();

        label.setAlignmentX(JLabel.CENTER_ALIGNMENT);

        Font big = new Font("SansSerif", Font.BOLD, 50);

        label.setFont(big);


        add(label, BorderLayout.NORTH);

        add(progress);


        setSize(800,800);

        setVisible(true);



        (new Thread(new Runnable(){

            public void run(){

                for(int i=0 ; i<=100 ; i++){

                    try {

                        progress.setPercentage(i);

                        label.setText(i +" %");

                        repaint();

                        Thread.sleep(100);

                    } catch (InterruptedException ex) {

                        Logger.getLogger(Gui.class.getName()).log(Level.SEVERE, null, ex);

                    }

                }

            }

        })).start();

    }

    

    public static void main(String[] args){

        Gui gui = new Gui();

    }

}

[dunnkers]

Amai!!

You well deserved your role as programming god!
It works just perfect!! Thank you so much!

I will use this alot, thanks!

[lethalwire]

wim DC said:

You use math to calculate the width at a certain height in the circle. Then draw a line there. Repeat X times to fill :D

ProgressCircle

import java.awt.Graphics;

import javax.accessibility.AccessibleContext;

import javax.swing.JPanel;


/**

 *

 * @author Wim

 */

public class ProgressCircle extends JPanel {


    private int x, y, diameter, radius, percentage;


    public ProgressCircle() {

        super();

        x = 200;

        y = 200;

        diameter = 400;

        radius = diameter /2;

        percentage = 0;

    }


    public void setPercentage(int percentage){

        this.percentage = percentage;

    }


    @Override

    protected void paintComponent(Graphics g) {

        g.drawOval(x, y, diameter, diameter);

        int centerX = x + radius;

        int centerY = y + radius;

        for (int i = 0; (i*100/diameter)<percentage; i++) {

            int lineWidth = (int) Math.sqrt(Math.pow(radius, 2.0)-Math.pow(radius-i, 2.0));

            g.drawLine(centerX - lineWidth, centerY+radius - i , centerX + lineWidth, centerY+radius - i);

        }

    }

}

Frame + main:

import java.awt.BorderLayout;

import java.awt.Font;

import java.util.logging.Level;

import java.util.logging.Logger;

import javax.swing.JFrame;

import javax.swing.JLabel;


/**

 *

 * @author Wim

 */

public class Gui extends JFrame{

    public Gui(){

        super();

        final ProgressCircle progress = new ProgressCircle();


        final JLabel label = new JLabel();

        label.setAlignmentX(JLabel.CENTER_ALIGNMENT);

        Font big = new Font("SansSerif", Font.BOLD, 50);

        label.setFont(big);


        add(label, BorderLayout.NORTH);

        add(progress);


        setSize(800,800);

        setVisible(true);



        (new Thread(new Runnable(){

            public void run(){

                for(int i=0 ; i<=100 ; i++){

                    try {

                        progress.setPercentage(i);

                        label.setText(i +" %");

                        repaint();

                        Thread.sleep(100);

                    } catch (InterruptedException ex) {

                        Logger.getLogger(Gui.class.getName()).log(Level.SEVERE, null, ex);

                    }

                }

            }

        })).start();

    }

    

    public static void main(String[] args){

        Gui gui = new Gui();

    }

}

I don't think you should just "hand" out code like this!!! :)

[wim DC]

Well, he allready had the circle part and could draw it for 50% filled, he propably only needed

for (int i = 0; (i*100/diameter)<percentage; i++) {

            int lineWidth = (int) Math.sqrt(Math.pow(radius, 2.0)-Math.pow(radius-i, 2.0));

            g.drawLine(centerX - lineWidth, centerY+radius - i , centerX + lineWidth, centerY+radius - i);

        }

anyways.