We Keep Coding

WinForms create transparent clearable pictureBox overlays

I want to create 2 transparent overlays for pictureBox in WinFrom application so I can separately draw on both and I can also clear it when I want to blank transparent overlay.
On one overlay I draw rectangles. I want these rectangles there all time.
On second overlay I draw circles but I just want to draw 1 circle and after user input clear this circle and draw another.
For now I'm using
var transparentOverlay = pictureBox.createGraphics();
But I don't know how to clear an overlay to blank transparent graphics.
I tried
transparentOverlay.Clear(Color.Transparent) which turned all overlay to black
pictureBox.Invalidate() which cleared all graphics from both overlays so my rectangles remain where they were
use some backup graphics which I created before any drawing and clear my overlay by assigning this graphics to it transparentOverlay = transparentOverlayBackup but this did nothing, all rectangles and all circles remain at their places
Is there a way to create clearable transparent graphics sticked to pictureBox?
EDIT:
I have a picture with text in that picture box. And what I want to do is to draw rectangles around words of the text and this rectangles should remain all the time over the picture.
Than I want to draw a single circle and wait for user to click on a screen. This is all ok but when user click on a screen, I want to clear that circle and draw another.
//this method I call by click on a button to start annotation
private void ExpertAnnotate(object sender, EventArgs e)
{
var pen = new Pen(Color.Black, 1);
if (!annotationIsRunning) //check if annotation is in process or not
{
annotationIsRunning = true;
annotationOverlay = pictureBox.CreateGraphics(); //create transparent overlay for drawing
//draw rectangles around all words in text (AOIs)
annotationAOIs.ForEach(a =>
{
annotationOverlay.DrawRectangle(pen, a.Start.X, a.Start.Y, (a.End.X - a.Start.X), (a.End.Y - a.Start.Y));
});
//subscribe mouseMove and mouseClick events on pictureBox
pictureBox.MouseMove += HighlightAOI;
pictureBox.MouseClick += SelectAOI;
}
//define brushes for drawing circles (fixations)
var brush = new SolidBrush(Color.FromArgb(128, Color.BlueViolet));
var dotBrush = new SolidBrush(Color.DarkBlue);
pen.Color = Color.Blue;
long sizeOfFixation;
var f = Fixations[fixationCounter - 1]; //get current fixation to draw
sizeOfFixation = (int)f.Length / FIX_SIZE_COEFICIENT; //compute size of circle
annotationOverlay.FillEllipse(dotBrush, f.PosX - 1, f.PosY - 1, 3, 3);
//draw fixation on overlay
annotationOverlay.FillEllipse(brush, (f.PosX - sizeOfFixation), (f.PosY - sizeOfFixation), sizeOfFixation * 2, sizeOfFixation * 2);
}
//eventHandler for mouseMove - this method color rectangle over which mouse hover to red border
private void HighlightAOI(object sender, EventArgs e)
{
//this just draw last highlighted rect to black when we not yet hover mouse above it
if (lastHighlightedAOI != null)
{
annotationOverlay.DrawRectangle(new Pen(Color.Black, 1), lastHighlightedAOI.Start.X, lastHighlightedAOI.Start.Y, (lastHighlightedAOI.End.X - lastHighlightedAOI.Start.X), (lastHighlightedAOI.End.Y - lastHighlightedAOI.Start.Y));
}
//get position of mouse sursor
var x = pictureBox.PointToClient(Cursor.Position).X;
var y = pictureBox.PointToClient(Cursor.Position).Y;
var tempFix = new Fixation() { PosX = x, PosY = y };
//get rectangle over which mouse hover
lastHighlightedAOI = tempFix.LiesIn(annotationAOIs).FirstOrDefault();
if (lastHighlightedAOI != null)
{
//highlight rectangle by painting red border
annotationOverlay.DrawRectangle(new Pen(Color.Red, 1), lastHighlightedAOI.Start.X, lastHighlightedAOI.Start.Y, (lastHighlightedAOI.End.X - lastHighlightedAOI.Start.X), (lastHighlightedAOI.End.Y - lastHighlightedAOI.Start.Y));
}
}
//eventHandler for mouse click
private void SelectAOI(object sender, EventArgs e)
{
//get position of cursor
var x = MousePosition.X;
var y = MousePosition.Y;
var tempFix = new Fixation() { PosX = x, PosY = y };
//get rectangle which we selected by a mouse click
var aoi = tempFix.LiesIn(annotationAOIs).FirstOrDefault();
//assign last shown fixation to selected rectangle
if (aoi != null)
{
aoi.AssignedFixations.Add(Fixations[fixationCounter - 1]);
}
//if it wasn't last fixation again call ExpertAnnotation function to draw another Fixation over image (!!! here I need to clear last drawn fixation (circle) disappear and draw next fixation in ExpertAnnotate method)
if (fixationCounter != Fixations.Count)
{
ExpertAnnotate(sender, e);
}
else
{
TerminateExpertAnnotation("regular");
}
}

