We Keep Coding

Subtracting an inner radius/portion of an arc to achieve a ring style progress bar

I am trying to draw a ring/partial ring using arc's.
But I need the middle of the partial ring/ring to be transparent and show whats behind it. Since I am using an arc and spinning it, is there a way to subtract away the inner portion of each arc and leave only the end at the desired thickness which will be spun to create the ring?
This is my code so far: I have the arcs working, but I am only simulating the ring by layering over each one with a couple circles, I need to actually subtract out the area of each circle from each arc.
Not sure how to do that to achieve transparency in the center. If there is a better way to do this please let me know, this is going to be a custom progress bar.
public class JCustomProgressBar extends JComponent{
private final Dimension SIZE = new Dimension( 50, 50 );
public JCustomProgressBar() {
super();
this.setVisible(true);
System.out.println("CAlled");
}
int progress = 1;
public void updateProgress (int progress){
this.progress = progress;
}
#Override
public void paintComponent (Graphics g){
super.paintComponent(g);
System.out.println("called");
Graphics2D g2D = (Graphics2D) g.create();
g2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2D.translate(this.getWidth()/2, this.getHeight()/2);
g2D.rotate(Math.toRadians(270));
Arc2D.Float arc = new Arc2D.Float (Arc2D.PIE);
Ellipse2D circle = new Ellipse2D.Float(0, 0, 80, 80);
arc.setFrameFromCenter (new Point(0,0), new Point (90, 90));
circle.setFrameFromCenter(new Point(0,0), new Point (80, 80));
arc.setAngleExtent(-progress*360/100);
g2D.setColor(new Color(120,192,0));
g2D.draw(arc);
g2D.fill(arc);
g2D.setColor(this.getParent().getBackground());
g2D.draw(circle);
g2D.fill(circle);
arc.setFrameFromCenter (new Point(0,0), new Point (75, 75));
arc.setAngleExtent(-90*360/100);
g2D.setColor(new Color(197,228,146));
g2D.draw(arc);
g2D.fill(arc);
circle.setFrameFromCenter(new Point(0,0), new Point (70, 70));
g2D.setColor(this.getParent().getBackground());
g2D.draw(circle);
g2D.fill(circle);
circle.setFrameFromCenter(new Point(0,0), new Point (60, 60));
g2D.setColor(new Color(245, 245, 245));
g2D.draw(circle);
g2D.fill(circle);
g2D.setColor(Color.black);
g2D.rotate(Math.toRadians(90));
g2D.setFont(new Font("Verdana", Font.PLAIN, 30));
FontMetrics fm = g2D.getFontMetrics();
Rectangle2D r2D = fm.getStringBounds(progress + "%", g);
int x = (0 - (int) r2D.getWidth())/2;
int y = (0 - (int) r2D.getHeight())/2 +fm.getAscent();
g2D.drawString(progress + "%", x, y-10);
//Rectangle2D r2d = fm.getStringBounds(progress + "", g);
// g2D.setFont(new Font("Verdana", Font.PLAIN, 22));
// g2D.drawString("%", x + 40, y-10);
g2D.setFont(new Font("Verdana", Font.PLAIN, 15));
g2D.drawString("Progress", -35, y+5);
g2D.dispose();
}
}

