We Keep Coding

Outer Glow Effect for Text C#

i want to have outer glow text in a label for my winform application some thing like:
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

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.
Pen width 10.
Pen width 20.

Get pixel value of image draw through onPaint methode

I am developping a custom C# UserControl WinForm to display an image on background and display scrollbars when I zoom with the mouse. For this, I overrided the OnPaint method. In it, if I have an image loaded, according some parameters I know the source and destination rectangle sizes. In the same way, I know what scale and translation apply to always keeping the top left corner on screen when zooming. And for the zoom, I use the scrollmouse event to update the zoom factory.
Here is my code related to this override method.
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
// Draw image
if(image != null)
{
//
Rectangle srcRect, destRect;
Point pt = new Point((int)(hScrollBar1.Value/zoom), (int)(vScrollBar1.Value/zoom));
if (canvasSize.Width * zoom < viewRectWidth && canvasSize.Height * zoom < viewRectHeight)
srcRect = new Rectangle(0, 0, canvasSize.Width, canvasSize.Height); // view all image
else if (canvasSize.Width * zoom < viewRectWidth)
srcRect = new Rectangle(0, pt.Y, canvasSize.Width, (int)(viewRectHeight / zoom)); // view a portion of image but center on width
else if (canvasSize.Height * zoom < viewRectHeight)
srcRect = new Rectangle(pt.X, 0, (int)(viewRectWidth / zoom), canvasSize.Height); // view a portion of image but center on height
else
srcRect = new Rectangle(pt, new Size((int)(viewRectWidth / zoom), (int)(viewRectHeight / zoom))); // view a portion of image
destRect = new Rectangle((int)(-srcRect.Width/2),
(int)-srcRect.Height/2,
srcRect.Width,
srcRect.Height); // the center of apparent image is on origin
Matrix mx = new Matrix(); // create an identity matrix
mx.Scale(zoom, zoom); // zoom image
// Move image to view window center
mx.Translate(viewRectWidth / 2.0f, viewRectHeight / 2.0f, MatrixOrder.Append);
// Display image on widget
Graphics g = e.Graphics;
g.InterpolationMode = interMode;
g.Transform = mx;
g.DrawImage(image, destRect, srcRect, GraphicsUnit.Pixel);
}
}
My question is how to get the pixel value when I am on the MouseMove override method of this WinForm ?
I think understand that it is possible only in method with PaintEventArgs but I am not sure how to deal with it. I tried a lot of things but for now the better I got is use the mouse position on the screen and find the pixel value in the original bitmap with these "wrong" coordinates. I can't link this relative position on the screen with the real coordinates of the pixel of the image display at this place. Maybe there is method to "just" get the pixel value not passing through the image bitmap I use for the paint method ? Or maybe not.
Thank you in advance for your help. Best regards.

I couldn't completely understand your drawing code but you can do an inverse transformation on mouse coordinate. So, you can translate the mouse coordinate back to the origin and scale it by 1/zoom. This simple process gives you the image space coordinate.
I provide an example code with its own drawing code (not your code/algorithm) but that can still give you the idea of inverse transformation. It is pretty simple so look at the example code.
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Windows.Forms;
namespace GetPixelFromZoomedImage
{
public partial class MainForm : Form
{
public Form1()
{
SetStyle(ControlStyles.AllPaintingInWmPaint | ControlStyles.OptimizedDoubleBuffer | ControlStyles.UserPaint | ControlStyles.ResizeRedraw, true);
InitializeComponent();
}
private float m_zoom = 1.0f;
private Bitmap m_image;
private Point m_origin = Point.Empty;
private Point m_delta = Point.Empty;
private SolidBrush m_brush = new SolidBrush(Color.Transparent);
protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality;
g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;
g.TranslateTransform(m_origin.X, m_origin.Y);
g.ScaleTransform(m_zoom, m_zoom);
g.DrawImageUnscaled(m_image, Point.Empty);
g.ResetTransform();
g.FillRectangle(m_brush, ClientSize.Width - 50, 0, 50, 50);
base.OnPaint(e);
}
protected override void OnHandleCreated(EventArgs e)
{
m_image = (Bitmap)Image.FromFile("test.png");
base.OnHandleCreated(e);
}
protected override void OnMouseDown(MouseEventArgs e)
{
if(e.Button == MouseButtons.Left)
{
m_delta = new Point(m_origin.X - e.X, m_origin.Y - e.Y);
}
base.OnMouseDown(e);
}
protected override void OnMouseMove(MouseEventArgs e)
{
if(e.Button == MouseButtons.Left)
{
m_origin = new Point(e.X + m_delta.X, e.Y + m_delta.Y);
Invalidate();
}
int x = (int)((e.X - m_origin.X) / m_zoom);
int y = (int)((e.Y - m_origin.Y) / m_zoom);
if (x < 0 || x >= m_image.Width || y < 0 || y >= m_image.Height)
return;
m_brush.Color = m_image.GetPixel(x, y);
Invalidate();
base.OnMouseMove(e);
}
protected override void OnMouseUp(MouseEventArgs e)
{
base.OnMouseUp(e);
}
protected override void OnMouseWheel(MouseEventArgs e)
{
float scaleFactor = 1.6f * (float)Math.Abs(e.Delta) / 120;
if(e.Delta > 0)
m_zoom *= scaleFactor;
else
m_zoom /= scaleFactor;
m_zoom = m_zoom > 64.0f ? 64.0f : m_zoom;
m_zoom = m_zoom < 0.1f ? 0.1f : m_zoom;
Invalidate();
base.OnMouseWheel(e);
}
}
}

