I'm using the GraphicsPath object to draw text in a rectangle. The rectangle is larger than the text, and I want to draw the text in any of the rectangle's corners, and also at the center of its edges.
The problem I have is that when I draw the path, a border is being left around the source rectangle. I want to be able to eliminate that border and make the text touch its bounding rectangle.
Here is the code I have:
private void Form1_Paint(object sender, PaintEventArgs e)
{
var g = e.Graphics;
g.SmoothingMode = SmoothingMode.HighQuality;
Rectangle textRect = new Rectangle(100, 100, 150, 150);
Font f = new Font("Arial", 16);
float emSize = f.Height * f.FontFamily.GetCellAscent(f.Style) /
f.FontFamily.GetEmHeight(f.Style);
foreach (StringAlignment lineAlignment in Enum.GetValues(typeof(StringAlignment)))
{
foreach (StringAlignment alignment in Enum.GetValues(typeof(StringAlignment)))
{
StringFormat sf = new StringFormat() { LineAlignment = lineAlignment, Alignment = alignment };
using (GraphicsPath gp = new GraphicsPath())
{
gp.AddString("txt", f.FontFamily, (int)f.Style, emSize, textRect, sf);
RectangleF bounds = gp.GetBounds();
g.FillPath(Brushes.Black, gp);
g.DrawRectangle(Pens.Red, Rectangle.Round(bounds));
}
}
}
g.DrawRectangle(Pens.Blue, textRect);
}
And here is the result:
Basically, I want the red rectangles (and the text they contain) to touch the blue rectangle, and to eliminate the border between them. Also, I need to use the GraphicsPath and not DrawString.
I ended up writing a helper method to calculate the offset of the rectangles and translate the text before drawing it. Here is the method I wrote:
private PointF FixAlignment(RectangleF parentRect, RectangleF childRect,
StringAlignment lineAlignment, StringAlignment alignment)
{
float xOffset = 0;
float yOffset = 0;
switch (lineAlignment)
{
case StringAlignment.Near:
yOffset = parentRect.Top - childRect.Top;
break;
case StringAlignment.Far:
yOffset = parentRect.Bottom - childRect.Bottom;
break;
}
switch (alignment)
{
case StringAlignment.Near:
xOffset = parentRect.Left - childRect.Left;
break;
case StringAlignment.Far:
xOffset = parentRect.Right - childRect.Right;
break;
}
return new PointF(xOffset, yOffset);
}
I used it in the Form1_Paint method like this:
private void Form1_Paint(object sender, PaintEventArgs e)
{
var g = e.Graphics;
g.SmoothingMode = SmoothingMode.HighQuality;
Rectangle textRect = new Rectangle(100, 100, 150, 150);
Font f = new Font("Arial", 16);
float emSize = f.Height * f.FontFamily.GetCellAscent(f.Style) /
f.FontFamily.GetEmHeight(f.Style);
foreach (StringAlignment lineAlignment in Enum.GetValues(typeof(StringAlignment)))
{
foreach (StringAlignment alignment in Enum.GetValues(typeof(StringAlignment)))
{
StringFormat sf = new StringFormat() { LineAlignment = lineAlignment, Alignment = alignment };
using (GraphicsPath gp = new GraphicsPath())
{
gp.AddString("txt", f.FontFamily, (int)f.Style, emSize, textRect, sf);
RectangleF bounds = gp.GetBounds();
// Calculate the rectangle offset
PointF offset = FixAlignment(textRect, bounds, lineAlignment, alignment);
// Translate using the offset
g.TranslateTransform(offset.X, offset.Y);
g.FillPath(Brushes.Black, gp);
g.DrawRectangle(Pens.Red, Rectangle.Round(bounds));
// Translate back to the original location
g.TranslateTransform(-offset.X, -offset.Y);
}
}
}
g.DrawRectangle(Pens.Blue, textRect);
}
Here is the result:
Related
My code. Output:
Bitmap bitmap = new Bitmap(600, 300, PixelFormat.Format32bppArgb);
Graphics g = Graphics.FromImage(bitmap);
GraphicsPath path = new GraphicsPath();
StringFormat format = new StringFormat();
Rectangle rect = new Rectangle(0, 0, 600, 300);
SolidBrush Brush = new SolidBrush(Color.White);
g.FillRectangle(Brush, rect);
g.SmoothingMode = SmoothingMode.AntiAlias;
format.Alignment = StringAlignment.Center;
format.LineAlignment = StringAlignment.Center;
path.AddString(textBox1.Text, FontFamily.GenericSansSerif, (int)FontStyle.Bold, 128, rect, format);
Brush = new SolidBrush(Color.Blue);
g.FillPath(Brush, path);
float x = path.GetBounds().X;
float y = path.GetBounds().Y;
float w = path.GetBounds().Width / textBox1.Text.Length;
float h = path.GetBounds().Height;
Pen redPen = new Pen(Color.Red, 2);
for (int i = 0; i < textBox1.Text.Length+1; i++)
{
rect = new Rectangle((int)x, (int)y, (int)w*i, (int)h);
g.DrawRectangle(redPen, rect);
}
pictureBox1.Image = bitmap;
I am getting the wrong result in the output because I cannot get the corners of the letters and am using the wrong way.
But i need get correct pixels of letter corners, draw rectangle and fill it.
Like this:
This line made me find one error in your code:
for (int i = 0; i < textBox1.Text.Length+1; i++)
It should be:
for (int i = 0; i < textBox1.Text.Length; i++)
But then indeed only 3 red boxes seem to appear.
The reason for that is the first rectangle (with your code) is very small, because the width is (int)w*i. That should be (int)w*(i+1).
Now back to the place where you are drawing rectangles.
If you take the text 'WWWW', you will see that your solution seems pretty OK.
But if you test with 'IIII', ten you should note that the left-most 'I' is left aligned in the red box, and the right-most 'I' is right aligned in the red box.
You are drawing 4 equal boxes round 4 letters with different with.
A solution could be to draw the letters with a monospaced font.
or, if you do not want a monospaced font, look at How to measure width of character precisely?
I want to put some text on an image. Here is my method:
private Bitmap ConvertTextToImage(string text, FontFamily fontFamily, float fontSize, FontStyle fontStyle = FontStyle.Regular,
StringFormat stringFormat = default, float MaxWidth = float.MaxValue, float MaxHeight = float.MaxValue, Color backgroundColor = default, Color foregroundColor = default)
{
Bitmap bitmap = new Bitmap(1, 1);
Graphics graphics = Graphics.FromImage(bitmap);
if (stringFormat == default) stringFormat = new StringFormat();
if (backgroundColor == default) backgroundColor = Color.Transparent;
if (foregroundColor == default) foregroundColor = Color.Black;
Font font = new Font(fontFamily, fontSize, fontStyle);
SizeF stringSize = graphics.MeasureString(text, font, int.MaxValue, stringFormat);
while (stringSize.Width > MaxWidth || stringSize.Height > MaxHeight)
{
fontSize -= (float)0.1;
font = new Font(fontFamily, fontSize, fontStyle);
stringSize = graphics.MeasureString(text, font, int.MaxValue, stringFormat);
}
bitmap = new Bitmap((int)stringSize.Width, (int)stringSize.Height);
graphics = Graphics.FromImage(bitmap);
graphics.CompositingQuality = CompositingQuality.HighQuality;
graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
graphics.PixelOffsetMode = PixelOffsetMode.HighQuality;
graphics.SmoothingMode = SmoothingMode.HighQuality;
graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
graphics.Clear(backgroundColor);
int x = 0;
if (stringFormat.FormatFlags == StringFormatFlags.DirectionRightToLeft && stringFormat.Alignment == StringAlignment.Center)
x = (int)stringSize.Width / 2;
else if (stringFormat.FormatFlags == StringFormatFlags.DirectionRightToLeft) x = (int)stringSize.Width;
else if (stringFormat.Alignment == StringAlignment.Center) x += (int)stringSize.Width / 2;
graphics.DrawString(text, font, new SolidBrush(foregroundColor), x, 0, stringFormat);
return bitmap;
}
//...
Good for big font sizes or simple fonts (eg. Samim). But for a complex font (IranNastaliq) in small size, it gets like this (brown is on main image and black is generated by C#):
So I decided to use GraphicsPath.AddString instead of Graphics.DrawString:
GraphicsPath graphicsPath = new GraphicsPath();
//...
graphicsPath.AddString(text, fontFamily, (int)fontStyle, fontSize * graphics.DpiY / 72, new Point(x, 0), stringFormat);
graphics.FillPath(new SolidBrush(foregroundColor), graphicsPath);
But result is still bad:
How can I render higher quality texts? Image resolution is 2480x3508x300dpi and font size is about 13.
Thanks to TaW's comment, problem solved. I should adjust bitmap resolution (DPI) to match resolution of original picture. Here is correct code:
private Bitmap ConvertTextToImage(string text, FontFamily fontFamily, float fontSize,
FontStyle fontStyle = FontStyle.Regular, StringFormat stringFormat = default,
float MaxWidth = float.MaxValue, float MaxHeight = float.MaxValue, float xDpi = 72, float yDpi = 72,
Color backgroundColor = default, Color foregroundColor = default)
{
//...
graphics.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
bitmap.SetResolution(xDpi,yDpi);
//...
graphics.DrawString(text, font, new SolidBrush(foregroundColor), x, 0, stringFormat);
}
private void Write()
{
//...
Bitmap name = ConvertTextToImage(Name.Text, IranNastaliq, 58, MaxWidth: 525, xDpi: 300, yDpi: 300);
graphics.DrawImage(name, new Point(1104, 1700));
//...
bitmap.Save("img.jpg", ImageFormat.Jpeg);
}
Result (black text is drawn by GDI):
I have a Form which contains:
a TrackBar (minimum = 1, maximum = 200, represents zoom percent);
a UserControl with BorderStyle = BorderStyle.None.
Relevant code
Form1
From designer code
trackBar1.Value = 100;
BackColor = Color.Gray;
From code-behind
private void trackBar1_Scroll(object sender, EventArgs e)
{
userControl11.SetZoomFactor(trackBar1.Value / 100F);
}
UserControl1
internal float MyBaseWidth;
public UserControl1()
{
InitializeComponent();
MyBaseWidth = Width;
SetZoomFactor(1);
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
e.Graphics.SmoothingMode = SmoothingMode.HighQuality;
e.Graphics.CompositingQuality = CompositingQuality.HighQuality;
e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
Pen p = new Pen(Color.Yellow);
e.Graphics.DrawPath(p, GraphicsPathWithBorder);
}
internal GraphicsPath GraphicsPathWithBorder;
internal void SetZoomFactor(float z)
{
Width = (int)(MyBaseWidth * z);
GraphicsPathWithBorder = RoundedCornerRectangle(ClientRectangle);
Region = new Region(GraphicsPathWithBorder);
}
internal static GraphicsPath RoundedCornerRectangle(Rectangle r)
{
GraphicsPath path = new GraphicsPath();
float size = 10 * 2F;
path.StartFigure();
path.AddArc(r.X, r.Y,
size, size, 180, 90);
path.AddArc((r.X + (r.Width - size)), r.Y,
size, size, 270, 90);
path.AddArc((r.X + (r.Width - size)), (r.Y + (r.Height - size)),
size, size, 0, 90);
path.AddArc(r.X, (r.Y + (r.Height - size)),
size, size, 90, 90);
path.CloseFigure();
return path;
}
Initial screenshot
Screenshot after using the trackbar
The right side of the yellow border becomes invisible after zooming out, and when zooming in there are multiple yellow borders on the right side.
Update:
The answer Works, but there is a part of the control that goes beyond the border. Screenshot for top-right corner, for curveSize = 20:
and for curveSize = 24:
I suggest a slightly different method to draw the Border and the content of the User Control that should also cure the artifacts generated when the control is redrawn.
When you create a Region for a Control and then you paint the Region as it is, the outer borders of the painting are not anti-aliased: the aliased pixels fall outside the Region. The same effect of course is applied when a border is painted around the bounds of the Region.
Here, I apply a Scale Matrix and a Translate Matrix that scale and move the bounds of the Region on the inside of the outer Region that defines the control's bounds.
The size of the scale and the translate transformations are determined by the Pen size.
More information on the Matrix usage here: Flip the GraphicsPath
In this case, when the borders are painted, the outer, anti-aliased, section of the border is inside the Region bounds and the anti-aliasing is preserved.
The background color of the Control is set to Color.Transparent (a User Control supports color transparency on its own).
I've also added a couple of (non decorated) properties that allow to define the inner Color (the Control's BackColor) and Size and Color of the Border. The rest is more or less what it was before.
Sample results:
using System.Drawing;
using System.Drawing.Drawing2D;
public partial class RoundControl : UserControl
{
private GraphicsPath GraphicsPathWithBorder;
private float MyBaseWidth;
private float m_PenSize = 2f;
private Color m_BorderColor = Color.Yellow;
private Color m_FillColor = Color.Green;
public RoundControl()
{
ResizeRedraw = true;
InitializeComponent();
MyBaseWidth = Width;
}
public float BorderSize
{
get => m_PenSize;
set {
m_PenSize = value;
Invalidate();
}
}
public Color BorderColor
{
get => m_BorderColor;
set {
m_BorderColor = value;
Invalidate();
}
}
public Color FillColor
{
get => m_FillColor;
set {
m_FillColor = value;
Invalidate();
}
}
protected override void OnLayout(LayoutEventArgs e) {
UpdateRegion();
base.OnLayout(e);
}
protected override void OnPaint(PaintEventArgs e)
{
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
RectangleF rect = GraphicsPathWithBorder.GetBounds();
float scaleX = 1 - ((m_PenSize + 1) / rect.Width);
float scaleY = 1 - ((m_PenSize + 1) / rect.Height);
using (Pen pen = new Pen(m_BorderColor, m_PenSize))
using (Brush brush = new SolidBrush(m_FillColor))
using (Matrix mx = new Matrix(scaleX, 0, 0, scaleY, pen.Width / 2, pen.Width / 2))
{
e.Graphics.Transform = mx;
e.Graphics.FillPath(brush, GraphicsPathWithBorder);
e.Graphics.DrawPath(pen, GraphicsPathWithBorder);
}
base.OnPaint(e);
}
internal void SetZoomFactor(float z) {
int newWidth = (int)(MyBaseWidth * z);
if (newWidth <= (30 + m_PenSize * 2)) return;
Width = newWidth;
UpdateRegion();
}
private void UpdateRegion() {
GraphicsPathWithBorder = RoundedCornerRectangle(ClientRectangle);
Region = new Region(GraphicsPathWithBorder);
Invalidate();
}
private GraphicsPath RoundedCornerRectangle(Rectangle r)
{
GraphicsPath path = new GraphicsPath();
// Fixed curve size since we only scale on X-dimension
// Otherwise, adjust also considering the height
float curveSize = 10 * 2.4F;
path.StartFigure();
path.AddArc(r.X, r.Y, curveSize, curveSize, 180, 90);
path.AddArc(r.Right - curveSize, r.Y, curveSize, curveSize, 270, 90);
path.AddArc(r.Right - curveSize, r.Bottom - curveSize, curveSize, curveSize, 0, 90);
path.AddArc(r.X, r.Bottom - curveSize, curveSize, curveSize, 90, 90);
path.CloseFigure();
return path;
}
}
I draw lines with the same pen, but the line widths are different in result. Why?
Bitmap b = new Bitmap(400, 400);
Graphics g = Graphics.FromImage(b);
g.PageUnit = GraphicsUnit.Point;
g.Clear(Color.White);
Pen pen = new Pen(Color.Red, 1.2f);
for (int i = 20; i < 200; i = i + 20)
{
g.DrawLine(pen, 10, i, 190, i);
}
g.Dispose();
b.Save("d:/temp/test.png", ImageFormat.Png);
b.Dispose()
Here is the result:
MSDN for GraphicsUnit
It's because you're working with Points and not Pixels and the variation in the width of the lines is the result of a rounding errors in the placement of the line and the width of the line in relation to how it gets rendered in pixels in the final product.
If you don't care about printing the image, it might be best to stick with Pixels.
Edit: If you want to continue using points, space things relative to your pen width:
Bitmap b = new Bitmap(400, 400);
Graphics g = Graphics.FromImage(b);
g.PageUnit = GraphicsUnit.Point;
g.Clear(Color.White);
Pen pen = new Pen(Color.Red, 1.2f);
for (float i = 20f * pen.Width; i < 200f * pen.Width; i = i + 20f * pen.Width)
{
g.DrawLine(pen, 10f, i, 190f, i);
}
g.Dispose();
b.Save("c:/temp/test.png", ImageFormat.Png);
b.Dispose();
Is it possible to draw a polyline that has a linear gradient along it's stroke width? That is, if you have a gradient with black on 0 and 100% and white 50%, the black will always be on the edge of the line and the white in the middle, regardless of the angle. Think of it as some sort of 3D pipes. Of course, the line will have a stroke width of at least 10px. All the questions here ask how to fill a line between it's ends. I'm definitely not interested in that. I'm working in C# using GDI+, can be any .NET version.
I think this is what you want:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.SmoothingMode=SmoothingMode.AntiAlias;
DrawPipe(e.Graphics, 10f, new PointF(10, 10), new PointF(250, 80), Color.White, Color.Black);
DrawPipe(e.Graphics, 10f, new PointF(15, 60), new PointF(280, 120), Color.BlueViolet, Color.Black);
}
private void DrawPipe(Graphics g, float width, PointF p1, PointF p2, Color mid_color, Color edge_color)
{
SizeF along=new SizeF(p2.X-p1.X, p2.Y-p1.Y);
float mag=(float)Math.Sqrt(along.Width*along.Width+along.Height*along.Height);
along=new SizeF(along.Width/mag, along.Height/mag);
SizeF perp=new SizeF(-along.Height, along.Width);
PointF p1L=new PointF(p1.X+width/2*perp.Width, p1.Y+width/2*perp.Height);
PointF p1R=new PointF(p1.X-width/2*perp.Width, p1.Y-width/2*perp.Height);
PointF p2L=new PointF(p2.X+width/2*perp.Width, p2.Y+width/2*perp.Height);
PointF p2R=new PointF(p2.X-width/2*perp.Width, p2.Y-width/2*perp.Height);
GraphicsPath gp=new GraphicsPath();
gp.AddLines(new PointF[] { p1L, p2L, p2R, p1R});
gp.CloseFigure();
Region region=new Region(gp);
using(LinearGradientBrush brush=new LinearGradientBrush(
p1L, p1R, Color.Black, Color.Black))
{
ColorBlend color_blend=new ColorBlend();
color_blend.Colors=new Color[] { edge_color, mid_color, edge_color };
color_blend.Positions=new float[] { 0f, 0.5f, 1f };
brush.InterpolationColors=color_blend;
g.FillRegion(brush, region);
}
}
}
Edit 1
An alternative is to use a PathGradientBrush
GraphicsPath gp = new GraphicsPath();
gp.AddLines(new PointF[] { p1, p1L, p2L, p2, p2R, p1R });
gp.CloseFigure();
Region region = new Region(gp);
using (PathGradientBrush brush = new PathGradientBrush(gp))
{
brush.CenterColor = mid_color;
brush.SurroundColors = new Color[]
{
mid_color, edge_color,edge_color,mid_color,edge_color,edge_color
};
g.FillRegion(brush, region);
}
Edit 2
To make the edges smoother use some alpha transparency:
using(LinearGradientBrush brush=new LinearGradientBrush(
p1L, p1R, Color.Black, Color.Black))
{
ColorBlend color_blend=new ColorBlend();
color_blend.Colors=new Color[] {
Color.FromArgb(0, edge_color), edge_color, mid_color,
edge_color, Color.FromArgb(0, edge_color) };
color_blend.Positions=new float[] { 0f, 0.1f, 0.5f, 0.9f, 1f };
brush.InterpolationColors=color_blend;
g.FillRegion(brush, region);
}
Edit 3
With some artifacts multiple lines are drawing, by rendering circles between then first and then the lines
private void DrawPipes(Graphics g, float width, PointF[] points, Color mid_color, Color edge_color)
{
for (int i = 0; i < points.Length; i++)
{
using (GraphicsPath gp = new GraphicsPath())
{
gp.AddEllipse(points[i].X - width / 2, points[i].Y - width / 2, width, width);
using (PathGradientBrush brush = new PathGradientBrush(gp))
{
brush.CenterColor = mid_color;
brush.SurroundColors = new Color[] { edge_color };
brush.CenterPoint = points[i];
g.FillPath(brush, gp);
}
}
if (i > 0)
{
DrawPipe(g, width, points[i - 1], points[i], mid_color, edge_color);
}
}
}