Thanks to #Reza Aghaei who guided me in chat to solution.
For me acceptable solution was in building multilayer image and assigning it to pictureBox.Image attribute.
I built image by loading image from file:
Image im = new Bitmap(path); // loads image from file
Then create graphics from this image:
var g = Graphics.FromImage(im); // creates graphics from loaded image
Draw all needed rectangles to this image and backup this image to some global Image instance:
var pen = new Pen(Color.Black, 1);
// draws all rectangles on the image
annotationAOIs.ForEach(a =>
{
g.DrawRectangle(pen, a.Start.X, a.Start.Y, (a.End.X - a.Start.X), (a.End.Y - a.Start.Y));
});
g.Dispose(); // disposes used graphics
ImageBackup = new Bitmap(im); // backup image with rectangles
In above part I created a static part of an image, which will not change and I backed it up so next time I will just create new Image instance from backup without any rectangle drawing.
Then when I want to show up new circle over this image I just:
var image = new Bitmap(ImageBackup); // creates new instance of image with rectangles from backup
var g = Graphics.FromImage(image); // creates graphics from image
// in this part draw circle at specific point
var f = Fixations[fixationIndex];
sizeOfFixation = (int)f.Length / FIX_SIZE_COEFICIENT;
g.FillEllipse(dotBrush, f.PosX - 1, f.PosY - 1, 3, 3);
g.FillEllipse(brush, (f.PosX - sizeOfFixation), (f.PosY - sizeOfFixation), sizeOfFixation * 2, sizeOfFixation * 2);
pictureBox.Image.Dispose(); // dispose old pictureBox image
pictureBox.Image = image; // set new image
imageOverlay = pictureBox.CreateGraphics(); // get transparent graphics overlay for pictureBox so we can draw anything else over picture (in my case highlighting rectangles over which I hover a mouse)
g.Dispose(); // dispose used graphics

Your best approach would be to use the OnPaint event handler for the PictureBox control and place all your drawing calls in there.
You can use the Graphics object passed to the event handler to get the surface you want to draw on (i.e. the Picture box) and then use the various methods to draw the shapes that you are after.
To draw a 'transparent' shape simply draw an outline rather than a filled shape.

C# WPF -> How to get the coordinates from a stretched(uniform) polygon on a grid

I searched a lot to find a solution for my problem. Couldn't find anything.
This is what I do:
I render a polygon via point array on a grid. The polygon autoresizing itself to match the grids size(uniform). I get the new stretched coordinates with the following lines and create the ellipses with a method:
var transform = myPolygon.RenderedGeometry.Transform;
foreach (var point in myPolygon.Points)
{
var transformedPoint = transform.Transform(point);
CreateEllipse(5, 5, Convert.ToDouble(Convert.ToString(transformedPoint).Split(';')[0]), Convert.ToDouble(Convert.ToString(transformedPoint).Split(';')[1]), gridPoly);
}
Ellipse CreateEllipse(double width, double height, double desiredCenterX, double desiredCenterY, Grid grid)
{
Ellipse ellipse = new Ellipse { Width = width, Height = height };
double left = desiredCenterX - (width / 2);
double top = desiredCenterY - (height / 2);
ellipse.Stroke = System.Windows.Media.Brushes.Black;
ellipse.Fill = System.Windows.Media.Brushes.DarkBlue;
ellipse.Margin = new Thickness(left, top, 0, 0);
grid.Children.Add(ellipse);
return ellipse;
}
The problem is, if I put the polygon on a grid and the ellipses afterwards, they will render exact the half size and not at the correct position, not even relative. Same happens if I set stretch to 'none'.
If I render my polygon and ellipses on a canvas, they render exact on each polygon point and everything is perfect. Beside, canvas doesn't support stretch.Uniform. And I need to dynamically fit the polygon into its parent object.
My question is, how do I render ellipses on an auto resizing polygon using the point positiondata?

You have to take two more things into account.
First, the Grid may align (i.e. move) the whole stretched Polygon according to its HorizontalAlignment and VerticalAlignment properties. If you don't want to calculate that by yourself, you could get an appropriate GeneralTransform object by myPolygon.TransformToAncestor(grid):
var polygonGeometryTransform = myPolygon.RenderedGeometry.Transform;
var polygonToGridTransform = myPolygon.TransformToAncestor(gridPoly);
foreach (var point in myPolygon.Points)
{
var transformedPoint = polygonToGridTransform.Transform(
polygonGeometryTransform.Transform(point));
CreateEllipse(5, 5, transformedPoint.X, transformedPoint.Y, gridPoly);
}
Second, when you do an absolute positioning of the Ellipses relative to the upper left corner of the Grid, you would have to set their HorizontalAlignment to Left and the VerticalAlignment to Top:
ellipse.HorizontalAlignment = HorizontalAlignment.Left;
ellipse.VerticalAlignment = VerticalAlignment.Top;
grid.Children.Add(ellipse);
That said, you wouldn't typically set an element's Margin for absolute positioning. It would be much cleaner to use a separate Canvas for the Ellipses and set their Canvas.Left and Canvas.Top properties.

