Draw string on ellipse

Question

I'm happy with the output of my clock, however - I am not sure how to properly align my drawString for the numbers which should appear at the tip of each tick mark on the clock. I am hoping someone might be able show the proper method/formula for this.

    private void drawTickMarks(Graphics2D g2)
    {
     double radius = this.faceRadius;

     for (int secs = 0; secs <= 60; secs++)
     {
         double tickStart;

         if (secs % 5 == 0)
             tickStart = radius - 15;
          else
             tickStart = radius - 5;

         tick = drawRadii(secs / 60.0, tickStart, radius);

         if (secs % 5 == 0)
            {
             g2.setStroke(new BasicStroke(3));

                g2.drawString(""+(secs/5),(int)tick.getX1()+(int)(tick.getX1()-tick.getX2()),
                                                  (int)tick.getY1()+(int)(tick.getY1()-tick.getY2()));
            }
         else
             g2.setStroke(new BasicStroke(1));


         g2.setColor(Color.WHITE);
         g2.draw(tick);
     }
    }

Thanks to Thinhbk for a valid and correct solution with code and Jon W for the proper steps of coming to a solution.

Jon W · Answer 1 · 2012-10-10T04:29:18.487

If you imagine the String enclosed within a box, the x and y values you pass into drawString specify the lower left corner of the box.

I would modify the drawString line as such:

String number = ""+(secs/5);
int xLocation = (int)tick.getX1()+(int)(tick.getX1()-tick.getX2());
int yLocation = (int)tick.getY1()+(int)(tick.getY1()-tick.getY2());
int offsetX = /*Insert some value here to shift the position of all the strings
                along the x-axis. Make this an expression that contains number.length(),
                so that two-digit numbers are shifted more than one digit numbers. */
int offsetY = /*Insert some value here to shift the position of all the strings along
                the y-axis.*/
g2.drawString(number, xLocation + offsetX, yLocation + offsetY);

You'll have to play around with the specific values for offsetX and offsetY to make it look nice.

If you want to be even fancier and make it so that drawString will automatically adjust the location depending on what font is being used, take a look at this and the FontMetrics class. You'll want to make offsetX and offsetY vary depending on width and height of the characters being drawn and whatnot.

+1 See also this [example of using a `GlyphVector`](http://stackoverflow.com/a/6296381/418556) to get the size. — Andrew Thompson, Oct 10 '12 at 04:15

Thinhbk · Accepted Answer · 2012-10-10T06:40:07.433

As a supplemental to the solution provided by Jon W, I create a method that calculate the offset, and IMO, it looks fine. (@Jon W: sorry for not adding comment to your solution as it's rather long.)

 /**
     * Calculate the offset     * 
     * @param i
     * @return array: 
     * 0: x offset
     * 1: y offset
     */
    private int[] calculateOffSet(int i) {
        int[] val = new int[2];
        int deflt = -12;
        if(i == 12) {
            val[0] = -15;
            val[1] = 9;
        }else if (i > 6) {
            val[0] = deflt + i - 6 ;
            val[1] = i ;
        }else {
            val[0] = deflt + i ;
            val[1] = i + 6;         
        }
        return val;
    }

And in your code, just call this:

int xLocation = (int)tick.getX1()+(int)(tick.getX1()-tick.getX2());
int yLocation = (int)tick.getY1()+(int)(tick.getY1()-tick.getY2());
int[] offset = calculateOffSet((secs / 5));
g2.drawString(number, xLocation + offset[0], yLocation + offset[1]);

It does absolutely line up with your example as far as matching the tick, however the number is sort of covering the tick ... Am I doing something wrong with the x,y location? Am I doing this incorrectly? g2.drawString(""+(secs/5), (int)tick.getX1() + offset[0], (int)tick.getY1() + offset[1]); — Kairan, Oct 10 '12 at 05:32

Draw string on ellipse

2 Answers2