Draw a traceable text on graphics 2D

Question

I want to teach my kids to write numbers, thus I thought of drawing traceable letters to Graphics2D

I have tried the following approach

float[] textDash = {15.0f};
g2d.setFont(g2d.getFont().deriveFont(400f));
metrics = g2d.getFontMetrics(g2d.getFont());
String numberString = "3";
BasicStroke dashedStroke = new BasicStroke(5f, BasicStroke.CAP_BUTT, BasicStroke.JOIN_MITER, 10.0f, textDash, 0.0f);
FontRenderContext frc = g2d.getFontRenderContext();
GlyphVector gv = g2d.getFont().createGlyphVector(frc, numberString);
Shape numberStringOutline = gv.getOutline();
AffineTransform at = AffineTransform.getTranslateInstance(30, 200);
numberStringOutline = at.createTransformedShape(numberStringOutline);
numberStringOutline = dashedStroke.createStrokedShape(numberStringOutline);
g2d.fill(numberStringOutline);

Unfortunately this causes the outline to be dashed incorrectly dashed number

I am trying to make a solid line to trace number 3 like one would see in tracing books, instead of an outline like you see.

Any advice on how to modify it so that I get a full number to trace instead of the outline?

• g00se: Surely you'd be getting nearer to allowing your children to trace that 3 if you just called drawString with the correct coordinates?
• g00se: I would do something like @MadProgrammer does here using an image like this Put g2.setStroke(new BasicStroke(5f)); into mouseDragged
• WJS: The following might be a useful alternative stackoverflow.com/questions/21039498/…
• MadProgrammer: I suspect that you're running in the wrong direction. I wouldn't try and use the Font workflow, instead, I'd try and create the shapes yourself. This could be done by either creating or finding a SVG source which had a "core" path (not outline) and then doing something like this to convert it to a Shape, this way you don't run into weird font scaling issues and have a lot more control
• g00se: Actually using Font is probably the easiest way to get numbers to trace. The reason I used an image was that was at 'the bottom' of MadProgrammer's painting routine to which I've linked and it was the painting bit I wanted to show. What you can do is to combine showing the numbers via Font with painting (tracing on top of them)

Answer 1

My delirium tremens efforts with what I suggested (my 2nd). (This will probably be deleted) 2 traced

Thanks to MadProgrammer. Simple improvements would be a button to remove the template and to show (and maybe save) your childrens' efforts alone

In the meantime, this is an alternate look with Batik: Dashed with Batik as displayer