Thread: Drawing in JPanel not working as expected

Can you post an SSCCE that demonstrates the problem that we can copy and paste into our own IDE and run and debug ourselves? It's hard to debug code with only disconnected snippets, and looking at your whole problem is overkill (plus I'm behind a firewall that blocks pastebin).

Originally Posted by brocode

I mean, I could copy what's in pastebin to code snippets, but the code itself really doesn't get any more concise, each file is no longer than about 20 lines and all that's being done is a JFrame is being used to drawLines, while the other class creates a Panel to display the JFrame.

It's really up to you, but it seems to me that making it easier for us to help you would be a good idea. Your call. Posting an SSCCE will get you help in a manner of minutes, whereas posting code snippets or multiple files will probably take longer for somebody to find the time. Depends on how long you feel like waiting for help.

Thanks for posting the SSCCE.

You've got a couple things going on here, which aren't exactly intuitive.

First, theoriginalanomaly is right about the integer division screwing you up. Your height and width won't usually be divisible by 15. What you're basically trying to represent with your division is the length to move the next line's endpoint to, so it'll always be the same. Think about what would happen if that number was just slightly off: the offset wouldn't be that noticeable the first few iterations, but by the last iteration you'll be quite a ways off. This is further exacerbated by the order you're drawing your lines, which isn't really "wrong" but it does obscure what's happening. This can be seen by slowly changing the window width; notice how the lines seem to snap into place, every time you get to a width that's evenly divisible by 15.

Secondly, why are you adding 1 in your increment statements? Those will also add up- you add one every iteration, so by the 15th iteration, you're 15 pixels off.

I would recommend using doubles for x, y, width, and height, and losing the +1s.

Originally Posted by brocode

I had thought I'd edited that code, those + 1's should not be there. I have taken them out in my code, I guess I uploaded the wrong code in which I was testing if rounding up might fix the offset.
I'll try the doubles, however when I tried float I got an error stating that drawLine requires 4 int values.

Yeah, that's expected. You'll have to cast them to ints before passing them into the method. Something like:

g.drawLine(0, 0, (int)x, (int)y);

Let me see if I can cobble something together. Take this code:

import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.JPanel;
import javax.swing.JFrame;
 
public class DrawFans extends JPanel
{
	public void paintComponent(Graphics g)
	{
		super.paintComponent( g );
 
		double x; // variable representing a lines end point x co-ordinate
		double y; // same as x, but for the y co-ordinate
		int count; // counter-control variable
		int width = getWidth(); // total width
		int height = getHeight(); // total height
 
		System.out.println(width);
 
		// values set before each while loop represent the end point
		// for the first line to be drawn (first line always follows border)
 
		int xDistanceBetweenLines = width/15;
		int yDistanceBetweenLines = height/15;
 
		// top right corner
		x = width;
		y = height;
		count = 1;
		while(count <= 15)
		{
			g.drawLine(width, 0, (int)x, (int)y);
			x -= xDistanceBetweenLines;
			y -= yDistanceBetweenLines;
			++count;
		} // end while
 
		// bottom left corner, here is where the problem occurs
		x = 0;
		y = 0;
		count = 1;
		while(count <= 15)
		{
			g.drawLine(0, height, (int)x, (int)y);
			x += xDistanceBetweenLines;
			y += yDistanceBetweenLines;
			++count;
		} // end while
 
	} // end method paintComponent
 
	public static void main(String [] args)
	{
		DrawFans fan = new DrawFans();
 
		JFrame application = new JFrame();
 
		application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		application.add(fan);
		fan.setPreferredSize(new Dimension(255, 250));
		application.pack();
		application.setVisible(true);
	} // end method main
} // end class DrawFans

...which is just the two corners of your code, with the increment value saved to a variable instead of recalculated each time, since it will always be the same.

Notice that when drawing the fan from the upper-right corner, you start with the line that ends in the bottom-right corner. Also notice that it appears to be closer to the bottom-right than the last line in that fan appears to be to the top-left. This is because your increment value is just a little too small because of integer truncation; after 15 increments that difference adds up and your lines are way off, which is why the last line is further away from the top-left corner than the first line is away from the bottom-right. I hope that makes sense (especially after running this code), but I can post pictures if it doesn't.