There are a number of ways you "might" do this, but the simplest might be to just use BasicStroke and simply draw the arcs (and not fill anything at all)
This example deliberately sets the background color so you can see that it's transparent.
import java.awt.BasicStroke;
import java.awt.Color;
import java.awt.Dimension;
import java.awt.EventQueue;
import java.awt.Font;
import java.awt.FontMetrics;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Point;
import java.awt.RenderingHints;
import java.awt.geom.Arc2D;
import java.awt.geom.Rectangle2D;
import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.UIManager;
import javax.swing.UnsupportedLookAndFeelException;
public class Test {
public static void main(String[] args) {
new Test();
}
public Test() {
EventQueue.invokeLater(new Runnable() {
#Override
public void run() {
try {
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
} catch (ClassNotFoundException | InstantiationException | IllegalAccessException | UnsupportedLookAndFeelException ex) {
ex.printStackTrace();
}
JCustomProgressBar pb = new JCustomProgressBar();
pb.setProgress(25);
JFrame frame = new JFrame("Testing");
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(pb);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
});
}
public class JCustomProgressBar extends JPanel {
private final Dimension SIZE = new Dimension(200, 200);
public JCustomProgressBar() {
super();
setBackground(Color.RED);
// Uncomment this to make it transparent
//setOpaque(false);
}
#Override
public Dimension getPreferredSize() {
return SIZE;
}
int progress = 1;
public void setProgress(int progress) {
this.progress = progress;
repaint();
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2D = (Graphics2D) g.create();
g2D.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2D.translate(this.getWidth() / 2, this.getHeight() / 2);
BasicStroke bs = new BasicStroke(8, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);
Arc2D.Float arc = new Arc2D.Float(Arc2D.OPEN);
arc.setAngleStart(90);
arc.setFrameFromCenter(new Point(0, 0), new Point(90, 90));
arc.setAngleExtent(-((progress / 100d) * 360));
g2D.setStroke(bs);
g2D.setColor(new Color(120, 192, 0));
g2D.draw(arc);
bs = new BasicStroke(4, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND);
arc.setFrameFromCenter(new Point(0, 0), new Point(75, 75));
arc.setAngleExtent(-(((100 - progress) / 100d) * 360));
g2D.setStroke(bs);
g2D.setColor(new Color(197, 228, 146));
g2D.draw(arc);
g2D.setColor(Color.black);
g2D.setFont(new Font("Verdana", Font.PLAIN, 30));
FontMetrics fm = g2D.getFontMetrics();
Rectangle2D r2D = fm.getStringBounds(progress + "%", g);
int x = (0 - (int) r2D.getWidth()) / 2;
int y = (0 - (int) r2D.getHeight()) / 2 + fm.getAscent();
g2D.drawString(progress + "%", x, y - 10);
g2D.setFont(new Font("Verdana", Font.PLAIN, 15));
g2D.drawString("Progress", -35, y + 5);
g2D.dispose();
}
}
}
You can take a look at Stroking and Filling Graphics Primitives for more details.
Before you tell me how you "don't want the ends rounded" (because I like it that way), make sure you take the time to read the BasicStroke JavaDocs

Adding a JLabel to my clock face isn't working

I tried, adding the flowlayout as seen in other answers, but it still doesn't work.
I've also tried moving around my JLabel code into a constructor but that doesn't work either.
public class Paint {
public static void main(String[] args) {
JFrame frame = new JFrame("Paint");
frame.setSize(500,500);
frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE);
Draw draw = new Draw();
frame.add(draw);
frame.setVisible(true);
}
}
public class Draw extends JPanel{
public Draw(){
JLabel one = new JLabel("12",JLabel.CENTER);
setLayout(new FlowLayout());
add(one);
}
public void paint(Graphics g){
g.drawOval(70, 60, 190, 190);
g.setColor(Color.BLACK);
g.drawLine(90, 160, 170, 160);
g.drawLine(120, 190,170 , 160);
g.setColor(Color.GRAY);
g.fillOval(155, 153, 20, 20);
}
}

Change paint to override paintComponent
Call super.paintComponent before doing any custom painting
import java.awt.Color;
import java.awt.FlowLayout;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;
public class Paint {
public static void main(String[] args) {
JFrame frame = new JFrame("Paint");
frame.setSize(500, 500);
frame.setDefaultCloseOperation(frame.EXIT_ON_CLOSE);
Draw draw = new Draw();
frame.add(draw);
frame.setVisible(true);
}
public static class Draw extends JPanel {
public Draw() {
JLabel one = new JLabel("12", JLabel.CENTER);
setLayout(new FlowLayout());
add(one);
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
g.drawOval(70, 60, 190, 190);
g.setColor(Color.BLACK);
g.drawLine(90, 160, 170, 160);
g.drawLine(120, 190, 170, 160);
g.setColor(Color.GRAY);
g.fillOval(155, 153, 20, 20);
}
}
}

Java Graphics.fillXxx() in combination with Graphics2D.scale()

