Develop Reference

Java: Replace Text with Image Mid-String and align with Word Wrapping

I am still a bit new to Java programming so sorry for the huge dump of text. I greatly appreciate you taking the time to read over my current problem!
I am working on software to help speed up the process of board game design using Java Swing. It takes a CSV file of cards for a game, lets you build a dummy card by placing where each column will render on the card and then automatically generating all of the cards in the CSV from these positions.
Many card games have symbols that represent something in the game and I want to be able to insert them in the middle of strings. I can currently replace an entire string with a symbol; as it checks if the string == a known rule, draw the symbol instead. However, I don't know how I would go about searching through a string for a specific set of characters. If it finds them, delete them from the string and then draw the corresponding symbol in it's place. A great example can be seen with the mana symbols on magic cards: https://cdn0.vox-cdn.com/uploads/chorus_asset/file/8039357/C0cIVZ5.png
So the string could be: Gain 1 {GOLD} at the start of each tun.
And it would need to replace {GOLD} with the picture of gold using the Rule class that contains the string to find and a buffered image to replace it with.
I would like this to work without using a hard limit on the size of the symbol, but that is not a hard requirement. The best solution would scale the symbol so it's height was the same of the text.
This method takes a buffered image (a card with no text) and overlays the text on top of the card.
//Will modify the buffered image with the placeables
static public BufferedImage buildCard(BufferedImage start, int whichCardID) {
//Copy so we don't lose our template
BufferedImage ni = deepCopy(start); //ni = new image
//The headers of the document
String[] headers = MainWindow.loadedCards.get(0);
//For each placeable, write down it's text
for(int i=0; i<headers.length; i++) {
//get current header
String currentHeader = headers[i];
//The Text
String theText = MainWindow.loadedCards.get(whichCardID)[i];
//The Settings
PlaceableSettings theSettings = MainWindow.placeableSettings.get(currentHeader);
//Make the change to the image
//ni = writeToImage(ni, theText, theSettings);
///////New below
boolean foundRule = false;
//see if we have a rule to draw a graphic instead
for(RuleMaster.Rule r : RuleMaster.rules) {
if(r.keyword.equals(theText)) {
//there is a rule for this!
ni = drawRuleToImage(ni, r, theSettings);
foundRule = true; //so we don't draw the current text
}
}
//No rules for this
//Make the change to the image if there are no rules
if(foundRule == false)
ni = writeToImage(ni, theText, theSettings);
}
return ni;
}
//Takes a buffered image and writes text into it at the location given
static public BufferedImage writeToImage(BufferedImage old, String text, PlaceableSettings setts) {
//make new blank graphics
BufferedImage bi = new BufferedImage(old.getWidth(), old.getHeight(), BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = bi.createGraphics();
//write old image to it
g2d.drawImage(old, 0, 0, null); //null was set to "this" when this was not static | Note ion case this breaks
//write text on it
g2d.setPaint(setts.getColor());
g2d.setFont(setts.getFont());
//Setup word wrap
FontMetrics fm = g2d.getFontMetrics(setts.getFont());
// int rightSideBuffer = bi.getWidth() - 10;
//Rectangle2D rect = fm.getStringBounds(text, setts.getX(), rightSideBuffer, g2d); // try just -'ing the x slot from the width below
Rectangle2D rect = fm.getStringBounds(text, g2d); //this gets you the bounds for the entire image, need to remove space for x,y position
//TODO: Problem: this is always length 1
//Solution! No auto wrap, let the person define it as a setting
#SuppressWarnings("unchecked")
List<String> textList=StringUtils.wrap(text, fm, setts.getPixelsTillWrap() ); //width counted in # of characters
//g2d.drawString(text, setts.getX(), setts.getY()); //old draw with no wrap
for(int i=0; i< textList.size(); i++) {
g2d.drawString(textList.get(i), setts.getX(), setts.getY() + ( i*(setts.getFont().getSize() + 2/*Buffer*/)));
}
//!!DEBUG
if(EntryPoint.DEBUG) {
Random r = new Random();
g2d.setPaint(Color.RED);
g2d.drawString(Integer.toString(textList.size()), 100, 50+r.nextInt(250));
g2d.setPaint(Color.GREEN);
g2d.drawString(Double.toString(rect.getWidth()), 200, 50+r.nextInt(250));
g2d.setPaint(Color.PINK);
//g2d.drawString(Integer.toString(( ((int) rect.getWidth()) - setts.getX())), 100, 250+r.nextInt(100));
}
//cleanup
g2d.dispose();
return bi;
}
//Takes a buffered image and draws an image on it at the location given
static public BufferedImage drawRuleToImage(BufferedImage old, RuleMaster.Rule rule, PlaceableSettings theSettings) {
//make new blank graphics
BufferedImage bi = new BufferedImage(old.getWidth(), old.getHeight(), BufferedImage.TYPE_INT_ARGB);
Graphics2D g2d = bi.createGraphics();
//write old image to it
g2d.drawImage(old, 0, 0, null); //null was set to "this" when this was not static | Note ion case this breaks
g2d.drawImage(rule.image, theSettings.getX(), theSettings.getY(), null);
//cleanup
g2d.dispose();
//System.exit(1);
return bi;
}
Each Rule just contains the string to replace and the image to replace it with.
static public class Rule{
//Text to look for
String keyword;
//image to replace it with
BufferedImage image;
public Rule (String key, BufferedImage img) {
keyword = key;
image = img;
}
}
I am attempting to design this as a tool for many people to use, so the text should be able to match whatever the user adds; though my current process has been to use strings such as "{M}" and that could be a standard.
Another big hurdle in this is that the text can wrap on the cards, which means that the strings and image need to wrap together in provided bounds.
Edit 1:
Had some thoughts and am going to try this approach. Still see a possible issue with the bounds when getting the 'next' half of the string drawn; but I believe this may work.
//If found a rule mid text:
//Split string in 2 at the rule match: strings 'start', and 'next'
//Calculate x and y for symbol
//x is the # of characters in ('start' % the word wrap width) +1 as the symbol is the next character, then multiply that by the character size of the font
//y is the integer of dividing the # of characters in 'start' by word wrap width multiplied by the font height
//Draw Start of String
//Draw symbol
//next x = sym.x + sym width //TODO next (x,y) math

I was able to solve the problem by warping ahead of time based on the text size. By using a known size of the image, it could be know ahead of time to get the wrap done right.
Then I looped through each line. I looked did a split in the string on the text that would be replaced. I them drew the first part of the string as normal. Calculated the width of the string using int pixelWidth = ni.getGraphics().getFontMetrics().stringWidth(splitString[j]);. Then drew the image at the same Y, but added the width of the previous string to the X. Then added the current width of the image to the X and continued looping; drawing images and strings as needed.

How to draw a rectangle around multiline text

I am trying to draw a rectangle around multiline text in iText.
The user will be able to enter some lines of text. The font size of the text might be different and it can be formatted (bold, underlined...).
I use this code to draw the text:
ColumnText ct = new ColumnText(cb);
Phrase phrase = new Phrase("Some String\nOther string etc...\n test");
ct.setSimpleColumn(myText......);
ct.addElement(phrase);
ct.go();
I know how to draw a rectangle, but I am not able to draw a rectangle outlining this text.

It sounds as if you are missing only a single piece of the puzzle to meet your requirement. That piece is called getYLine().
Please take a look at the DrawRectangleAroundText example. This example draws the same paragraph twice. The first time, it adds a rectangle that probably looks like the solution you already have. The second time, it adds a rectangle the way you want it to look:
The first time, we add the text like this:
ColumnText ct = new ColumnText(cb);
ct.setSimpleColumn(120f, 500f, 250f, 780f);
Paragraph p = new Paragraph("This is a long paragraph that doesn't"
+ "fit the width we defined for the simple column of the"
+ "ColumnText object, so it will be distributed over several"
+ "lines (and we don't know in advance how many).");
ct.addElement(p);
ct.go();
You define your column using the coordinates:
llx = 120;
lly = 500;
urx = 250;
ury = 780;
This is a rectangle with lower left corner (120, 500), a width of 130 and a height of 380. Hence you draw a rectangle like this:
cb.rectangle(120, 500, 130, 280);
cb.stroke();
Unfortunately, that rectangle is too big.
Now let's add the text once more at slightly different coordinates:
ct = new ColumnText(cb);
ct.setSimpleColumn(300f, 500f, 430f, 780f);
ct.addElement(p);
ct.go();
Instead of using (300, 500) as lower left corner for the rectangle, we ask the ct object for its current Y position using the getYLine() method:
float endPos = ct.getYLine() - 5;
As you can see, I subtract 5 user units, otherwise the bottom line of my rectangle will coincide with the baseline of the final line of text and that doesn't look very nice. Now I can use the endPos value to draw my rectangle like this:
cb.rectangle(300, endPos, 130, 780 - endPos);
cb.stroke();

how to do a word wrap on a short string with TextLayout in java Graphics2d?

How would you effectively do a word wrap on a short label String below with TextLayout in java?
My label are only two or three words long
Some examples:
1. Inflatable Greenhouse D10 ;
2. Command and Control Center A5;
3. Jason Boris;
I'd like to wrap the words in such a way to shape as like a square as possible, rather than one long rectangle.
So my question is: What does it take to wrap the building names to the 2nd line, instead of one long line? See pic below:
Is there a way to set the maximum number of characters to be contained in a line of text and wrap the remaining characters to the second line and so on (it would need to account for whitespace)?
For example, I'd like to wrap the name "Residential Quarter D12" into three lines.
Residential
Quarter
D12
and wrap "Command and Control D16" into four lines.
Command
and
Control
D16
Wouldn't it be nice if TextLayout can understand html codes like a regular JLabel!? Then it'll make things easy:
String label = "<html>" + "Inflatable" + "<br>" + "Greenhouse" + "<br>" + "D10" + "</html>";
Note: it doesn't have to be one word per line. But I'd like to have them "centered" on each line
What I have was the following method for generating a BufferedImage of the building name labels o or just the first and last name of a person.
private BufferedImage createLabelImage(
String label, Font font, FontRenderContext fontRenderContext, Color labelColor,
Color labelOutlineColor) {
// Determine bounds.
TextLayout textLayout1 = new TextLayout(label, font, fontRenderContext);
Rectangle2D bounds1 = textLayout1.getBounds();
// Get label shape.
Shape labelShape = textLayout1.getOutline(null);
// Create buffered image for label.
int width = (int) (bounds1.getWidth() + bounds1.getX()) + 4;
int height = (int) (bounds1.getHeight()) + 4;
BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_ARGB);
// Get graphics context from buffered image.
Graphics2D g2d = (Graphics2D) bufferedImage.getGraphics();
g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
g2d.translate(2D - bounds1.getX(), 2D - bounds1.getY());
// Draw label outline.
Stroke saveStroke = g2d.getStroke();
g2d.setColor(labelOutlineColor);
g2d.setStroke(new BasicStroke(2, BasicStroke.CAP_ROUND, BasicStroke.JOIN_ROUND));
g2d.draw(labelShape);
g2d.setStroke(saveStroke);
// Fill label
g2d.setColor(labelColor);
g2d.fill(labelShape);
// Dispose of image graphics context.
g2d.dispose();
return bufferedImage;
}
As you can see, this method can only create a BufferedImage form of label with one line of text only.
As I overlay these BufferedImage labels on a map, they look too long and they overlap one another.
That's why I need to make each label to shape like a square as possible.

