Question

I have a diagonal line and I have also a circles having a 100 meters in distance. The problem is that the circles are not really to the center of the line. I know this is quiet easy but I’m just confused on how to do it.. Could someone help me how to put the circles at the center of the line?

Here’s what I’ve tried so far :

public void paint(Graphics g)
{
    super.paint(g);

    Graphics2D g2d = (Graphics2D) g;
    g2d.setBackground(Color.white);

    int x0_pixel = 0;
    int y0_pixel = 0;

    int x1_pixel = getWidth();
    int y1_pixel = getHeight();

    int x0_world = 0;
    int y0_world = 0;
    double x1_world = 2000; // meters
    double y1_world = 1125; // meters

    double x_ratio = (double) x1_pixel / x1_world;
    double y_ratio = (double) y1_pixel / y1_world;

    int xFrom = 0;
    int yFrom = 0;

    double xTo = x1_world;
    double yTo = y1_world;

    int FromX_pixel = convertToPixelX(xFrom, x_ratio);
    int FromY_pixel = convertToPixelY(y1_pixel, yFrom, y_ratio);

    int ToX_pixel = convertToPixelX((int) xTo, x_ratio);
    int ToY_pixel = convertToPixelY(y1_pixel, (int) yTo, y_ratio);

    g2d.setColor(Color.RED);
    g2d.drawLine(FromX_pixel, FromY_pixel, ToX_pixel, ToY_pixel);

    double theta = Math.atan(yTo / xTo);

    int len = (int) Math.sqrt(xTo * xTo + yTo * yTo);

    int interval = 100;

    final double cosTheta = Math.cos(theta);
    final double sinTheta = Math.sin(theta);

    for (int distance = xFrom; distance <= len; distance += interval)
    {

        double distance_x = distance * cosTheta;
        double distance_y = distance * sinTheta;

        int x_circle_pixel = convertToPixelX(distance_x, x_ratio);
        int y_circle_pixel = convertToPixelY(y1_pixel, distance_y, y_ratio);

        g2d.drawOval(x_circle_pixel, y_circle_pixel, 50, 50);

        g2d.setColor(Color.BLUE);

    }

    Toolkit.getDefaultToolkit().

            sync();

    g2d.dispose();

}

private static int convertToPixelY(int y_offset, double y_world, double y_ratio)
{
    return (int) (y_offset - (y_world * y_ratio));
}

private static int convertToPixelX(double x_world, double x_ratio)
{
    return (int) (x_world * x_ratio);
}

Answer 1

When you draw an oval, the first two parameters are the upper-left corner of the rectangle that holds the oval. The next two parameters are the width and height of this same bounding rectangle. Your current code places the upper-left corner on the line itself, but what you actually want is that the center of the bounding rectangle be placed on the line. The solution to your problem is to simply shift the upper-left corner over by 1/2 the diameter. Your code should have something like so:

public class GraphicsFoo extends JPanel {
   // avoid using magic numbers:
   private static final int CIRCLE_DIAMETER = 50; 

   //....

   // override a JComponent's paintComponent method, not its paint method
   @Override
   protected void paintComponent(Graphics g) {
       super.paintComponent(g);

       Graphics2D g2d = (Graphics2D) g;
       g2d.setBackground(Color.white);

       // make your graphics smooth
       g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, 
             RenderingHints.VALUE_ANTIALIAS_ON);

       // ...

       final double cosTheta = Math.cos(theta);
       final double sinTheta = Math.sin(theta);

       for (int distance = xFrom; distance <= len; distance += interval)
       {

           //....

           // *** here's the key: ***    
           g2d.drawOval(
              x_circle_pixel - CIRCLE_DIAMETER / 2, 
              y_circle_pixel - CIRCLE_DIAMETER / 2, 
              CIRCLE_DIAMETER, CIRCLE_DIAMETER);

           g2d.setColor(Color.BLUE);

       }