enlarge / shrink PictureBox but maintain pixel ratio c#

Question

I could not find a better title. So this is what I want to do:

I have a picturebox that is 28x28 pixels

I am working on a AI project and my idea is to make an OCR for numbers,

I found training data but all the images are 28x28 pixels, so my ideea is to make a picturebox that size,

draw on it and feed that info to the neural network.

My problem is graphicly for the moment:

How do I make a 28x28 picturebox and somehow enlarge it but maintain the pixel count. I put the picturebox into a panel and I want the picturebox to fill the panel.

My idea would be to somehow scale it up and after drawing on it scale it back down, but how can I accomplish this?

mathematically how can this be done?

And what would be the best way to draw on that picturebox (line, fillelipse , etc) so the data could be feed into the NN (after normalizing it ofc).

So you want to make a 28x28 pixel image larger and still have it crisp and looking awesome? — TheGeneral, Nov 24 '18 at 07:12
No , maybe I wrote wrong , I wanna have 28x 28 pixels at the end so 784 pixels that i can normalize and insert into my NN , but a 28x28 picturebox is to small visually to draw on so I want to enlarge it so the user can draw on it , and somehow scale it back to 28x28 so I will have usable data for my NN. — random_numbers, Nov 24 '18 at 07:17
Set the pbox to Zoom and draw onto its surface, collecting the drawing data to use first in the paint event, as usual. Then, when finished, combine them by drawing with a graphics object, related to the image and scaled in the inverse ratio as the zoom was.. - Note that the zoomed image will not look crisp. If you want it to be crisp you need to create a new, scaled up version of image and use it in the pbox.Image. For the final output use the original and the drawing data.. — TaW, Nov 24 '18 at 08:20
Set the picturebox sizemode to stretch any size you set the picturebox image to,, the image automatically takes that size. — preciousbetine, Nov 24 '18 at 08:38
Do you know how to draw? You can use mouse events to place shapes or draw free-hand lines. the trick is to know which ways you want and then create a suitable draw-action class to store the data needed to do it.. — TaW, Nov 24 '18 at 08:41

random_numbers · Accepted Answer · 2018-11-24T09:37:20.527

I figured out a solution , maybe it will help someone in the future:

        List<KeyValuePair<int, int>> coordonateList = new List<KeyValuePair<int, int>>();
        // drawPictureBox size is 280 x 280  (28 * 10, 28 * 10)



        private void pbImage_MouseDown(object sender, MouseEventArgs e)
        {
            mouseDown = true;

        }

        private void drawPictureBox_MouseMove(object sender, MouseEventArgs e)
        {
            if (mouseDown)
            {
                Point point = drawPictureBox.PointToClient(Cursor.Position);
                DrawPoint((point.X), (point.Y));
            }
        }

        private void drawPictureBox_MouseUp(object sender, MouseEventArgs e)
        {
            mouseDown = false;
        }

        public void DrawPoint(int x, int y)
        {

            using (Graphics g = Graphics.FromImage(bitmap))
            {
                SolidBrush brush = new SolidBrush(Color.White);
                g.FillRectangle(brush, x, y, 10, 10);
                coordonateList.Add(new KeyValuePair<int,int>(x/10,y/10));
            }
            drawPictureBox.Image = bitmap;
        }
        private void zoomImage(Bitmap bitmap)
        {
            var result = new Bitmap(28,28);
            using (Graphics g1 = Graphics.FromImage(result))
            {
                SolidBrush brush = new SolidBrush(Color.White);

                foreach (var item in coordonateList)
                {
                    g1.FillRectangle(brush, item.Key, item.Value, 1, 1);
                }
            pictureBox1.Image = result;

        }

enlarge / shrink PictureBox but maintain pixel ratio c#

1 Answers1