I have strings formatted using the code below
String.Format("{0,-10} {1,10}", "Kills:", kills);
String.Format("{0,-10} {1,10}", "Points:", points);
String.Format("{0,-10} {1,10}", "$:", currency);
From what I understood, the first part of the strings should be left justified with a 10 space buffer and then the integer variables should be printed right justified with a 10 space buffer.
However when attempt to draw the strings using SpriteBatch.DrawString, nothing aligns properly.
The left aligned side prints properly, but the right aligned side centres on a certain point, for example if kills = 50 and points = 5002, the 50 will be centered over the 00 in the 5002...
What is going on?
Quite simply, I suspect you're not using a monospaced font. When different characters have different widths, you can't use spaces to line things up. (Your sample works when using Console.WriteLine for example, as the console has a fixed width font by default.)
You'll either have to use a monospaced font, or you'll have to draw the strings separately - draw each string to fit the relevant area. I don't know anything about XNA, but I'd expect you to either have to measure the width of the string before you draw it (so you can subtract it from the right-hand edge, for example) or specify some sort of layout value which indicates "right-align this string with a particular point".
Most likely you draw the text with a proportional font. Bear in mind that characters don't have the same width, so you cannot align texts with spaces.
As I do not have reply privileges, (or some such thing, as there is no reply button for answers), but I would like to contribute, I will post this answer.
Jon's answer mentioned measuring the string, this is possible by spriteFont.MeasureString(string s);. This returns a Vector2, the X portion of which is the width of the rendered text. (Y is height, which could be helpful for other things) This allows you to use a font other than a monospace font.
Here is an example of using MeasureString:
I'm not really sure what the question is asking, but if you wanted a single line of text similar to "Kills:50 Points:5002" but width two different spritebatch calls you could do the following (note I typed this directly into stackoverflow, so there may be minor syntax errors):
float killStringWidth = spriteFont.MeasureString(killString).X;
spriteBatch.DrawString(spriteFont, killString, new Vector2(0,0), Color.White );
spriteBatch.DrawString(spriteFont, pointString, new Vector2(killStringWidth + 10, 0), Color.White );
Related
Calling TextRenderer.MeasureText as follows:
TextRenderer.MeasureText(myControl.Text, myControl.Font);
and comparing the result to the size of the control to check if text fits. The results are sometimes incorrect. Have observed the following two issues:
Often when a Label is set to AutoSize, TextRenderer will report a width that is 1 pixel wider than the auto-sized width of the Control.
False negative where TextRenderer reports a width smaller than the control's but the text is still cut off. This occurred with "Estación de trabajo" -- not sure if the accent could somehow affect the width calculation?
Is there any way to improve the accuracy of the MeasureText method? Should I be calling one of the overrides that accepts a device context and/or format flags?
I know it's probably no actual anymore. Yet for future readers here is a simple yet accurate method of measuring text in a control:
Graphics g=Graphics.FromHwnd(YOUR CONTROL HERE.Handle);
SizeF s=g.MeasureString("YOUR STRING HERE", Font, NULL, NULL, STRING LENGTH HERE, 1)
Is there any way to improve the accuracy of the MeasureText method? Should I be calling one of the overrides that accepts a device context and/or format flags?
You have answered your question by yourself. Actually MeasureText based on Win32 DrawTextEx, and this function cannot work without valid device context. So when you call MeasureText override without hdc, it internally create desktop compatible hdc to do measurement.
Of course measurement depends on additional TextFormatFlags. Also keep in mind that Label painting (and measurement) depends on UseCompatibleTextRendering.
So general conclusion you should use MeasureText for your own code, for example when you then call DrawText with exactly same parameters, in all other cases size returned by MeasureText cannot be treated as precise.
If you need to get expected Label size, you should use GetPreferredSize method.
Check out the TextFormatFlags parameter to this function:
TextRenderer::MeasureText(String, Font, Size, TextFormatFlags)
http://msdn.microsoft.com/en-us/library/8wafk2kt.aspx
"The Size, in pixels, of text drawn on a single line with the specified font. You can manipulate how the text is drawn by using one of the DrawText overloads that takes a TextFormatFlags parameter. For example, the default behavior of the TextRenderer is to add padding to the bounding rectangle of the drawn text to accommodate overhanging glyphs. If you need to draw a line of text without these extra spaces you should use the versions of DrawText and MeasureText that take a Size and TextFormatFlags parameter. For an example, see MeasureText(IDeviceContext, String, Font, Size, TextFormatFlags)."
hth
I don't know if I have a perfect solution but I ran into this when I was doing WinForms a few years back. The way I ended up compensating was by adjusting the returned measurement by a percentage. I cannot recall what I used (maybe 5% or 105?), but I do recall that I ended up using a constant percentage across the app and always rounded up.
I haven't got enough points to comment yet, so I've had to put this as an answer:
Perhaps ClearType affects measurement accuracy, because although a character has a known width calculated from its glyph, its rendering and position are adjusted to place axial lines on whole pixels.
Just a thought.
I have noticed strange behavior of Graphics.MeasureString at different resolutions.
For the default resolution (96x96) there is a linear relationship across the different font sizes I tested.
However, if I raise it to 512 x 512, the linear relationship disappears and something really strange happens when using measure string. (See 4 plots below)
If I leave the resolution at the default size for a graphics object, and measure the font size, here is the relationship between font size and the width of a string:
Graphics object, Default Resolution (96):
Font size (X-Axis), WIDTH of a particular string (Y-Axis)
Font size (X-Axis), HEIGHT of a particular string (Y-Axis)
However, if I change the resolution
Graphics object, 512 resolution:
Font size (X-Axis), WIDTH of a particular string (Y-Axis)
Font size (X-Axis), HEIGHT of a particular string (Y-Axis)
Anyone know why this might be happening?
Thanks you.
It should noted that I am using .NET 4 (Full Profile)
Code used to generate graphs (Change resolution for each type):
string str = "6 CN-3 Tie EomgVeo405- 2ss>era09rni IBne 20iopv Atdrsn - Ng72";
SizeF sizef = new SizeF(855, 14.000001f);
StringFormat stringFormat = new StringFormat()
{
Alignment = StringAlignment.Center,
LineAlignment = StringAlignment.Near,
Trimming = StringTrimming.None,
FormatFlags = StringFormatFlags.NoClip,
};
Bitmap b = new Bitmap(901, 401);
//b.SetResolution(512, 512);
Graphics g = Graphics.FromImage(b);
for (float x = origFont.Size; x >= 0.5; x -= 0.1f)
{
var data = g.MeasureString(str, new Font("Microsoft Sans Serif", x), sizef, stringFormat);
Console.WriteLine(x + "\t" + data.Width + "\t" + data.Height);
}
This answer is a guess, but the evidence fits it perfectly.
What you're seeing is the string being wrapped onto two lines.
Let's assume the following:
The width of the text is linearly proportional to the fontsize
The height of the text is linearly proportional to the fontsize
This fits the start of your 512-resolution graph, everything increases linearly.
At some point, the width is sharply reduced by a certain amount, and at the same time the height doubles.
This means that a word was moved onto line 2, which doubled the height (2 lines vs. 1 before), and the string got a certain amount less wide since the last word on the line is now on the start of line 2.
From there on, the width slowly increases again as the part of the string still on line 1 linearly gets wider as the font-size increases. At the same time the height increases linearly, but now at double the rate as before the break, since 2 lines now get higher, vs. 1 before.
At some point, again, the last word on line 1 breaks the maximum width and is moved down on line 2, before the word that was previously alone there, and at that point, the width is again sharply reduced by a certain amount.
If you were to continue your graph, I predict that the width will continue its current pattern. The exact amount it dips down each time is proportional to the width of the word being moved. At the same time, at some point the 2nd line will need to be broken, in which case you get a 3x height and the height will then increase at 3x the pace, and so on.
I believe this might be happening because of the hinting/grid fitting algorithms in GDI+. Font sizes in your tests are extremely small in terms of glyph legibility, and, because of that, the rendering engine tries to apply special transformations to each glyph to make it clearer. These transformations depend greatly on the target DPI.
It is also worth mentioning that major increase of the font size will lead to a more 'linear' dependency.
This article explains these mechanisms in more details with some examples.
Meanwhile, you can try to modify the Graphics.TextRenderingHint property and/or try TextRenderer instead of Graphics.DrawString if that will help you with your issue.
I have an image like below.
What I want is a monochrome image such that white parts are kept white, the rest is black. However, the tricky part is that I also want to reduce the white parts to be one pixel in thickness.
It's the second part that I'm stuck with.
My first thought was to do a simple threshold, then use a sort of "Game of Life" type iterative process where a white pixel was removed if it had neighbours on one side but not the other (i.e. it's an edge) however I have a feeling this would reduce ends of lines to nothing over time so I'd end up with a blank image.
What algorithm can I use to get the image I want, given the original image?
(My language of choice is C#, but anything is fine)
Original Image:
After detecting the morphological extended maxima of a given height:
and then thinning gives:
You can also manipulate the height parameter, or prune the thinned image.
Code in Mathematica:
img = ColorConvert[Import["http://i.stack.imgur.com/zPtl6.png"], "Grayscale"];
max = MaxDetect[img, .55]
Thinning[max]
EDIT I followed my own advice and a height of .4 gives segments which are more precisely localized:
I suggest that you look into Binary Morphological transformations such as Erosion and Dilation. Graphics libraries such as OpenCV() http://opencv.willowgarage.com/wiki/ and that statistical/matrix tool Gnu Octave http://octave.sourceforge.net/image/function/bwmorph.html support these operations.
As part of my self-education of programming I decided to make a snake in C#. The problem I have is about the client size of the game form.
I want player to be able to scale the window of the game, which is divided into 25 x 25 grid (every coordinate is like "one pixel") - it means, that at any moment, the window is divided into 25 x 25 identical squares.
The problem I get is near this code:
int SquareSide = (ClientSize.Width / 25);
When I set the ClientSize strictly to for example 600 x 600, which is a multiple of 25, everything goes OK. But when I don't (for example by manual resizing, which can change the size to, for example, 711 x 711), it creates at the right side a 'strip', which seems to be the rest of pixels, which can't be used because we are dividing to integer number.
My question is - is there any not-extremely-hard way to achieve dividing ANY client size of form into 25 x 25 grid without this problem? I tried using double, but FillRectangle method doesn't accept it.
I hope my question is understandable and thank you for replies.
To tell you the truth, there is
g.FillRectangle(Brush b, RectangleF rect)
RectangleF is a rectangle whose coordinates are float.
So you can use:
float SquareSide = (ClientSize.Width * 1f / 25);
I would try to simply handle OnResize event of the window, and at the moment user finishes rezise it, force the size that program need for perfect fit of the grid.
So for example at the moment user releases mouse and you figure out that one dimensions of the window 711x711, bring it to nearest correct fit 700x700.
In this way you guarantee good user experience on different monitor resolutions and for you guarantee a correct fit of the grid you draw.
Hope this helps.
Switch to float coordinates for everything. Make sure your game looks OK when lines do not have whole pixel coordinates. Make sure you "find next cell" code also works with floats, including mouse position detection if needed.
The other approach is to be happy with integer coordinates (and cells of the same size) and make page layout flexible to accomodate some unused space for odd 711x711 layouts (i.e. just center the field and keep some variable width border).
I'm building a Bitmap by layering images one above another, and when I'm done I want to write text around the edges. The top and bottom are simple because they're written horizontally, but I'd prefer to write the text on the left and right sides vertically so they don't take up as much space.
The Graphics.DrawString method doesn't allow you to specify an angle of rotation; what other methods exist?
I think you may get some pointers from this answer about rotating text for printing that I wrote a while ago.
Here is a tutorial that may help
http://www.c-sharpcorner.com/Blogs/BlogDetail.aspx?BlogId=580
I believe StringFormatFlags.DirectionVertical is what you are looking for
Maybe you can rotate the bitmap 90 degrees and write the text to the top of the bitmap - then rotate again and write the next side's text - this would give you text running CW/CCW around the edges.
If you want it horizontally across the top and bottom and vertically on the left and right, I suggest measuring (or assumning) the size of the largest character you need to write and then use this to position the drawn text - one character at a time - first on the left side then the right then moving down one char and repeating. You could of course just right the left side in totality and then the right side. just use the width of the char to inset from the right side and the height of the char to offset vertically between chars.
e.g.
1 2 OR 1 4 GIVING C D
3 4 2 5 A O
5 6 3 6 T G
Probably not the most elegant solution, but may help you.
You can use a logical font for this. But it's a pain - you're better off using Fredrik's answer (unless you're doing this in the Compact Framework, where RotateTransform isn't available).