How to convert my Graphics.Drawline drawing on panel, to saved image?

I have a panel called "canvas". It is transparent. So the background is from the form image, which is dark blue. This shows in the panel or canvas.
When I save the canvas to image, it saves the background, but not what I have drawn thereon, my drawline pen is yellow. And I can see it drawing on the panel. But when I save it... there are not yellow lines in the image.
What am I missing? Where are my yellow lines?
I am running this with my timer tick... to get the view to update.
This tracks the position of a CNC type machine. Gives a visual of where
the machine is in relation to Zero.
My ultimate goal, is to have a "viewport" that is zoomable, thus getting it
into a image, for easy resizing, and displaying in a pictureBox, which will
handle the stretched image and center it automatically?
I have read some complex solutions, but I am after the simple ones.
Any help would be appreciated. Sincerely,
private void VMoveNow()//Draw on panel called "canvas".
{
double a = GV.MYa * -1; //Change Direction of Y Drawing.
xc = Convert.ToInt32(GV.MXa) + (canvas.Width / 2);
yc = Convert.ToInt32(a) + (canvas.Height / 2);
g = canvas.CreateGraphics();
g.DrawLine(p, x, y, xc, yc);
x = xc;
y = yc;
g.Dispose();
}
private void SaveBMP()
{
try
{
Bitmap mybmp = new Bitmap(canvas.Width, canvas.Height);
canvas.DrawToBitmap(mybmp, canvas.Bounds);
mybmp.Save("C:\\myimage.bmp");
}
catch
{
return;
}
}

Thanks for looking.
I answered my own problem, after several attempts... I have figured out that I can scale my var's used for this drawings... and the size of the Drawline will be scale as a result.
So I now have scaling of the Drawline drawing, in a panel, with no picture or picture box needed. Does what I wished.
Setting the Pen width to -1 takes care of it resizing.

draw polygon click area

Drawing a polygon according to the input coordinates
i got some code from here, i just take..
void pictureBox1_Paint(object sender, PaintEventArgs e) {
e.Graphics.SmoothingMode = SmoothingMode.AntiAlias;
List<Point> polyPoints = new List<Point>();
polyPoints.Add(new Point(30, 30));
polyPoints.Add(new Point(36, 105));
polyPoints.Add(new Point(66, 105));
polyPoints.Add(new Point(72, 66));
using (SolidBrush br = new SolidBrush(Color.FromArgb(100, Color.Yellow)))
{
e.Graphics.FillPolygon(br, polyPoints.ToArray());
}
e.Graphics.DrawPolygon(Pens.DarkBlue, polyPoints.ToArray());
}
note : SmoothingMode use header using System.Drawing.Drawing2D
then i got problem about click area, i just want the click area at the visible area, in this case the picturebox1 have size 1366 x 768
this is example of picturebox, i want the red area be clickable and the gray is not clickable area
by default all area in the box is clickable

Have you looked at the Documentation on PictureBox?
I'm looking at it and it seems there's many ways of resizing aspects of the PixtureBox object. Take a look at using the DefaultSize Property or setting the Size property. In either case, you have to wrap the size in a Size object and set the according PictureBox size property.
Such as:
pictureBox1.Size = new Size(xSize, ySize);
or
pictureBox1.DefaultSize = new Size(xSize, ySize);

How to move an image control to a specific X,Y co-ordinate?

How can I move an image automatically to a specific X,Y position where I touch on the screen? I have tried using GeneralTransform but this is not working. What kind of class should I use for moving an image in Windows Phone 8?
This is my code:
Image img = new Image();
img.Source = new BitmapImage(new Uri("2.png",UriKind.RelativeOrAbsolute));
img.MaxHeight=10;
img.MaxWidth = 10;
LayoutRoot.Children.Add(img);
GeneralTransform temp = LayoutRoot.TransformToVisual(img);
new Size(img.ActualHeight,img.ActualWidth);
TouchPoint primaryTouchPoint = args.GetPrimaryTouchPoint(null);
Point pt = primaryTouchPoint.Position;
if (primaryTouchPoint.Action == TouchAction.Up)
{
Point point = temp.Transform(pt);
}`

It's unclear what the LayoutRoot is.
If it's a Grid, then you can simply set the left and top margin when you know where the user tapped.
img.Margin = new Thickness(pt.X, pt.Y, 0, 0);
If you're using canvas, you can set the Left and Top properties of canvas
Canvas.SetLeft(img, pt.X);
Canvas.SetTop(img, pt.Y);

if your panel is canvas you can move image by setting: Canvas.Left & Canvas.Top with your image and touch point