Let me try to suggest an algoritm.
Split the label by space to get list of words and measure each word to get array
int[] wordWidths;
int minWidth=max(wordWidths);
int height=the row height const;
int minHeight=height;
int maxHeight=wordWidths.length*height;
int currentWidth=minWidht;
int currentHeight=maxHeight;
while(currentWidth<currentHeight || wordWidths.length>1) {
int mergedWidth=find minimal sum of neighbour words' widths
replace the 2 widths with the mergedWidth reducing the wordWidthssize
currentHeight=wordWidths.length*height;
}
Or you can try to rely on components. I would define a JTextArea instance assigning the label there and trying to play with the wrap reducing width 1 by 1 and measuring preferred height for the width.
When optimal size is achived you can call theWrappedJtextArea.printAll(g) to paint it on your BufferedImage's Graphics.

Pixels that text will give

Would it be possible to get the width of a string based on its font?
So for example, if the font size is 40, and the string was "hi", could you do 2*40.
An example of this would be
startX = 260; startWidth = "Start".length()*getFont().getSize();
startY = getHeight()-startWidth-20;
startHeight = getFont().getSize();

It really depends on the type of font, whether it's monospaced or proportional. Most font now are proportional so you would not simply be able to calculate num_of_chars * n.
The gui interface you are using should give you the width of the container once it has been populated with the given text.

