Draw Gradient Label - c#

Is it possible to apply a gradient to label text?
Right now I am taking over a controls OnPaint and drawing the string of text that I want; however, this is to specific. I really want to make it so that the label itself gets applied the gradient colors I want. So in turn each character would have the gradient specified as the text has changed.
So instead of using the ForeColor I would apply a LinearGradientBrush. I am using WinForms at the moment.
EDIT 1
Here is the code that I am currently using. However, this only applies the gradient to all of the characters. I would like to change it so that each character in the string is applied.
// Draw the formatted text string to the DrawingContext of the control.
Font font = new Font("BankGothic Md BT", 48f, FontStyle.Bold);
LinearGradientBrush brush = new LinearGradientBrush(label1.Location, new Point(label1.Width, label1.Height), Color.Goldenrod, Color.Black);
e.Graphics.DrawString(label1.Text, font, brush, 0,0);
Edit 2
Here is what I did. I just extended the Label class and inherited OnPaint.
public partial class LabelEx : Label {
public LabelEx() {
InitializeComponent();
}
protected override void OnPaint(PaintEventArgs e) {
// Draw the formatted text string to the DrawingContext of the control.
//base.OnPaint(e);
Font font = new Font("Tahoma", 48f, FontStyle.Bold);
LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, Width, Height + 5), Color.Gold, Color.Black, LinearGradientMode.Vertical);
e.Graphics.DrawString(Text, font, brush, 0, 0);
}
}
Which gives me a nice gradient text label.
Thanks!

Here is what I did. I just extended the Label class and inherited OnPaint.
public partial class LabelEx : Label {
public LabelEx() {
InitializeComponent();
}
protected override void OnPaint(PaintEventArgs e) {
// Draw the formatted text string to the DrawingContext of the control.
//base.OnPaint(e);
Font font = new Font("Tahoma", 48f, FontStyle.Bold);
LinearGradientBrush brush = new LinearGradientBrush(new Rectangle(0, 0, Width, Height + 5), Color.Gold, Color.Black, LinearGradientMode.Vertical);
e.Graphics.DrawString(Text, font, brush, 0, 0);
}
}

Related

How to convert Unicode text into a Bitmap

I need to convert a text containing Unicode chars into a Bitmap that could have a transparent background as well.
I found and tried different posts like this, this, or this, but no one seems to work for me.
I found also this post that suggests using TextRenderer.DrawText() method instead of System.Drawing.Graphics.DrawString() but the final result is not good anyway.
That's a code snippet:
private static Bitmap ImageFromText(string text, Font font, Color textColor, Color fillColor, System.Drawing.Graphics graphics)
{
Bitmap bmpOut;
SizeF sz = TextRenderer.MeasureText(graphics, text, font);
//SizeF sz = g.MeasureString(text, font);
if (sz.IsEmpty)
sz = new SizeF(1, 1);
bmpOut = new Bitmap((int) Math.Ceiling(sz.Width), (int) Math.Ceiling(sz.Height), PixelFormat.Format32bppArgb);
using (System.Drawing.Graphics gBmp = System.Drawing.Graphics.FromImage(bmpOut))
{
gBmp.Clear(fillColor);
gBmp.SmoothingMode = SmoothingMode.HighQuality;
gBmp.InterpolationMode = InterpolationMode.HighQualityBilinear;
gBmp.TextRenderingHint = TextRenderingHint.AntiAliasGridFit;
//gBmp.DrawString(text, font, brFore, 0, 0); // Unicode chars are not supported
TextRenderer.DrawText(gBmp, text, font, new Point(0, 0), textColor);
}
return bmpOut;
}
Here is my test code:
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
string testString = "Unicode Title \uD83E\uDC25";
var font = new Font(new FontFamily("Microsoft Sans Serif"), 12.375f);
// e.Graphics.DrawString(testString, new Font(font.FontFamily, 20), new SolidBrush(Color.Black), 0, 0);
TextRenderer.DrawText(e.Graphics, testString, new Font ( font.FontFamily, 20 ), new Point(0, 50), Color.Black);
Bitmap bitmap = ImageFromText(testString, new Font(font.FontFamily, 20), Color.Black, this.BackColor, e.Graphics);
e.Graphics.DrawImage(bitmap, new Point(0, 100));
//Clipboard.SetImage(bitmap);
}
}
And this is the poor result:
How can I improve the bitmap result?
EDIT
Short recap:
I can't use System.Drawing.Graphics.DrawString() method because it does not support Unicode chars
I can't use TextRenderer.DrawText() method because TextRenderer class uses GDI and it isn't alpha aware, so it does not support a transparent background.
Is there some other way to reach my goal?