I have this program:
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Rectangle2D;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;
public class TestLine {
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new TestLine().start();
}
});
}
private static void start() {
JFrame frame = new JFrame();
frame.setContentPane(new CarthPanel());
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.pack();
frame.setVisible(true);
}
private static class CarthPanel extends JComponent {
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
protected void paintComponent(Graphics g) {
Graphics2D gg = (Graphics2D) g;
int w = gg.getClipBounds().width;
int h = gg.getClipBounds().height;
System.out.println("(w,h)=(" + w + "," + h + ")");
gg.translate(w - 1, 0); // <<< when uncommenting both lines, mirroring applies
gg.scale(-1.0, 1.0); //
paintTest(gg, w, h);
}
private static void paintTest(Graphics2D g, int w, int h) {
// black background
g.setColor(Color.black);
g.fillRect(0, 0, w, h);
// colored corners
g.setColor(Color.RED);
g.drawLine(0, 0, 10, 0);
g.drawLine(0, 0, 0, 10);
g.setColor(Color.RED);
g.drawLine(0, 199, 10, 199);
g.drawLine(0, 199, 0, 189);
g.setColor(Color.CYAN);
g.drawLine(189, 0, 199, 0);
g.drawLine(199, 0, 199, 10);
g.setColor(Color.CYAN);
g.drawLine(189, 199, 199, 199);
g.drawLine(199, 199, 199, 189);
// yellow squares
g.setColor(Color.yellow);
g.drawRect(3, 3, 10, 10);
g.fillRect(186, 3, 11, 11);
g.fillRect(3, 186, 11, 11);
g.drawRect(186, 186, 10, 10);
String chars = "ABC";
g.setFont(Font.decode("Arial 72"));
Rectangle2D rect = g.getFontMetrics().getStringBounds(chars, g);
g.drawString(chars, (int) (200 - rect.getWidth()) / 2, (int) (200 - rect.getHeight()));
}
}
}
If you run this program once with two particular lines commented in and then once with the same lines commented out (see the code), then you get to see this:
[
If you didn't spot the problem, here's a zoomed pic:
One would expect the image to be perfectly mirrored. This is true for all strokes and hollow shapes (= drawXxx() methods). All filled shapes however (= fillXxx() methods) are drawn exactly one pixel to the left of where I expect them; e.g. the filled yellow rectangles, and you can also notice that the black background has shifted, as seen by the white line at the right border.
Is this a bug or is this intended? I suspect that it has something to do with the difference how "width" and "height" are being handled in drawXxx() and fillXxx() methods:
drawRect(x,y,w,h) results in a hollow rectangle with X-axis boundaries x and x+w, so the rectangle is w+1 pixels wide.
fillRect(x,y,w,h) results in a filled rectangle with X-axis boundaries x and x+w-1, so the rectangle is w pixels wide.
What am I missing?

Not an answer, rather a hypothesis - the "contains(x,y)" of a rectangle will be true for the sides which forms the (x,y) corner of the rect and false for the sides making the (maxx, maxy) corner. Demo:
Rectangle r=new Rectangle(0, 0, 10, 10);
System.out.println(r.contains(0, 5)); // true
System.out.println(r.contains(5, 0)); // true
System.out.println(r.contains(10, 5)); // false
System.out.println(r.contains(5, 10)); // false
The hypothesis is that fillRect will not consider the "max sides" as inside points to be filled.
To assess the hypothesis, I'd suggest you to try using a GeneralPath which defines the same rectangle and see it there is any difference in filling it. GeneralPath should be forbidden to make any assumption on "the right-top borders are out of the shape's interior"

It is a bug, it is not a feature :)
Surely it is not intended, the mirrored image should be perfect, there's no reason why it shouldn't.
There is a way to use BufferedImage to render on it normally, and then drawing this BufferedImage flipped, the only drawback is a little performance influence and not well looking text drawn using LCD subpixeling.
import java.awt.Color;
import java.awt.Dimension;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.geom.Rectangle2D;
import java.awt.image.BufferedImage;
import javax.swing.JComponent;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;
import javax.swing.WindowConstants;
public class TestLine {
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
#Override
public void run() {
new TestLine().start();
}
});
}
private static void start() {
JFrame frame = new JFrame();
frame.setContentPane(new CarthPanel());
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.pack();
frame.setVisible(true);
}
private static class CarthPanel extends JComponent {
#Override
public Dimension getPreferredSize() {
return new Dimension(200, 200);
}
#Override
protected void paintComponent(Graphics g) {
Graphics2D gg = (Graphics2D) g;
// System.out.println("(w,h)=(" + w + "," + h + ")");
gg.translate(getWidth(), 0); // <<< when uncommenting both lines, mirroring applies
gg.scale(-1.0, 1.0); //
BufferedImage img = new BufferedImage(getWidth(), getHeight(), BufferedImage.TYPE_INT_RGB);
try {
paintTest(img.createGraphics());
} catch (Exception e) {
e.printStackTrace();
}
g.drawImage(img, 0, 0, null);
}
private void paintTest(Graphics2D g) {
// black background
g.setColor(Color.black);
g.fillRect(0, 0, getWidth(), getHeight());
// colored corners
g.setColor(Color.RED);
g.drawLine(0, 0, 10, 0);
g.drawLine(0, 0, 0, 10);
g.setColor(Color.RED);
g.drawLine(0, 199, 10, 199);
g.drawLine(0, 199, 0, 189);
g.setColor(Color.CYAN);
g.drawLine(189, 0, 199, 0);
g.drawLine(199, 0, 199, 10);
g.setColor(Color.CYAN);
g.drawLine(189, 199, 199, 199);
g.drawLine(199, 199, 199, 189);
// yellow squares
g.setColor(Color.yellow);
g.drawRect(3, 3, 10, 10);
g.fillRect(186, 3, 11, 11);
g.fillRect(3, 186, 11, 11);
g.drawRect(186, 186, 10, 10);
String chars = "ABC";
g.setFont(Font.decode("Arial 72"));
Rectangle2D rect = g.getFontMetrics().getStringBounds(chars, g);
g.drawString(chars, (int) (200 - rect.getWidth()) / 2, (int) (200 - rect.getHeight()));
}
}
}