Java: Getting a font with a specific height in pixels

It’s easy to determine the rendered height of a font using FontMetrics, but what about the other way around? How can I obtain a font that will fit into a specific height in pixels?
"Give me Verdana in a size that is 30 pixels high from ascender to descender."
How do I ask Java for this?

I know this is a very old question, but someone might still find it:
The font height in Java (and many other places) is given in "typographic points", which are defined as roughly 1/72nd of an inch.
To calculate the points needed for a certain pixel height, you should be able to use the following:
double fontSize= 72.0 * pixelSize / Toolkit.getDefaultToolkit().getScreenResolution();
I haven't tested this extensively yet, but it seems to work for the monitors that I've used. I'll report back if I ever find a case where it doesn't work.
For the standard system fonts I've used this with, this sets the height of a capital letter (i.e. the ascent) to the provided pixel size. If you need to set the ascent+descent to the pixel size, you can correct the value using the FontMetrics:
FontMetrics m= g.getFontMetrics(font); // g is your current Graphics object
double totalSize= fontSize * (m.getAscent() + m.getDescent()) / m.getAscent();
Of course, the actual pixel-height of some specific letters will depend on the letter and the font used, so if you want to make sure that your "H" is some exact number of pixels tall, you might still want to use the trial-and-error methods mentioned in the other answers. Just keep in mind that if you use these methods to get the size for each specific text you want to display (as #Bob suggested), you might end up with a random font-size-mess on your screen where a text like "ace" will have much bigger letters than "Tag". To avoid this, I would pick one specific letter or letter sequence ("T" or "Tg" or something) and fix that one to your pixel height once and then use the font size you get from that everywhere.

I don't think there's a "direct" way to find a font by height; only an indirect way... by looping through the sizes, and testing the height of each is <= required height.
If you're doing this once, just loop through them... if you've doing it "on the fly" then do a binary search, it'll be quicker.

I'm not aware of a way to get a font by its actual height in pixels. It depends on the context it's used in so there's probably no shorter way than to sample for the best match. It should be pretty quick to look for sizes up or down from the designed height. Here's an example method that does that:
public Font getFont(String name, int style, int height) {
int size = height;
Boolean up = null;
while (true) {
Font font = new Font(name, style, size);
int testHeight = getFontMetrics(font).getHeight();
if (testHeight < height && up != Boolean.FALSE) {
size++;
up = Boolean.TRUE;
} else if (testHeight > height && up != Boolean.TRUE) {
size--;
up = Boolean.FALSE;
} else {
return font;
}
}
}

WhiteFang34's code is useful in combination with the following method that returns the actual height of a specific string. It might be a bit slow for real-time rendering, especially for large fonts/strings and I'm sure it can be further optimised, but for now it meets my own needs and is fast enough to run in a back-end process.
/*
* getFontRenderedHeight
* *************************************************************************
* Summary: Font metrics do not give an accurate measurement of the rendered
* font height for certain strings because the space between the ascender
* limit and baseline is not always fully used and descenders may not be
* present. for example the strings '0' 'a' 'f' and 'j' are all different
* heights from top to bottom but the metrics returned are always the same.
* If you want to place text that exactly fills a specific height, you need
* to work out what the exact height is for the specific string. This method
* achieves that by rendering the text and then scanning the top and bottom
* rows until the real height of the string is found.
*/
/**
* Calculate the actual height of rendered text for a specific string more
* accurately than metrics when ascenders and descenders may not be present
* <p>
* Note: this method is probably not very efficient for repeated measurement
* of large strings and large font sizes but it works quite effectively for
* short strings. Consider measuring a subset of your string value. Also
* beware of measuring symbols such as '-' and '.' the results may be
* unexpected!
*
* #param string
* The text to measure. You might be able to speed this process
* up by only measuring a single character or subset of your
* string i.e if you know your string ONLY contains numbers and
* all the numbers in the font are the same height, just pass in
* a single digit rather than the whole numeric string.
* #param font
* The font being used. Obviously the size of the font affects
* the result
* #param targetGraphicsContext
* The graphics context the text will actually be rendered in.
* This is passed in so the rendering options for anti-aliasing
* can be matched.
* #return Integer - the exact actual height of the text.
* #author Robert Heritage [mrheritage#gmail.com]
*/
public Integer getFontRenderedHeight(String string, Font font, Graphics2D targetGraphicsContext) {
BufferedImage image;
Graphics2D g;
Color textColour = Color.white;
// In the first instance; use a temporary BufferedImage object to render
// the text and get the font metrics.
image = new BufferedImage(1, 1, BufferedImage.TYPE_INT_RGB);
g = image.createGraphics();
FontMetrics metrics = g.getFontMetrics(font);
Rectangle2D rect = metrics.getStringBounds(string, g);
// now set up the buffered Image with a canvas size slightly larger than
// the font metrics - this guarantees that there is at least one row of
// black pixels at the top and the bottom
image = new BufferedImage((int) rect.getWidth() + 1, (int) metrics.getHeight() + 2, BufferedImage.TYPE_INT_RGB);
g = image.createGraphics();
// take the rendering hints from the target graphics context to ensure
// the results are accurate.
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, targetGraphicsContext.getRenderingHint(RenderingHints.KEY_ANTIALIASING));
g.setRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING, targetGraphicsContext.getRenderingHint(RenderingHints.KEY_TEXT_ANTIALIASING));
g.setColor(textColour);
g.setFont(font);
g.drawString(string, 0, image.getHeight());
// scan the bottom row - descenders will be cropped initially, so the
// text will need to be moved up (down in the co-ordinates system) to
// fit it in the canvas if it contains any. This may need to be done a
// few times until there is a row of black pixels at the bottom.
boolean foundBottom, foundTop = false;
int offset = 0;
do {
g.setColor(Color.BLACK);
g.fillRect(0, 0, image.getWidth(), image.getHeight());
g.setColor(textColour);
g.drawString(string, 0, image.getHeight() - offset);
foundBottom = true;
for (int x = 0; x < image.getWidth(); x++) {
if (image.getRGB(x, image.getHeight() - 1) != Color.BLACK.getRGB()) {
foundBottom = false;
}
}
offset++;
} while (!foundBottom);
System.out.println(image.getHeight());
// Scan the top of the image downwards one line at a time until it
// contains a non-black pixel. This loop uses the break statement to
// stop the while loop as soon as a non-black pixel is found, this
// avoids the need to scan the rest of the line
int y = 0;
do {
for (int x = 0; x < image.getWidth(); x++) {
if (image.getRGB(x, y) != Color.BLACK.getRGB()) {
foundTop = true;
break;
}
}
y++;
} while (!foundTop);
return image.getHeight() - y;
}