I am working with the following code to draw graphics elements on a pictureBox in C#
gGraphics = Graphics.FromImage(bBitMap);
pictureBoxB.Image = bBitMap;
This is working fine. For example:
gGraphics.DrawLine(brownPen, pBegin, pEnd);
I would like to hover over or click with the mouse on say, this line and do something.
Question: Would like to know how with the x,y coordinates of the click I can see that I am near the line so that I can display some information about the line. Is there a list of all graphics objects I drew somewhere or do I build a list of the objects I drew and the locations they cover on the pictureBox? Thanks!
Related
I am trying to get following usecase implemented in Xamarin forms
(Using with SFImageEditor from syncfusion but can try if other options)
Display an image in editor.
Display an initial rectangle.
User resizes the rectangle to best fit and clicks "go".
Need to Capture the coordinates of this rectangle in reference to the image.
Send the image and rectangle coordinates for further processing.
Can someone pls provide guidance on step 4 for identifying the coordinates of the rectangle.
(X Y height width) or (coordinates of 4 corners). Either format is fine.
Appreciate your help.
code to set SFImageEditor in Xamarin.Forms with Syncfusion.
Xaml code
<imageeditor:SfImageEditor x:Name="present_image" >
<imageeditor:SfImageEditor.ToolbarSettings>
<imageeditor:ToolbarSettings IsVisible="True" />
</imageeditor:SfImageEditor.ToolbarSettings>
</imageeditor:SfImageEditor>
code behind
public ImgEditPage( )
{
InitializeComponent();
var origImage = ImageSource.FromUri(
new Uri("https://xxx.xx/xxxxxx.jpg")); ;
present_image.Source = origImage;
}
This will open up the image in an editor window, The editor allows to draw a rectangle object.
User can click the button to draw rectangle I want to get the coordinates of the rectangle drawn by user.
We would like to let you know that the you can get the coordinates of the rectangle added on an image by using the Bounds property. On selecting a shape, ItemSelected event will be triggered. From this, you will get settings of selected shape with Bounds property. The value of the Bounds will be in percentage, the value of the shape frame should fall between 0 and 100. For more information, please refer the below link.
https://www.syncfusion.com/kb/8880/how-to-show-dimension-of-shapes-while-resizing
https://help.syncfusion.com/xamarin/image-editor/shapes#pensettings
You can get the actual bounds of the image rendered in SfImageEditor control using the property ActualImageRenderedBounds.
You can get the original image size by using the property of OriginalImageSize.
I am working on an assignment right now and was asked to create an app to select an area on image with ability to magnify a part of the image around cursor.
Right now I stuck on the magnifier part. There is a Magnifier control in WPF, but how about UWP? Has anyone had any experience creating magnifier in UWP?
SO far I've found this, but UWP has different API's:
http://csharphelper.com/blog/2015/06/zoom-and-crop-a-picture-in-c/
My logic is:
1. Draw circle around the cursor and re-draw it every time the cursor moves.
2. Take a screenshot (render) specified area around it
3. Magnify the are
4. Fill the circle with the magnified image (Bitmap)
Any tips or suggestions would be much appreciated. Thank you
Draw circle around the cursor and re-draw it every time the cursor moves.
You could register the PointerMoved event for your panel(e.g, Canvas) and get current pointer by using the following method:
private void Canvas_PointerMoved(object sender, PointerRoutedEventArgs e)
{
var pointer = e.GetCurrentPoint(sender as UIElement);
}
And then, you could add a Ellipse on it and set its position by current pointer.
Take a screenshot (render) specified area around it
You could use RenderTargetBitmap class APIs to render specific area.
Magnify the are
You could resize the rendertargetbitmap. Check this thread How to Resize the RenderTargetBitmap.
Fill the circle with the magnified image (Bitmap)
After you get the final rendertargetbitmap, you could use it to make a ImageBrush, then you could specify this ImageBrush to the Ellipse's Fill property like the following:
ellipse.Fill = new ImageBrush() { ImageSource = renderTargetBitmap};
Similar to my previous question which I as yet have not solved (Comparing Frames of a live Feed) I have another issue.
Scenario
I have an image taken by a camera that contains a rectangle in it. I need to crop the image to only show the rectangle plus a small margin.
My Efforts
I have accomplished this by iterating through the pixels using LockBits and attempting to find potential edges but these seems terribly slow and inefficient
My Thoughts
I was thinking I could take an empty image as a baseline and then remove the differences between the two, however I cannot be sure that the lighting will be exactly the same and that potential contaminants such as an accidental fly getting into the image will not be present which could muck up this process.
Is there any easier way? The rectangle should (usually) be in the bottom left corner, but not always (long story) but this cant be relied upon.
My Environment
Visual Studio 2012 (2010 if neccessary is available)
Ueye camera
C#
The images are of type System.Drawing.Bitmap
The rectangle will often be something like a credit card or an ID card or anything of a similar size and shape
The empty image (background) looks like this:
Using EmguCV you can detect shapes such as a rectangle. Click here for the emgu code. Once you have detected the rectangle it is fairly easy to crop it out using a new Bitmap with the size of the rectangle.
The sample demonstrates how to crop the image from specific Picturebox control into destination Picturebox control using mouse selection or specified coordinates.
1.How to use mouse to select an area (rectangle) in a Picturebox control.
2.How to crop the image by the rectangle.
http://code.msdn.microsoft.com/windowsdesktop/CSWinFormCropImage-d4beb1fa
I am making a logical gates application and I can currently drag out bitmaps into the picturebox. These bitmaps are the logical gates. Now I need a way to draw the lines to connect inputs with gates. I would like to have the line sort of stick to connection or anchor points on the bitmap that I place but I have no idea how to do this.
Each bitmap dragged out is an object with a size and an x y position.
Thanks for any help! I have been searching for a solution for a while now.
I basically ended up making 10x10 rectangles positioned according to the height/width of the object that would update when the bitmap was moved. The bitmap was also its own rectangle.
The thing is I have some graphics shown in a form, rectangle for example, and I want to capture when the point gets over thees fields. So I Thoght I try to find the corrrdinates for thees rectangles, but as thay are the coords in the form it dose not match the ones with the mouse location.
So I wonder is there a way to find what coord on the screen a Point has on the screen and not in the form or controller?
Each control hs PointToFoo methods for conversion. Note that you should call this from the parent of the object who's location you want:
Point scrPos = this.PointToScreen(panel1.Location);
Alternatively, you can get the panel's screen coordinates with:
Point scrPos = panel1.PointToScreen(new Point(0,0));
Note that the above two examples could gve different result due to the border-size of the panel.
If you are using the graphics object for the form by calling this.CreateGraphics() within the form, then the coordinates used when you draw the rectangle should be exactly the same as those returned by the click event on the form.
Do you know what coordinates your pointer is in? You can get the coordinates for your window with a call to GetWindowRect() and subtract the top/left from your mouse cursor to get client coordinates.
I seem to remember there being a function to do that for you in fact, but it's been some time since I dabbled in custom GUI controls.