locked
Picture Distortion When Drawing to Object.Graphics (VS 2008) RRS feed

  • Question

  • I am trying to render images on a VB PictureBox, but when I do, no matter if I use Graphics.DrawImage or grab each pixel of the source and perform multiple FillRect's the image shows 25% larger than the original image. If I attempt to scale the destination down to the original size (multiplying the dimensions by .8) it still appears at the larger size. I have tried setting the Graphics properties: CompositingMode, CompositingQuality, InterpolationMode, PixelOffsetMode, and SmoothingMode and nothing seems to help.
    • Moved by 宝宝徐 Thursday, October 19, 2017 2:35 AM
    Wednesday, October 18, 2017 7:21 PM

Answers


  •  Did you notice that your 10x10 image is actually 13x13 and your 100x100 image is 125x125? And both have the distortions I was talkingn about.

    I had a hunch you might say that.

    When I copy my 10x 10 original I posted above from the web page to windows paint it says it is 10x10 and the enlargement is 100 x 100.

    So what make you think they are a different size. How do you get the size.

    What is your monitor resolution in control panel appearance and what is the display dpi setting ie 100 percent, 150 percent?

    I also suspected antialiasing as Acamar shows but I don't see it in your code.

    • Marked as answer by PeterC28 Friday, October 20, 2017 6:22 PM
    Friday, October 20, 2017 11:40 AM