intersectsLine() function is not working as expected

I am trying to check if a line intersects a set of rectangles.
This is my code:
public class Test {
public static void main(String args[]) {
Rectangle2D.Double rectangle1 = new Rectangle2D.Double(32, 64, 32, 32);
Rectangle2D.Double rectangle2 = new Rectangle2D.Double(0, 32, 32, 32);
Line2D.Double line = new Line2D.Double(36, 63, 5, 12);
System.out.println(rectangle1.intersectsLine(line)); // outputs false. Why?
System.out.println(rectangle2.intersectsLine(line)); // outputs true as expected
}
}
As you can see, the start point (36, 63) is within rectangle1, but apparently this line segment doesn't intersect the rectangle that it starts in.
However, it intersects the rectangle that stores the end point (5, 12).
Any idea why?
How do I get it to detect intersection?

The line does not intersect rectangle1, and that's why Java is giving you back the correct answer. Draw the lines in a GUI and see for yourself. Perhaps you're confused on the Rectangle2D.Double constructor -- the last parameters are width and height.
Draw the GUI and see; they almost touch, but not quite:
Drawing both rectangles:
import java.awt.Dimension;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.RenderingHints;
import java.awt.geom.*;
import javax.swing.*;
public class Test extends JPanel {
private static final int PREF_W = 850;
private static final int PREF_H = PREF_W;
Rectangle2D rectangle1 = new Rectangle2D.Double(32, 64, 32, 32);
// Rectangle2D rectangle2 = new Rectangle2D.Double(0, 32, 32, 32);
Line2D line = new Line2D.Double(36, 63, 5, 12);
public Test() {
// TODO Auto-generated constructor stub
}
#Override
protected void paintComponent(Graphics g) {
super.paintComponent(g);
Graphics2D g2 = (Graphics2D) g;
double scale = 8.0;
g2.scale(scale, scale); // make it big to show it for you
g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2.draw(rectangle1);
// g2.draw(rectangle2);
g2.draw(line);
}
#Override
public Dimension getPreferredSize() {
if (isPreferredSizeSet()) {
return super.getPreferredSize();
}
return new Dimension(PREF_W, PREF_H);
}
private static void createAndShowGui() {
Test mainPanel = new Test();
JFrame frame = new JFrame("Test");
frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
frame.getContentPane().add(mainPanel);
frame.pack();
frame.setLocationRelativeTo(null);
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
createAndShowGui();
}
});
}
}

Java GUI drawing an image on mouse event