How to draw rectangle by coordinates of click?

I have pictureBox click event. I get coordinates of click and try t draw circle:
private void pictureMain_Click(object sender, EventArgs e){
MouseEventArgs me = (MouseEventArgs)e;
Point coordinates = me.Location;
int x = coordinates.X;
int y = coordinates.Y;
// Create pen.
Pen blackPen = new Pen(Color.Red, 2);
// Create rectangle for ellipse.
Rectangle rect = new Rectangle(x, y, 50, 50);
g.DrawEllipse(blackPen, rect);
}
But it draws circle not in coordinates(x,y) of picturebox. It places circle in another place.

Try this:
private void pictureBox1_Click (object sender, EventArgs e)
{
Point ellipseCenter = ((MouseEventArgs) e).Location;
Size ellipseSize = new Size (50, 50);
Point rectPosition = new Point (ellipseCenter.X - ellipseSize.Width / 2, ellipseCenter.Y - ellipseSize.Height / 2);
Rectangle rect = new Rectangle (rectPosition, ellipseSize);
using (Graphics grp = Graphics.FromImage (pictureBox1.Image))
{
grp.DrawEllipse (Pens.Red, rect);
}
pictureBox1.Refresh ();
}

Fix Graphics draw area size

I'm just starting to learn the GDI+ system for drawing lines, circles etc. I've created a component (scanner) that inherits a Panel to draw on (not sure if panel or picture box is best).
On the "Scanner" Im currently drawing a circle on it. the component can be added to a winform and using docking will resize when the winform resizes. At the moment I'm getting the size of the component to calculate the size of the circle but what I want to do is basically say no matter what size the component is the "canvas" is always 300 x 300 wide, so I can say the circle should be positioned at 25,25 with a size of 250x250.
As you might guess from the name "Scanner" I want to plot points on it, but these will be calculated from the center (150,150) location.
Below is the code I have that basically draws the circle.
Many thanks for any help on this.
public partial class Scanner : Panel
{
public Scanner() {
InitializeComponent();
this.DoubleBuffered = true;
}
protected override void OnPaint(PaintEventArgs e) {
Graphics g = e.Graphics;
Draw(g);
base.OnPaint(e);
}
protected override void OnResize(EventArgs e) {
Graphics g = this.CreateGraphics();
Draw(g);
base.OnResize(e);
}
private void Draw(Graphics g) {
g.Clear(Color.Black);
g.PageUnit = GraphicsUnit.Pixel;
Pen green = new Pen(Color.Green);
Font fnt = new Font("Arial", 10);
SolidBrush sb = new SolidBrush(Color.Red);
int pos = (this.Width < this.Height ? this.Width : this.Height) / 2;
int size = (int)(pos * 1.9);
pos -= ((int)size / 2);
g.DrawEllipse(green, pos, pos, size, size);
g.DrawString(this.Width.ToString(), fnt, sb, new Point(0, 0));
}
}

Based on your recent comment, I understand you want to do your drawing on a fixed-size canvas, and plot this canvas inside the control, as large as will fit in the control.
Try the code below:
public class Scanner : Panel
{
private Image _scanner;
public Scanner()
{
this.SetStyle(ControlStyles.ResizeRedraw, true);
CreateScanner();
}
private void CreateScanner()
{
Bitmap scanner = new Bitmap(300, 300);
Graphics g = Graphics.FromImage(scanner);
g.DrawEllipse(Pens.Green, 25, 25, 250, 250);
g.Dispose();
_scanner = scanner;
}
protected override void OnPaint(PaintEventArgs e)
{
base.OnPaint(e);
int shortestSide = Math.Min(this.Width, this.Height);
if (null != _scanner)
e.Graphics.DrawImage(_scanner, 0, 0, shortestSide, shortestSide);
}
}