How to connect .DrawEllipse with .DrawString

I'm trying to write text inside circle (not centered by rectangle) alignment must be from line to line inside circle.
I have successfully drawn the circle and text. I did research on Stack Overflow and Google without success about putting text inside this circle.
private void Button1_Click(object sender, EventArgs e)
{
System.Drawing.Graphics graphicsObj;
graphicsObj = this.CreateGraphics();
// Create font and brush.
Font drawFont = new Font("Arial", 5);
SolidBrush drawBrush = new SolidBrush(Color.Black);
// Create point for upper-left corner of drawing.
float x = 150.0F;
float y = 50.0F;
// Set format of string.
StringFormat drawFormat = new StringFormat();
drawFormat.FormatFlags = StringFormatFlags.FitBlackBox;
graphicsObj.DrawEllipse(Pens.Red, 20, 20, 350, 350);
graphicsObj.DrawString(richTextBox1.Text.ToString(), drawFont, drawBrush, x, y, drawFormat);
}
Looking for advise, not for exact code..
-> How to establish connection for text alignment based on rectangle.
Expected output like in this image : https://imge.to/i/miFif
exactly same but I need in C# Win.Form -> Wrap text inside a circular div
DrawString has an overload with format options:
...
DrawString(e.Cache, text, rect,
new StringFormat() {
LineAlignment = StringAlignment.Center,
Alignment = StringAlignment.Center
});

Align middle text string inside the button

I'm making some custom control for a small project. I have created a TP1CustomFlatButton like this:
It was easy for me if I added a label with text to bottom of my TP1CustomFlatButton. I didn't want to handle events for that label so I used event onPaint to draw the text. I followed the turtorial of Microsoft and I got the custom flat button like the picture I attached. What I'm trying to get is to make the text align center at the bottom of my TP1CustomFlatButton.
This is my code for TP1CustomFlatButton:
// constructor
public TP1CustomFlatButton()
{
this.FlatStyle = FlatStyle.Flat;
this.FlatAppearance.BorderSize = 0;
this.BackColor = Color.MediumSeaGreen;
this.ForeColor = Color.White;
this.Text = "TP1CustomButton";
}
protected override void OnPaint(PaintEventArgs pevent)
{
pevent.Graphics.FillRectangle(new SolidBrush(this.BackColor), new Rectangle(0, 0, this.Width, this.Height));
TextFormatFlags flags = TextFormatFlags.Bottom;
//render text
TextRenderer.DrawText(pevent.Graphics, this.Text, this.Font, new Point((int)(this.Width - Text.Length)/2,this.Height), this.ForeColor, flags);
//draw image
Image img = this.BackgroundImage;
//create rectangle to display image
Rectangle imgRec = new Rectangle(this.Width - 32 /3, this.Height - 32/ 3, 32, 32);
if(img!=null)
pevent.Graphics.DrawImage(img, imgRec);
}
I'm really confused with the coordinate X and Y. As you can see the code I tried to make the "SETTINGS" text string to align center at bottom of my TP1CustomFlatButton. I spent 5 hours to read more information about coordinate and location of controls in Windows Form. But now I'm really tired.
Hope someone can give me any advice or any solution for my custom control.
You need to use the MeasureString()method in order to calculate the middle.
also see the changes i have madein order to find the middle (calculated in drawPoint field).
see my example based on your code:
public TP1CustomFlatButton()
{
this.FlatStyle = FlatStyle.Flat;
this.FlatAppearance.BorderSize = 0;
this.BackColor = Color.MediumSeaGreen;
this.ForeColor = Color.White;
this.Text = "middle";
}
protected override void OnPaint(PaintEventArgs pevent)
{
pevent.Graphics.FillRectangle(new SolidBrush(this.BackColor), new Rectangle(0, 0, this.Width, this.Height));
TextFormatFlags flags = TextFormatFlags.Bottom;
//render text
String drawString = this.Text;
SizeF size = pevent.Graphics.MeasureString(drawString, this.Font);
Point drawPoint = new Point((int)this.Size.Width / 2 - (int)size.Width / 2,this.Height);
TextRenderer.DrawText(pevent.Graphics, this.Text, this.Font, drawPoint, this.ForeColor, flags);
//draw image
Image img = this.BackgroundImage;
//create rectangle to display image
Rectangle imgRec = new Rectangle(this.Width - 32 / 3, this.Height - 32 / 3, 32, 32);
if (img != null)
pevent.Graphics.DrawImage(img, imgRec);
}
Output:
Try Changing the TextFormatFlags as below:
TextFormatFlags flags = TextFormatFlags.Bottom | TextFormatFlags.VerticalCenter;
Also, checkout this link

