Scale x and y coordinates to Form/pictureBox location. C#

Question

My Form2 is in layman terms an external 'mini-map' off the actual 'mini-map' in-game.

As you can see on my Form2, my drawn red dot does not have the same location for my player when compared to the 'mini-map' in-game which is the yellow dot.

In the DebugView, you can see my characters X and Y location (charX & charY).

The coordinates are passed as int x & int y in a function to my Form2 class file.

The image in my pictureBox1 (which is the image in the current example picture above) is pulled from my server (url= "http://randomspam.co/MAP/103000000.img/miniMap.canvas.png").

Here is the following code with comments to my progress as of now.

Please take note that the pictureBox1 location is set to 0,0.

The errors are as follows;

1) The red dot location on my external mini-map != the location of my character in the mini-map in-game.

2) The red dot consistently flickers (appears & disappears)

3) The tooltip when shown on the pictureBox is really lagging in revealing and dis-revealing itself.

If anyone knows how to help out my current situation (as I am lost), please, anything is appreciated.

Thanks.

X and Y values are already normalized when you call CUpdate? — tweellt, Mar 11 '14 at 23:44
One thing that isn't simple to do but really improves performance is to use double buffering. If you search online I think you will find lots of sample code in C# for these sorts of things. I believe controls also have a flag for double buffering which might help. Hope this gives you some direction! — drew_w, Mar 11 '14 at 23:50
@tweellt, what do you mean normalized? It just passes it to another int. — Andrew, Mar 11 '14 at 23:53
@Andrew, I mean, are they already "converted" to the scale of the mini-map, something like PointToClient? — tweellt, Mar 11 '14 at 23:56
@tweellt, No, I do not know how to do the scaling. These are raw x&y coordinates of my character in-game (picture shows what I mean). — Andrew, Mar 11 '14 at 23:57
The dots not matching is really strange. Both images are the same size so no need for scalling. — γηράσκω δ' αεί πολλά διδασκόμε, Mar 12 '14 at 00:57

score 2 · Answer 1 · edited May 23 '17 at 12:21

2

Ok, lets split this in topics:

1) Red Dot Location:

Here you have to match red dot position to the new size, this was answered several times before, see this -> How can I transform XY coordinates and height/width on a scaled image to an original sized image?

2) Double Buffer to stop Flickering:

public void DrawWhatever(Graphics graphics, int cx, int cy)
{
    Graphics g;
    Bitmap buffer = null;
    buffer = new Bitmap([image width], [image height], graphics);
    g = Graphics.FromImage(buffer);
    g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.HighQuality;

    // Draw a circle.
    Pen p = new Pen(Color.Red,1)
    g.DrawEllipse(p,cx,cy,30,30); //example values

    graphics.DrawImage(buffer, 0, 0);
    g.Dispose();
}

3) Tooltip:

Check double buffer algorithm and let me know

edited May 23 '17 at 12:21

Community

1
1

answered Mar 12 '14 at 00:21

tweellt

2,171
20
28

Your result will be a black image with red dot. – γηράσκω δ' αεί πολλά διδασκόμε Mar 12 '14 at 01:01
for 'image width & height', what do you mean? What bitmap am I using? I assume pictureBox image? Also, how would I call this? – Andrew Mar 12 '14 at 01:04
@Andrew, width and height is the size of your image inside picture box (eg. 720 x 576) and you could call this method inside pictureBox1_Paint passing as argument e.Graphics – tweellt Mar 12 '14 at 01:20
@Andrew, maybe this way is better since you are drawing on top of another image – tweellt Mar 12 '14 at 01:22
what is e. supposed to be? – Andrew Mar 12 '14 at 01:27
@Andrew, yes, that is one of the options. Try that and let me know, other algorithms work also – tweellt Mar 12 '14 at 01:29
@Andrew, now it is ok. The base idea is to draw on a side buffer(bitmap) and hence is ready it will draw on the picturebox and it will not flicker – tweellt Mar 12 '14 at 01:41
(+1)It is obvious that you do understand how double buffer works but have a problem writing the code for it. – γηράσκω δ' αεί πολλά διδασκόμε Mar 12 '14 at 01:45
@valter, you're right, I would test it if I could, it would be easier, but I'm on a linux right now, without mono. Sorry about that – tweellt Mar 12 '14 at 01:47

γηράσκω δ' αεί πολλά διδασκόμε · Accepted Answer · 2014-03-12T02:46:58.217

1

Have a copy from the mini map:

Bitmap bmp = new Bitmap(pictureBox1.Width, pictureBox1.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb);
Bitmap bmpClone = new Bitmap(pictureBox1.Width, pictureBox1.Height, System.Drawing.Imaging.PixelFormat.Format32bppArgb);

Graphics objGraphics = Graphics.FromImage(bmpClone);
objGraphics.DrawImage(pictureBox1.Image, 0, 0);
objGraphics.Dispose();

bmp = (Bitmap)bmpClone.Clone();
pictureBox1.Image = bmp;

Now before any invalidation do:

Graphics objGraphics = Graphics.FromImage(bmp);
objGraphics.SmoothingMode = SmoothingMode.HighQuality;
objGraphics.DrawImage(bmpClone, 0, 0);
objGraphics.FillEllipse(Brushes.Red, cx, cy, 5, 5)
objGraphics.Dispose();

pictureBox1.Invalidate();

You dont need anything inside pictureBox1_Paint

valter

edited Mar 12 '14 at 02:46

answered Mar 12 '14 at 01:38

γηράσκω δ' αεί πολλά διδασκόμε

7,172
2
21
35

only problem I have is how would I set img? img is essientially pictureBox1.Image, and I am unable to convert it to bitmap. Or what is img? – Andrew Mar 12 '14 at 01:48
@Andrew Create a second bitmap e.g bmpClone and load your png image into that bitmap. Change also the format to `Format32bppArgb` – γηράσκω δ' αεί πολλά διδασκόμε Mar 12 '14 at 01:56
oh is bmpclone = bmp? – Andrew Mar 12 '14 at 02:04
If I do bmpClone = bmp (as bmp is my minimap image, which is from the pictureBox1), tooltip is not laggy anymore, however, there is no picture in the picturebox and the red dot is not drawn (it was for a second, then gone) – Andrew Mar 12 '14 at 02:10
@Andrew How did you set the png in the picturebox, in the first place? – γηράσκω δ' αεί πολλά διδασκόμε Mar 12 '14 at 02:13
it gets set in a separate thread which calls a function also in my form2, which does this; pictureBox1.ImageLocation = "http://randomspam.co/MAP/" + id.ToString() + ".img/miniMap.canvas.png"; I gave this example in the code posted in the thread. Would this be problematic to your code? – Andrew Mar 12 '14 at 02:19
CType function doesn't exist in C# :( – Andrew Mar 12 '14 at 02:42
@Andrew set a break point and check cx and cy values before drawing the ellipse. Then see if these values correspond to the correct location in picturebox. – γηράσκω δ' αεί πολλά διδασκόμε Mar 12 '14 at 03:08

Scale x and y coordinates to Form/pictureBox location. C#

2 Answers2

Linked