I created simple form and now I want to draw single objects (rectangle, circle, lines..) in relative coordinates.
Main problem for me here is to create 2D cartesian coordinate system in middle of the form.Is it possible and how to do it??
Main question is how to efficiently transform absolute coordinates to relative? How to create my own system so I get results in numbers (negative, positive depending on quadrant) and not in pixel?
.
Currently I made MouseMove event to display current location of mouse with Cursor.Position.X, Cursor.Position.Y and display it in label. Displayed coordinates are pixels, how to change that? I've read something about converting with PointToClient method but I don't really understand it.
I am tied to windows forms becouse I already made a program in win forms and now I just want to add this feature to it.
Thanks
What you're most likely looking for are Graphics.TranslateTransform and Graphics.ScaleTransform.
private void Transform(PaintEventArgs e)
{
e.Graphics.ScaleTransform(width, height);
e.Graphics.TranslateTransform(xOffset, yOffset);
}
You'll also need to make sure that whatever drawing method you're using has an overload for either PointF structures or Singles.
Of course, you could also just handle all of this on your end. Scaling your input/output coordinates by the width and height of the form and then translating by half of that will give you the same results.
Edit- To add some clarity, Windows always expects your coordinates to be in pixel form. You can use the above transformations to do your work at a different scale and then transform into the form that Windows expects.
Setting the translation should be straightforward. If you want the middle of the form, you simply want to translate by half the width and half the height. How you choose to scale your coordinates is going to depend on the range that you need to work in (ie, -1.0 to 1.0, -0.5 to 0.5, etc.).
Related
I have a map of a camping, this is it:
Now, on this map, there are a lot of camping places. And all of the places(yellow, pink and the striped yellow), need to be clickable.
So my question is, how would i achieve this? I was thinking about using SVG or something. Is this a good solution?
Basic idea: Create a color map to look up which spot the user has clicked.
To create that color map, start with the original map, overlay it with an empty bitmap and write a small tool application to help you:
it should let you paint a filled circle in a special color for each site spot
ideally those colors should allow you to re-construct the number and type of the places
upon each click the next color should be prepared
you don't need to match the place too exactly, but it is up to you to improve the colormap with a paint program; put the orginal map in a layer under it and use an eyedropper tool to get the right color and then draw the places a little better
as many of the places have consecutive numbers you can
count them up with each click
use an input box to set new starting numbers
For the actual application you should
hold the color map in memory
use the MouseClick of a PictureBox to get the coordinates of the place
multiply (or rather divide) those with the zoom factor
use GetPixel on the color map to get the color and then
extract the place number.
An ARGB color has 3 color bytes; two will suffice for the place numbers and you will still have one byte for the color coded types of places..
The zoom factor is 1f * PictureBox.clientSize.Width / PictureBox.Image.Width.
For best user experience I would use the PictureBox.MouseMove to look up the place in the color map and give feedback whenever the color changes, including setting and clearing the mouse cursor betwenn Hand and Default whenever the location is clickable, i.e. has a non-transparent color on the color map..
To avoid artifacts the color map must be stored asPNG , not as JPG!
If you want more info with the places you could (and should) create a Place class and hold a Dictionary<Color, Place> to look up Place by Color..
If you put the image in a PictureBox, say, you could use the MouseClick event.
I am working on project in ASP.NET WEB APPLICATION in which I am having problem with screen Resolution. Whenever I connect my project execution to different devices like from laptop to monitor or to Projector, the fields, labels, drop down lists and other are randomly displaced on the screen. I want to have same display look irrespective of the device on which the out put is being seen. I have seen so many ways but I couldn't find the one which suits my scenario.I want to adjust the out put to be displayed in same way when the resolution is changed that is like from 1024*768 to 1280*1024, etc. I want the out put to be spread across the entire screen in same manner irrespective of the resolution.In the project the resolution for all the controls is declared in measure of pixels not on percentage based.I don't want to change pixels into percentage that makes me to change every where in the project but by keeping them as pixels I want to adjust the resolution whenever it is changed so that the controls will be evenly displaced. Please help me with this.
Set up a displacefactor, that displaces "objects" on x, and y axis by a value calculated from the resolution. I'd check if the "object" is on the left or the right side of the screen (by getting the width of the screen and if its bigger than the half then displacefactor is poisitive, if not then its negative, and you displace the object on the x axis), you can do that with the height so you can displace them on the y axis. I can't be more specific because i can't program C# nor javascript, but i hope you understand what i'm trying to explain.
I'm working on an experimental project in which the challenge is to identify and extract an image of the icon or control that the user is has clicked on/touched. The method I'm trying is as follows (I need some help with step 3):
1) Take a screen shot when the user clicks/touches the screen:
2) Apply edge detection:
3) Extract the possible icon images around the Point associated with the user's cursor (Don't know how to do this)
There are easier cases in which the mouse-over event will highlight the icon/control, which allows me to identify the control with a simple screen shot comparison (before and after mouse-over). The above method is specifically for cases in which the icon is not highlighted. I'm new to emgu, so if anyone has any pointers on how to better achieve this, I'm all ears.
Cheers! Matt
Instead of doing edge detection. Consider taking the following steps:
Only grab pixels which are within a certain radius of the point of the user's cursor. Create a new image with just these pixels.
Use thresholding to classify into foreground and background.
Calculate the centroid, (use mean x coordinate and mean y coordinate). Calculate deviation from the mean. Discard foreground pixels which are beyond a certain deviation from the mean. Eg: discard pixels that are more than 1.6 deviations from the mean.
(You may need to experiment with this step ).
Use a convex hull to find the area of the image with the icon in it.
As part of my self-education of programming I decided to make a snake in C#. The problem I have is about the client size of the game form.
I want player to be able to scale the window of the game, which is divided into 25 x 25 grid (every coordinate is like "one pixel") - it means, that at any moment, the window is divided into 25 x 25 identical squares.
The problem I get is near this code:
int SquareSide = (ClientSize.Width / 25);
When I set the ClientSize strictly to for example 600 x 600, which is a multiple of 25, everything goes OK. But when I don't (for example by manual resizing, which can change the size to, for example, 711 x 711), it creates at the right side a 'strip', which seems to be the rest of pixels, which can't be used because we are dividing to integer number.
My question is - is there any not-extremely-hard way to achieve dividing ANY client size of form into 25 x 25 grid without this problem? I tried using double, but FillRectangle method doesn't accept it.
I hope my question is understandable and thank you for replies.
To tell you the truth, there is
g.FillRectangle(Brush b, RectangleF rect)
RectangleF is a rectangle whose coordinates are float.
So you can use:
float SquareSide = (ClientSize.Width * 1f / 25);
I would try to simply handle OnResize event of the window, and at the moment user finishes rezise it, force the size that program need for perfect fit of the grid.
So for example at the moment user releases mouse and you figure out that one dimensions of the window 711x711, bring it to nearest correct fit 700x700.
In this way you guarantee good user experience on different monitor resolutions and for you guarantee a correct fit of the grid you draw.
Hope this helps.
Switch to float coordinates for everything. Make sure your game looks OK when lines do not have whole pixel coordinates. Make sure you "find next cell" code also works with floats, including mouse position detection if needed.
The other approach is to be happy with integer coordinates (and cells of the same size) and make page layout flexible to accomodate some unused space for odd 711x711 layouts (i.e. just center the field and keep some variable width border).
I'm diving into something without sufficient background, but I feel like there may be simple solutions that don't require me to have in depth knowledge of the topic.
What I am trying to do is have an image co-ordinate system. Basically the user will supply an image, like a house plan. They can then click on points in the image and create markers (like google maps). The next time they retrieve the map, all the markers they added before are there and they can add new ones.
I need to identify the points these markers are located on so I can store that information. I also need to be able to create a layer on the image that contains the markers and renders them in the exact locations they were placed.
I imagine the easiest way to do this is to use pixel co-ordinates...the rub here is that the image won't be a fixed size since there is a web application and an IPad application, so the co-ordinate system needs to work as long as the image is in the same size ratio.
The server size is .NET and as mentioned there is an IPad app, so the solution needs to be viable given that tech stack.
Any ideas?
Instead of using pixel coordinates in absolute terms, you can use the 0 to 1 range. The top left corner is (0,0), bottom right is (1,1) and the center of the image is (0.5,0.5). This way not matter what image size (or zoom level) you have, the markers will always be in the same place.
My suggestion is don't try to figure out the correlation between the actual image and the coordinates. The only thing I would do is use the resolution of the image, aka 800x600 and use that for your grid. Then overlay your markers using that grid on the image. The points you'd remember would just be X and Y values and maybe a tag name/id.