Home > front end >  Outer Glow Effect for Text C#
Outer Glow Effect for Text C#

Time:10-29

i want to have outer glow text in a label for my winform application some thing like: enter image description here

i searched for it in stackoverflow and I found this:

private void Form1_Paint(object sender, System.Windows.Forms.PaintEventArgs e)

{

  //Create a bitmap in a fixed ratio to the original drawing area.

  Bitmap bm=new Bitmap(this.ClientSize.Width/5, this.ClientSize.Height/5);

  //Create a GraphicsPath object. 

  GraphicsPath pth=new GraphicsPath();

  //Add the string in the chosen style. 

  pth.AddString("Text Halo",new FontFamily("Verdana"),(int)FontStyle.Regular,100,new Point(20,20),StringFormat.GenericTypographic);

  //Get the graphics object for the image. 

  Graphics g=Graphics.FromImage(bm);

  //Create a matrix that shrinks the drawing output by the fixed ratio. 

  Matrix mx=new Matrix(1.0f/5,0,0,1.0f/5,-(1.0f/5),-(1.0f/5));

  //Choose an appropriate smoothing mode for the halo. 

  g.SmoothingMode=SmoothingMode.AntiAlias;

  //Transform the graphics object so that the same half may be used for both halo and text output. 

  g.Transform=mx;

  //Using a suitable pen...

  Pen p=new Pen(Color.Yellow,3);

  //Draw around the outline of the path

  g.DrawPath(p,pth);

  //and then fill in for good measure. 

  g.FillPath(Brushes.Yellow,pth);

  //We no longer need this graphics object

  g.Dispose();

  //this just shifts the effect a little bit so that the edge isn't cut off in the demonstration

  e.Graphics.Transform=new Matrix(1,0,0,1,50,50);

  //setup the smoothing mode for path drawing

  e.Graphics.SmoothingMode=SmoothingMode.AntiAlias;

  //and the interpolation mode for the expansion of the halo bitmap

  e.Graphics.InterpolationMode=InterpolationMode.HighQualityBicubic;

  //expand the halo making the edges nice and fuzzy. 

  e.Graphics.DrawImage(bm,ClientRectangle,0,0,bm.Width,bm.Height,GraphicsUnit.Pixel);

  //Redraw the original text

  e.Graphics.FillPath(Brushes.Black,pth);

  //and you're done. 

  pth.Dispose();

}

but the PROBLEM IS I CAN NOT MOVE IT please help me i need it to be movable and I want to be able to change it's size. the code above, just adds it automatically to somewhere in my form but I want to move that. thank you

CodePudding user response:

A better approach is to create a custom control for this to use/add some relevant drawing properties. Mainly, the Font and color of the text, the size and color of the outline. Then, you can lay out the custom control in any container at any location and with any size.

Here's a simple example.

[DesignerCategory("Code")]
public class GlowTextLabel : Control
{
    private Color outlineColor = SystemColors.Highlight;
    private int outlineSize = 1;

    public GlowTextLabel() : base()
    {
        SetStyle(ControlStyles.Selectable, false);
        SetStyle(ControlStyles.OptimizedDoubleBuffer |
            ControlStyles.ResizeRedraw |
            ControlStyles.SupportsTransparentBackColor, true);
    }

    [DefaultValue(typeof(Color), "Highlight")]
    public Color OutlineColor
    {
        get => outlineColor;
        set
        {
            if (outlineColor != value)
            {
                outlineColor = value;
                Invalidate();
            }
        }
    }
        
    [DefaultValue(1)]
    public int OutlineSize
    {
        get => outlineSize;
        set
        {
            if (outlineSize != value)
            {
                outlineSize = Math.Max(1, value);
                Invalidate();
            }
        }
    }

    protected override void OnTextChanged(EventArgs e)
    {
        base.OnTextChanged(e);
        Invalidate();
    }

    protected override void OnPaint(PaintEventArgs e)
    {
        e.Graphics.Clear(BackColor);

        var w = Math.Max(8, ClientSize.Width / 5);
        var h = Math.Max(8, ClientSize.Height / 5);

        using (var bmp = new Bitmap(w, h))
        using (var gp = new GraphicsPath())
        using (var sf = new StringFormat(StringFormat.GenericTypographic))
        {
            sf.Alignment = sf.LineAlignment = StringAlignment.Center;

            gp.AddString(Text, 
                Font.FontFamily, (int)Font.Style, GetEmFontSize(Font), 
                ClientRectangle, sf);
               
            using (var g = Graphics.FromImage(bmp))
            using (var m = new Matrix(1.0f / 5, 0, 0, 1.0f / 5, -(1.0f / 5), -(1.0f / 5)))
            {
                g.SmoothingMode = SmoothingMode.AntiAlias;
                g.Transform = m;

                using (var pn = new Pen(OutlineColor, OutlineSize))
                {
                    g.DrawPath(pn, gp);
                    g.FillPath(pn.Brush, gp);
                }
            }

            e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic;
            // Optional for wider blur...
            // e.Graphics.CompositingQuality = CompositingQuality.HighQuality;
            e.Graphics.DrawImage(bmp, 
                ClientRectangle, 0, 0, bmp.Width, bmp.Height, 
                GraphicsUnit.Pixel);
            e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;

            using (var br = new SolidBrush(ForeColor))
                e.Graphics.FillPath(br, gp);
        }
    }
}

private float GetEmFontSize(Font fnt) =>
    fnt.SizeInPoints * (fnt.FontFamily.GetCellAscent(fnt.Style)  
    fnt.FontFamily.GetCellDescent(fnt.Style)) / fnt.FontFamily.GetEmHeight(fnt.Style);

Rebuild, find the GlowTextLabel control on the ToolBox under your project's components group, drop an instance, try the Font, ForeColor, OutlineColor, and OutlineSize properties with different values.

Pen width 1.

SO74232522A

Pen width 10.

SO74232522B

Pen width 20.

SO74232522C

  • Related