Drawing circles with System.Drawing

I have this code that draws a Rectangle ( Im trying to remake the MS Paint )
case "Rectangle":
if (tempDraw != null)
{
tempDraw = (Bitmap)snapshot.Clone();
Graphics g = Graphics.FromImage(tempDraw);
Pen myPen = new Pen(foreColor, lineWidth);
g.DrawRectangle(myPen, x1, y1, x2-x1, y2-y1);
myPen.Dispose();
e.Graphics.DrawImageUnscaled(tempDraw, 0, 0);
g.Dispose();
}
But what if I want to draw a circle, what will change?
g.DrawRectangle(myPen, x1, y1, x2-x1, y2-y1);

There is no DrawCircle method; use DrawEllipse instead. I have a static class with handy graphics extension methods. The following ones draw and fill circles. They are wrappers around DrawEllipse and FillEllipse:
public static class GraphicsExtensions
{
public static void DrawCircle(this Graphics g, Pen pen,
float centerX, float centerY, float radius)
{
g.DrawEllipse(pen, centerX - radius, centerY - radius,
radius + radius, radius + radius);
}
public static void FillCircle(this Graphics g, Brush brush,
float centerX, float centerY, float radius)
{
g.FillEllipse(brush, centerX - radius, centerY - radius,
radius + radius, radius + radius);
}
}
You can call them like this:
g.FillCircle(myBrush, centerX, centerY, radius);
g.DrawCircle(myPen, centerX, centerY, radius);

Try the DrawEllipse method instead.

You'll need to use DrawEllipse if you want to draw a circle using GDI+.
An example is here: http://www.websupergoo.com/helpig6net/source/3-examples/9-drawgdi.htm

You should use DrawEllipse:
//
// Summary:
// Draws an ellipse defined by a bounding rectangle specified by coordinates
// for the upper-left corner of the rectangle, a height, and a width.
//
// Parameters:
// pen:
// System.Drawing.Pen that determines the color, width,
// and style of the ellipse.
//
// x:
// The x-coordinate of the upper-left corner of the bounding rectangle that
// defines the ellipse.
//
// y:
// The y-coordinate of the upper-left corner of the bounding rectangle that
// defines the ellipse.
//
// width:
// Width of the bounding rectangle that defines the ellipse.
//
// height:
// Height of the bounding rectangle that defines the ellipse.
//
// Exceptions:
// System.ArgumentNullException:
// pen is null.
public void DrawEllipse(Pen pen, int x, int y, int width, int height);

if you want to draw circle on button then this code might be use full.
else if you want to draw a circle on other control just change the name of control and also event. like here event button is called. if you want to draw this circle in group box call the Groupbox event.
regards
public Form1()
{
InitializeComponent();
}
private void Form1_Load(object sender, EventArgs e)
{
this.button1.Location = new Point(108, 12);
// this.Paint += new PaintEventHandler(Form1_Paint);
this.button1.Paint += new PaintEventHandler(button1_Paint);
}
void button1_Paint(object sender, PaintEventArgs e)
{
Graphics g = this.button1.CreateGraphics();
Pen pen = new Pen(Color.Red);
g.DrawEllipse(pen, 10, 10, 20, 20);
}
}

With this code you can easily draw a circle...
C# is great and easy my friend
public partial class Form1 : Form
{
public Form1()
{
InitializeComponent();
}
private void button1_Click(object sender, EventArgs e)
{
Graphics myGraphics = base.CreateGraphics();
Pen myPen = new Pen(Color.Red);
SolidBrush mySolidBrush = new SolidBrush(Color.Red);
myGraphics.DrawEllipse(myPen, 50, 50, 150, 150);
}
}

private void DrawEllipseRectangle(PaintEventArgs e)
{
Pen p = new Pen(Color.Black, 3);
Rectangle r = new Rectangle(100, 100, 100, 100);
e.Graphics.DrawEllipse(p, r);
}
private void Form1_Paint(object sender, PaintEventArgs e)
{
DrawEllipseRectangle(e);
}

PictureBox circle = new PictureBox();
circle.Paint += new PaintEventHandler(circle_Paint);
void circle_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawEllipse(Pens.Red, 0, 0, 30, 30);
}