I'm making a program where hovering over a grid will place an image into the cell hovered over. Currently I have it working so that only a color is filled in, but I have no idea how to make it so an image is drawn in instead. Here's my program:
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import java.util.List;
import javax.swing.*;
public class Test
{
Image img=Toolkit.getDefaultToolkit().getImage("img.gif");
public static void main(String[]args)
{
new Test();
}
public Test()
{
JFrame frame=new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new PixelGrid());
frame.setSize(new Dimension(364,357));
frame.setVisible(true);
}
public class PixelGrid extends JPanel
{
private List<Shape>grid,square;
public PixelGrid()
{
grid=new ArrayList<>();
square=new ArrayList<>();
addMouseMotionListener(new MouseAdapter()
{
public void mouseMoved(MouseEvent e)
{
for(Shape shape:grid)
{
if(shape.contains(e.getPoint()))
square.add(shape);
}
repaint();
}
}
);
for(int row=0;row<5;row++)
{
for(int col=0;col<5;col++)
grid.add(new Rectangle(col*25+112,row*25+50,25,25));
}
}
public void paintComponent(Graphics g)
{
super.paintComponent(g);
g.drawLine(112,50,237,50);
g.drawLine(112,75,237,75);
g.drawLine(112,100,237,100);
g.drawLine(112,125,237,125);
g.drawLine(112,150,237,150);
g.drawLine(112,175,237,175);
g.drawLine(112,50,112,175);
g.drawLine(137,50,137,175);
g.drawLine(162,50,162,175);
g.drawLine(187,50,187,175);
g.drawLine(212,50,212,175);
g.drawLine(237,50,237,175);
Graphics2D g2=(Graphics2D)g;
for(Shape cell:square)
g2.fill(cell);
}
}
}
I want to make the image "img" become the "pixel" that is filled in. However, I'm confused on how to do this as I don't think I can use for-each loops and Graphics2D. If anyone can help, thanks so much!

Define ImageHolder class which has 2 fields shape and image.
class ImageHolder {
Shape shape;
Image img;
public void paint(Graphics2D g2) {
if (img!=null) {
g2.drawImage(img);
}
else {
g2.fill(shape);
}
}
}
Your grid should be List. On init all the ImageHolders have squares and null images. On click image is assigned to the clicked holder.
In the paintComponent() you just call the holder's paint() method

take a look at this one.
all you need to do is repalce your g2.fill(cell); with g2.drawImage(img,cell.getBounds().x,cell.getBounds().y,null);
read drawimage api here
for (Shape cell : square) {
//g2.fill(cell);
g2.drawImage(img,cell.getBounds().x,cell.getBounds().y,null);
System.out.println(cell.getBounds().x);
}
however use Dimention list or 2D list instead Shape in this case
complete code
import java.awt.*;
import java.awt.event.*;
import java.util.*;
import java.util.List;
import javax.swing.*;
public class Test {
Image img = Toolkit.getDefaultToolkit().getImage("img.gif");
public static void main(String[] args) {
new Test();
}
public Test() {
JFrame frame = new JFrame();
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.add(new PixelGrid());
frame.setSize(new Dimension(364, 357));
frame.setVisible(true);
}
public class PixelGrid extends JPanel {
int x=0;
int y=0;
private List<Shape> grid, square;
public PixelGrid() {
grid = new ArrayList<>();
square = new ArrayList<>();
addMouseMotionListener(new MouseAdapter() {
public void mouseMoved(MouseEvent e) {
for (Shape shape : grid) {
if (shape.contains(e.getPoint())) {
square.add(shape);
}
}
repaint();
}
}
);
for (int row = 0; row < 5; row++) {
for (int col = 0; col < 5; col++) {
grid.add(new Rectangle(col * 25 + 112, row * 25 + 50, 25, 25));
}
}
}
public void paintComponent(Graphics g) {
System.out.println(x);
g.drawLine(112, 50, 237, 50);
g.drawLine(112, 75, 237, 75);
g.drawLine(112, 100, 237, 100);
g.drawLine(112, 125, 237, 125);
g.drawLine(112, 150, 237, 150);
g.drawLine(112, 175, 237, 175);
g.drawLine(112, 50, 112, 175);
g.drawLine(137, 50, 137, 175);
g.drawLine(162, 50, 162, 175);
g.drawLine(187, 50, 187, 175);
g.drawLine(212, 50, 212, 175);
g.drawLine(237, 50, 237, 175);
Graphics2D g2 = (Graphics2D) g;
//g2.drawImage(img,x,y,null);
for (Shape cell : square) {
//g2.fill(cell);
g2.drawImage(img,cell.getBounds().x,cell.getBounds().y,null);
System.out.println(cell.getBounds().x);
}
}
}
}
output>>