Font Effects in Java?

Java 2D
#1

I was wondering if somebody has some pointers regarding font effects? I searched google, but nothing useful came up. I am pretty sure somebody has done it before!

Basically, I would like to apply “glow”, “outline”, “shadow” etc. effects to text I am outputting. Of course there is also the possibility to use Photoshop, create a font with glow effect and save it as image, but rather than doing that, it would be much easier to have a library which provides basic text effects. The library should be independent of the font, i.e. if I use Arial, the effects should work with Arial.

Edit: I guess “shadow” shouldn’t be too hard to do … but how about glow, outline etc?

#2

Maybe you’ve already tried this but a simple approach would be to just paint bigger sized characters first for the glow effect, and on top of that paint slightly smaller ones using the proper text colour.
Same for outline.

Keith

#3

Yes, I thought about that, but I was somewhat hoping somebody did it before? Would be anybody interested in my result if I would go ahead and create some utility classes for the effects listed below?

Glow/Outline:
Solution: Draw with bigger font below actual text.
Problem: The letter spacing is different, because different font sizes are used. How to adjust for letter spacing differences?

Shadow:
Solution: Draw shadow text with darker color using a predefined offset for x/y. Draw multiple times for a fading effect.

#4

Maybe you could paint all ‘outline’ characters individually & use the FontMetrics of the smaller font to know how far ahaead to paint the next outline character?

I’d be impressed if you were to make a utility class that could do this, but before going to the trouble, is there any way this can be done by making your own Font class so it can be used in Swing menus & other general stuff? I have seen the Swing Painter project do stuff like what you describe, but haven’t looked into it…

Keith

#5

Thanks, I guess FontMetrics is one way to go with this!

A seperate font class would be cool, although, I am not so sure as to how Swing uses the Font class for drawing? I am thinking about a more simple solution (maybe too simple):


public class FancyFontUtility {
  
  public enum FontEffect { NONE, GLOW, SHADOW, OUTLINE };

  public static void paint(Graphics g, String text, int x, int y, FontEffect fontEffect) {
     // the drawing happens here ...
  }
}
#6

With java2D you can do many things.

the best way to start is to use TextLayout, which can return a Shape from a String.

Than with this Shape and Graphics2D class, you can :

  • draw it (outline)
  • fill it
  • translate + fill in black with alpha : shadows.

many subtle effects like glow can be done by repeating draw(shape) with different colors, Stroke and alpha

Lilian :slight_smile:

#7

that’s cool! do you have any sample code you are willing to share?

#8

So here’s one, you can use it to paint a blured shadow under your text shape


private BufferedImage createBackgroundImage(Shape shadow){
    Kernel kernel = new Kernel(5,5,
        new float[]{
      0.05f, 0.1f, 0.1f, 0.1f, 0.05f,
      0.1f, 0.2f, 0.2f, 0.2f, 0.1f,
      0.1f, 0.2f, 0.2f, 0.2f, 0.1f,
      0.1f, 0.2f, 0.2f, 0.2f, 0.1f,
      0.05f, 0.1f, 0.1f, 0.1f, 0.05f,
    });
    ConvolveOp blur = new ConvolveOp(kernel);
    
    BufferedImage background = getGraphicsConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
    BufferedImage blurredBackground = getGraphicsConfiguration().createCompatibleImage(width, height, Transparency.TRANSLUCENT);
    
    
    Graphics2D gBack = background.createGraphics();
    gBack.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
    gBack.setColor(new Color(0f,0f,0f,0.3f));
    gBack.fill(shadow);
    blur.filter(background, blurredBackground);
    return blurredBackground;
  }

‘shadow’ is a shape obtained from a TextLayout, and translated to add some depth

Lilian :slight_smile:

#9

That’s cool. I never used Kernel and ConvolveOp before, neither did I know about TextLayout! Thanks ;D

Is there an online tutorial/book you could recommend? I am more interested in sample code rather than long winded text.