Now notice that the fan you're drawing from the bottom-left starts with the line closest to the top-left. That line should match up with the last line from the other fan, but that line is offset, as I explained above. That's what I meant when I said the order you're drawing your lines hides what's happening. If we switch the order so you draw the lines of each fan in the same order:

import java.awt.Dimension;
import java.awt.Graphics;
import javax.swing.JPanel;
import javax.swing.JFrame;
 
public class DrawFans extends JPanel
{
	public void paintComponent(Graphics g)
	{
		super.paintComponent( g );
 
		double x; // variable representing a lines end point x co-ordinate
		double y; // same as x, but for the y co-ordinate
		int count; // counter-control variable
		int width = getWidth(); // total width
		int height = getHeight(); // total height
 
		System.out.println(width);
 
		// values set before each while loop represent the end point
		// for the first line to be drawn (first line always follows border)
 
		int xDistanceBetweenLines = width/15;
		int yDistanceBetweenLines = height/15;
 
		// top right corner
		x = width;
		y = height;
		count = 1;
		while(count <= 15)
		{
			g.drawLine(width, 0, (int)x, (int)y);
			x -= xDistanceBetweenLines;
			y -= yDistanceBetweenLines;
			++count;
		} // end while
 
		// bottom left corner, here is where the problem occurs
		x = width;
		y = height;
		count = 1;
		while(count <= 15)
		{
			g.drawLine(0, height, (int)x, (int)y);
			x -= xDistanceBetweenLines;
			y -= yDistanceBetweenLines;
			++count;
		} // end while
 
	} // end method paintComponent
 
	public static void main(String [] args)
	{
		DrawFans fan = new DrawFans();
 
		JFrame application = new JFrame();
 
		application.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
 
		application.add(fan);
		fan.setPreferredSize(new Dimension(255, 250));
		application.pack();
		application.setVisible(true);
	} // end method main
} // end class DrawFans

...you should see that the lines match up now, only because the accumulated offset is the same in each matching line. If you resize your window, you'll notice the lines still snapping when you hit a width or height that's divisible by 15. To fix that, your increment value needs to be a double, not an int:

double xDistanceBetweenLines = width/15.0;
double yDistanceBetweenLines = height/15.0;

And voila, your lines match up perfectly. Note that it's not necessary to change the order you draw your lines once you have the increment working correctly, I just did that to show what's going on.

Does that make any more sense? If you run each of the programs I posted above and change the size, you should see what I'm talking about.

--- Update ---

Originally Posted by brocode

Eureka! Thank you very much kind sir. Do you mind explaining to me however, why it works to cast a double as an int. Would that not still end up truncating the decimals, causing the slight offset?

If we add some print statements to the modified version of the program I posted above:

double xDistanceBetweenLines = width/15.0;
		double yDistanceBetweenLines = height/15.0;
 
		System.out.println("xd: " + xDistanceBetweenLines);
		System.out.println("yd: " + yDistanceBetweenLines);

You'll see that the increments are generally not whole numbers.

Now let's say the xDistance is 5.5. As you draw more lines, they should be further away from the original point, right? So starting at 0, the x value of your points should be 0, 5.5, 11, 16.5, 22.... all the way up to 77 for the 15th line (14*5.5 = 77). Rounding those numbers doesn't really matter, since there's no such thing as half a pixel.

However, if you truncate the 5.5 right away (as you were doing with your integer division), the x values of your points will be 0, 5, 10, 15, 10... all the way up to 70 for the 15th line (14 * 5 = 70). That last line will be 7 pixels off from the value you actually want. And that's only in this example; with bigger windows your offset will be much larger, which is why it's so noticeable.

So truncating at the beginning is so bad because you're using that truncated value in an increment, so each increment gets you further away from the value you actually want. Truncating after using the real value doesn't really hurt you, since you can't be precise to half a pixel anyway.

Edit: Sorry, there's a bug in the forums that causes this nonsense to happen when you post twice in a row.