Finding the bounding rectangle of text with alignment

I'm trying to draw a box around a label which has been aligned using StringAlignment.Far for example. I can find the Size of text using g.MeasureString but I can't find a method to translate the origin point such that I can find a Rectangle which bounds the text.
Say I have a Point origin at which to draw from, and a StringFormat format with what alignment I wish my string to have. I can find the Size of the string using g.MeasureString(text, font). How do I translate this Point/Size pair into a rectangle which overlaps the g.DrawString(text, font, brush, origin, format) call.
It's difficult to convert c to managed code. You should use .Net code directly if it's available.
For MeasureString, see link Graphics.MeasureString Method
Example:
using System.Diagnostics;
...
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
Graphics g = e.Graphics;
Font font = new Font("Arial", 16);
SizeF sz = g.MeasureString("Text...", font);
Rectangle rc = new Rectangle(0,0, (int)sz.Width, (int)sz.Height);
Debug.WriteLine(rc.Width.ToString());
Debug.WriteLine(rc.Height.ToString());
//change top/left origin of rectangle
rc.X = 10;
rc.Y = 20;
}
You just need the width and height of text. You can change left/top corner of rectangle.
By the way, the C method gives a rectangle with top/left coordinates at zero, so it's the same information as Size
Edit
This will fit text with word-break flag in to a rectangle whose width is 100. The height of the rectangle is not known. TextRenderer.MeasureText will tell us the height of the rectangle. Top/left corner can be changed, alignment can be changed.
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
Font font = new Font("Arial", 10);
string text = "I'm trying to draw a box around a label which has been aligned.";
Size layout = new Size(100, 0);
Size sz = TextRenderer.MeasureText(e.Graphics, text, font, layout,
TextFormatFlags.WordBreak);
Rectangle rc = new Rectangle(new Point(0,0), sz);
e.Graphics.DrawRectangle(Pens.Black, rc);
TextRenderer.DrawText(e.Graphics, text, font, rc,
SystemColors.ControlText, SystemColors.Control, TextFormatFlags.WordBreak);
}
My way is use SetMeasurableCharacterRanges to obtain the region of the whole text.
Consider into OnPaint:
protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
Font font = new Font("Arial", 16);
string text = "Border of this text";
StringFormat sf = new StringFormat();
sf.Alignment = StringAlignment.Center;
sf.LineAlignment = StringAlignment.Center;
RectangleF area = new RectangleF(0, 0, 246, 84);
sf.SetMeasurableCharacterRanges(new CharacterRange[] { new CharacterRange(0, text.Length) });
Region[] r = g.MeasureCharacterRanges(text, font, area, sf);
Rectangle rf = new Rectangle((int)r[0].GetBounds(g).X, (int)r[0].GetBounds(g).Y, (int)r[0].GetBounds(g).Width, (int)r[0].GetBounds(g).Height);
g.DrawString(text, font, Brushes.Black, area, sf);
g.DrawRectangle(new Pen(Color.Red, 1), rf);
}

How to determine width of a string when printed?

I'm creating a custom control, part of which is using the Graphics class to draw text to the form. Currently I'm using the following code to display it:
private float _lineHeight { get { return this.Font.Size + 5; } }
private void Control_Paint(object sender, PaintEventArgs e)
{
Graphics g = this.CreateGraphics();
Brush b = new SolidBrush(Colors[7]);
g.DrawString("Hello World!", this.Font, b, 0, 2);
g.DrawString("This has been a test of the emergency drawing system!",
this.Font, b, 0, 2 + _lineHeight);
}
I'm currently using fixedwidth fonts, and I'd like to know how wide the font will display, but there doesn't appear to be any properties for this sort of information. Is there some way of obtaining it? I want it so I can wrap lines properly when displayed.
Yes, you can use MeasureString from the Graphics class
This method returns a SizeF structure that represents
the size, in the units specified by
the PageUnit property, of the string
specified by the text parameter as
drawn with the font parameter.
private void MeasureStringMin(PaintEventArgs e)
{
// Set up string.
string measureString = "Measure String";
Font stringFont = new Font("Arial", 16);
// Measure string.
SizeF stringSize = new SizeF();
stringSize = e.Graphics.MeasureString(measureString, stringFont);
// Draw rectangle representing size of string.
e.Graphics.DrawRectangle(new Pen(Color.Red, 1), 0.0F, 0.0F, stringSize.Width, stringSize.Height);
// Draw string to screen.
e.Graphics.DrawString(measureString, stringFont, Brushes.Black, new PointF(0, 0));
}

Categories