All replies

  • Oops, forgot to add the images.

    What I am trying to draw (pixel resized x10):What I am trying to draw (pixel resized x 10)

    What I get (pixel resized x10):

    Wednesday, October 18, 2017 10:46 PM
  • Hi PeterC28,

    Welcome to MSDN forum.

    I will move the thread to VB forum for professional support, If you have problem about visual studio IDE, please feel free to let me know.

    Best regards,

    Joyce


    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, October 19, 2017 2:19 AM
  • I am trying to render images on a VB PictureBox, but when I do, no matter if I use Graphics.DrawImage or grab each pixel of the source and perform multiple FillRect's the image shows 25% larger than the original image.

    You haven't indicate what the source of the image is, or how you have measured the size.   Show the code you are using to draw from the source into the picturebox, and explain how you have established that the size has changed.

    Thursday, October 19, 2017 2:40 AM
  • Hi PeterC28,

    Based on your description, you want to draw one image into picturebox. If you want to the image size same as the original image, you may need to get the width and height of original image , then you need to draw image by these size.

    like the following code:

      Dim newImage As Image = Image.FromFile("D:\Picture\6.png")
            Dim width As Integer = newImage.Width
            Dim height As Integer = newImage.Height
            Dim g As Graphics = Me.PictureBox1.CreateGraphics
            g.DrawImage(newImage, New Rectangle(10, 10, width, height))

    Best Regards,

    Cherry


    MSDN Community Support
    Please remember to click "Mark as Answer" the responses that resolved your issue, and to click "Unmark as Answer" if not. This can be beneficial to other community members reading this thread. If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

    Thursday, October 19, 2017 6:40 AM
  • I am trying to render images on a VB PictureBox, but when I do, no matter if I use Graphics.DrawImage or grab each pixel of the source and perform multiple FillRect's the image shows 25% larger than the original image.

    You haven't indicate what the source of the image is, or how you have measured the size.   Show the code you are using to draw from the source into the picturebox, and explain how you have established that the size has changed.

    It doesn't seem to matter. I have tried a bitmap created by the program I was trying to create and also a png created in Corel's Paintshop Pro. The original size was retrieved from the bitmap itself. The final size is measured from a screenshot of the picturebox, where the difference between the original and final was about 25% of the original size.

    Thursday, October 19, 2017 9:19 PM
  • It doesn't seem to matter. I have tried a bitmap created by the program I was trying to create and also a png created in Corel's Paintshop Pro. The original size was retrieved from the bitmap itself. The final size is measured from a screenshot of the picturebox, where the difference between the original and final was about 25% of the original size.

    What is the code that you are using to draw the image in the picturebox?   In particular, how are you setting the size of the drawn image?

    If by 'size' you mean the physical dimension of the image on the display then you need to consider the display properties as part of the drawing calculations.   Your description is not clear because a bitmap does not have a physical size.

    Thursday, October 19, 2017 9:26 PM
  • I have done this. and even other methods, such as the following, creates a 25% larger image with anti-aliasing.

    Public Sub PaintImage(ByRef Graphics As Drawing.Graphics, ByVal nZoomLevel As Int16)
            Dim nFrame As Int16 = 0
            Dim nX, nY As Int16
            Dim oBrush As SolidBrush
            Dim nZ As Int16 = nZoomLevel / 100 'nZoomLevel = 100
    
            Dim oBM As Bitmap
            oBM = Bitmap.FromFile("C:\Users\...\Desktop\Draw Test 2-1.png") ' a 10 x 10 pixel copy of the enlarged image in my second post.
    
            With m_aySubFiles(m_nSubFileIndex)
                For nY = 0 To oBM.Height - 1
                    For nX = 0 To oBM.Width - 1
                        oBrush = New SolidBrush(oBM.GetPixel(nX, nY))
                        Graphics.FillRectangle(oBrush, nX * nZ, nY * nZ, nZ, nZ)
                    Next
                Next
            End With
        End Sub

    Thursday, October 19, 2017 9:28 PM
  •  Resizing any standard image type is going to make it distorted to some point.  Not a whole lot you can do about that.  It will do the same thing in MS Paint,  your vb.net app,  or any other image editing software.

    If you say it can`t be done then i`ll try it

    Thursday, October 19, 2017 10:22 PM
  • I have done this. and even other methods, such as the following, creates a 25% larger image with anti-aliasing.

    Where does the 25% larger figure come from?   What measure is 125% of what other measure?

    Thursday, October 19, 2017 10:34 PM
  • I have done this. and even other methods, such as the following, creates a 25% larger image with anti-aliasing.

    Public Sub PaintImage(ByRef Graphics As Drawing.Graphics, ByVal nZoomLevel As Int16)
            Dim nFrame As Int16 = 0
            Dim nX, nY As Int16
            Dim oBrush As SolidBrush
            Dim nZ As Int16 = nZoomLevel / 100 'nZoomLevel = 100
    
            Dim oBM As Bitmap
            oBM = Bitmap.FromFile("C:\Users\...\Desktop\Draw Test 2-1.png") ' a 10 x 10 pixel copy of the enlarged image in my second post.
    
            With m_aySubFiles(m_nSubFileIndex)
                For nY = 0 To oBM.Height - 1
                    For nX = 0 To oBM.Width - 1
                        oBrush = New SolidBrush(oBM.GetPixel(nX, nY))
                        Graphics.FillRectangle(oBrush, nX * nZ, nY * nZ, nZ, nZ)
                    Next
                Next
            End With
        End Sub

    I modified your code so it will run with option strict on and I seem to get a good result. What do you get running this example?

    original 10x10

    copy with my code and zoom = 10

    the bitmap is 100 x100

    What do you get?

    Option Strict On
    
    Public Class Form3
    
        Public Sub PaintImage(ByRef Graphics As Drawing.Graphics, ByVal nZoomLevel As Int16)
            'Dim nFrame As Integer
            Dim nX, nY As Integer
            Dim oBrush As SolidBrush
            Dim nZ As Integer = 10   
    
            Dim oBM As Bitmap
            oBM = CType(Bitmap.FromFile("C:\bitmaps\smile1.png"), Bitmap) ' a 10 x 10 pixel copy of the enlarged image in my second post.
    
            'With m_aySubFiles(m_nSubFileIndex)
            For nY = 0 To oBM.Height - 1
                For nX = 0 To oBM.Width - 1
                    oBrush = New SolidBrush(oBM.GetPixel(nX, nY))
                    Graphics.FillRectangle(oBrush, nX * nZ, nY * nZ, nZ, nZ)
                Next
            Next
            'End With
        End Sub
    
        Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint
            e.Graphics.Clear(Color.Black)
            PaintImage(e.Graphics, 1)
    
        End Sub
    End Class

    Thursday, October 19, 2017 10:34 PM
  • If you have an image 10×10 and want to draw it at (5,5) scaled to 100×100 without effects, then try this too:

    g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor
    g.PixelOffsetMode = System.Drawing.Drawing2D.PixelOffsetMode.HighQuality
    g.DrawImage( img, 5, 5, 100, 100 )

    where g is Graphics.


    • Edited by Viorel_MVP Friday, October 20, 2017 5:40 AM
    Friday, October 20, 2017 5:39 AM
  • I wasn't trying to resize the image. If I started with a 10x10 pixel image and tried drawing it as a 10x110 pixel image on the picturebox, I would get a 13x13 distorted image.
    Friday, October 20, 2017 5:49 AM
  • I have done this. and even other methods, such as the following, creates a 25% larger image with anti-aliasing.

    Public Sub PaintImage(ByRef Graphics As Drawing.Graphics, ByVal nZoomLevel As Int16)
            Dim nFrame As Int16 = 0
            Dim nX, nY As Int16
            Dim oBrush As SolidBrush
            Dim nZ As Int16 = nZoomLevel / 100 'nZoomLevel = 100
    
            Dim oBM As Bitmap
            oBM = Bitmap.FromFile("C:\Users\...\Desktop\Draw Test 2-1.png") ' a 10 x 10 pixel copy of the enlarged image in my second post.
    
            With m_aySubFiles(m_nSubFileIndex)
                For nY = 0 To oBM.Height - 1
                    For nX = 0 To oBM.Width - 1
                        oBrush = New SolidBrush(oBM.GetPixel(nX, nY))
                        Graphics.FillRectangle(oBrush, nX * nZ, nY * nZ, nZ, nZ)
                    Next
                Next
            End With
        End Sub

    I modified your code so it will run with option strict on and I seem to get a good result. What do you get running this example?

    original 10x10

    copy with my code and zoom = 10

    the bitmap is 100 x100

    What do you get?

    Option Strict On
    
    Public Class Form3
    
        Public Sub PaintImage(ByRef Graphics As Drawing.Graphics, ByVal nZoomLevel As Int16)
            'Dim nFrame As Integer
            Dim nX, nY As Integer
            Dim oBrush As SolidBrush
            Dim nZ As Integer = 10   
    
            Dim oBM As Bitmap
            oBM = CType(Bitmap.FromFile("C:\bitmaps\smile1.png"), Bitmap) ' a 10 x 10 pixel copy of the enlarged image in my second post.
    
            'With m_aySubFiles(m_nSubFileIndex)
            For nY = 0 To oBM.Height - 1
                For nX = 0 To oBM.Width - 1
                    oBrush = New SolidBrush(oBM.GetPixel(nX, nY))
                    Graphics.FillRectangle(oBrush, nX * nZ, nY * nZ, nZ, nZ)
                Next
            Next
            'End With
        End Sub
    
        Private Sub PictureBox1_Paint(sender As Object, e As PaintEventArgs) Handles PictureBox1.Paint
            e.Graphics.Clear(Color.Black)
            PaintImage(e.Graphics, 1)
    
        End Sub
    End Class

     Did you notice that your 10x10 image is actually 13x13 and your 100x100 image is 125x125? And both have the distortions I was talkingn about.
    Friday, October 20, 2017 6:04 AM
  • Just for the heck of it, I tried setting the background image of the Picturebox to the image I had been using to test the drawing process of VS 2008, and even that is distorted on the form design screen. I would appear that no amount of work will fix this problem.
    Friday, October 20, 2017 6:35 AM
  • I wasn't trying to resize the image. If I started with a 10x10 pixel image and tried drawing it as a 10x110 pixel image on the picturebox, I would get a 13x13 distorted image.
    I don't think you are talking about image size at all.   I think you are saying that when you draw an image to the picturebox it is being drawn with anti-aliasing turned on, resulting in pixels adjacent to the image being colored differently than the background.  The solution, of course is to turn anti-aliasing off.
    Friday, October 20, 2017 7:05 AM

  •  Did you notice that your 10x10 image is actually 13x13 and your 100x100 image is 125x125? And both have the distortions I was talkingn about.

    I had a hunch you might say that.

    When I copy my 10x 10 original I posted above from the web page to windows paint it says it is 10x10 and the enlargement is 100 x 100.

    So what make you think they are a different size. How do you get the size.

    What is your monitor resolution in control panel appearance and what is the display dpi setting ie 100 percent, 150 percent?

    I also suspected antialiasing as Acamar shows but I don't see it in your code.

    • Marked as answer by PeterC28 Friday, October 20, 2017 6:22 PM
    Friday, October 20, 2017 11:40 AM

  •  Did you notice that your 10x10 image is actually 13x13 and your 100x100 image is 125x125? And both have the distortions I was talkingn about.

    I had a hunch you might say that.

    When I copy my 10x 10 original I posted above from the web page to windows paint it says it is 10x10 and the enlargement is 100 x 100.

    So what make you think they are a different size. How do you get the size.

    What is your monitor resolution in control panel appearance and what is the display dpi setting ie 100 percent, 150 percent?

    I also suspected antialiasing as Acamar shows but I don't see it in your code.


    You have come to the root of my problem. It was the screenshots that were distorted due to the Scale and Layout setting. 125% (Recommended). Thanks so much for your assistance.

    • Edited by PeterC28 Friday, October 20, 2017 6:31 PM
    Friday, October 20, 2017 6:25 PM