Results 1 to 9 of 9

Thread: [RESOLVED] Front Image not properly displayed in Zoom Picture box

  1. #1

    Thread Starter
    Member
    Join Date
    Aug 2024
    Posts
    42

    Resolved [RESOLVED] Front Image not properly displayed in Zoom Picture box

    Hello

    I fail to understand when Adding Image in Front or Top in btnGetFrontImg_Click Event. The Image does not load with perfect size.
    It displays/loads as Zoomed image with one corner of the Image . Made two trials as displayed below
    Any ideas how the full image, ie. the image loaded in Front, can be viewed in ZoomPictureBox ?
    Code:
        Private Sub btnGetImgFile_Click(sender As Object, e As EventArgs) Handles btnGetImgFile.Click
           ' _BaseImage = GetImage(PictureBox1.Image, EmptyBitmapSize, "Select base image")
           ' PictureBox1.Image = _BaseImage
           ' ZoomPictureBox1.Bounds = PictureBox1.ClientRectangle
    
            Dim img1 = New Bitmap(imgBGpath)
            ZoomPictureBox1.Image = img1
        End Sub
    
    
    Private Sub btnGetFrontImg_Click(sender As Object, e As EventArgs) Handles btnGetFrontImg.Click
            '_AddImage = GetImage(ZoomPictureBox1.Image, EmptyBitmapSize, "Select zoomable image")
            'ZoomPictureBox1.Image = _AddImage
    
            Dim img1 = New Bitmap(imgBGpath)
            Dim gr As Graphics = Graphics.FromImage(img1)
    
       With gr
                .TranslateTransform(PictureBox1.Width \ 2, PictureBox1.Height \ 2)
                Dim img2 = New Bitmap(imgFGpath)
                .DrawImage(img2, -img2.Width \ 2, -img2.Height \ 2)
        End With
        ZoomPictureBox1.Image = img1
    
     End Sub
    
    Another Try
    
    Private Sub btnGetFrontImg_Click(sender As Object, e As EventArgs) Handles btnGetFrontImg.Click
    
            Dim img1 = New Bitmap(imgBGpath)
            Dim gr As Graphics = Graphics.FromImage(img1)
    
       With gr
                .TranslateTransform(PictureBox1.Width \ 2, PictureBox1.Height \ 2)
                _AddImage = GetImage(ZoomPictureBox1.Image, EmptyBitmapSize, "Select zoomable image")
              .DrawImage(_AddImage, -_AddImage.Width \ 2, -_AddImage.Height \ 2)
        End With
            ZoomPictureBox1.Image = img1
    
     End Sub
    the Effect remains the same with above trials

    Full Code
    Code:
    Public Class ZoomingMovingImages
    
        'Private _BaseImage As Image
        'Private _AddImage As Image
    
        Private imgBGpath As String = "C:\Working-With-Images\1.JPG"
        Private imgFGpath As String = "C:\Working-With-Images\T-Img.png"
    
        Public EmptyBitmapSize As New Size(500, 500)
    
        Private Sub ZoomingMovingImages_Load(sender As Object, e As EventArgs) Handles MyBase.Load
          Call FormLayout()
        End Sub
    
    Private Sub FormLayout()
    
    Me.Location = New Point(0, 0) '
            Me.Size = New Size(1400, 1500) '(1200, 800) '816 489
            'Me.TransparencyKey = SystemColors.ActiveCaption
            Me.AutoScroll = True
    
            'Below Trackbar
            ZoomSlider.Location = New Point(1151, 100)
            ZoomSlider.Minimum = 1
            ZoomSlider.Maximum = 5
            ZoomSlider.SmallChange = 1
            ZoomSlider.LargeChange = 1
            ZoomSlider.UseWaitCursor = False
            ' reduce flickering
            Me.DoubleBuffered = True
    
            'Set the PictureBox and ZoomPictureBox properties:
            PictureBox1.SizeMode = PictureBoxSizeMode.AutoSize
            PictureBox1.BorderStyle = BorderStyle.Fixed3D
            ZoomPictureBox1.Parent = PictureBox1
            ZoomPictureBox1.BackColor = Color.Transparent
            ZoomPictureBox1.BorderStyle = BorderStyle.None
            ZoomPictureBox1.Bounds = PictureBox1.ClientRectangle
    
    
    End Sub
    
    Private Sub PictureBox1_SizeChanged(ByVal sender As Object, ByVal e As System.EventArgs)
              ZoomPictureBox1.Bounds = PictureBox1.ClientRectangle
    End Sub
    
    Private Sub ZoomPictureBox1_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles ZoomPictureBox1.DoubleClick
            PictureBox1.Image = SuperimposeImage(_BaseImage, _AddImage, ZoomPictureBox1.ImagePosition, ZoomPictureBox1.ZoomFactor)
            ZoomPictureBox1.ImagePosition = New Point(ZoomPictureBox1.ImagePosition.X - 2, ZoomPictureBox1.ImagePosition.Y - 2)
            Cursor.Position = New Point(Cursor.Position.X - 2, Cursor.Position.Y - 2)
    End Sub
    
    
        'Get an image from file or an empty bitmap:
    Private Function GetImage(ByVal currentImage As Image, ByVal emptyBitmapSize As Size, ByVal caption As String) As Image
            Dim bmp As Bitmap
            If currentImage Is Nothing Then
                bmp = New Bitmap(emptyBitmapSize.Width, emptyBitmapSize.Height)
            Else
                bmp = New Bitmap(currentImage)
            End If
            Using ofd As New OpenFileDialog
                ofd.Title = caption
                If ofd.ShowDialog = Windows.Forms.DialogResult.OK Then
                    Try
                        bmp = New Bitmap(ofd.FileName)
                    Catch
                        MessageBox.Show("Invalid image file " & ofd.FileName)
                    End Try
                End If
            End Using
            Return bmp
    End Function
    
        Private Function SuperimposeImage(ByVal baseImage As Image, ByVal addImage As Image, ByVal location As Point, ByVal zoomFactor As Double) As Image
            If baseImage IsNot Nothing AndAlso addImage IsNot Nothing Then
                Using g As Graphics = Graphics.FromImage(baseImage)
                    g.DrawImage(addImage, location.X, location.Y,
                      CInt(addImage.Width * zoomFactor),
                      CInt(addImage.Height * zoomFactor))
                End Using
            End If
            Return baseImage
    End Function
    
    Private Sub SaveImage(ByVal img As Image)
            Using sfd As New SaveFileDialog
                sfd.Filter = "Image Files (*.png, *.jpg)|*.png;*.jpg"
                If sfd.ShowDialog = Windows.Forms.DialogResult.OK Then
                    If sfd.FileName.ToUpper.EndsWith("PNG") Then
                        _BaseImage.Save(sfd.FileName, Imaging.ImageFormat.Png)
                    ElseIf sfd.FileName.ToUpper.EndsWith("JPG") Then
                        _BaseImage.Save(sfd.FileName, Imaging.ImageFormat.Jpeg)
                    Else
                        MessageBox.Show("Please give a PNG or JPG extension. Other formats are not yet supported.")
                    End If
                End If
            End Using
     End Sub
    
    Private Sub btnGetImgFile_Click(sender As Object, e As EventArgs) Handles btnGetImgFile.Click
           ' _BaseImage = GetImage(PictureBox1.Image, EmptyBitmapSize, "Select base image")
           ' PictureBox1.Image = _BaseImage
           ' ZoomPictureBox1.Bounds = PictureBox1.ClientRectangle
    
            Dim img1 = New Bitmap(imgBGpath)
            ZoomPictureBox1.Image = img1
    
    End Sub
    
    Private Sub btnGetFrontImg_Click(sender As Object, e As EventArgs) Handles btnGetFrontImg.Click
            '_AddImage = GetImage(ZoomPictureBox1.Image, EmptyBitmapSize, "Select zoomable image")
            'ZoomPictureBox1.Image = _AddImage
    
            Dim img1 = New Bitmap(imgBGpath)
            Dim gr As Graphics = Graphics.FromImage(img1)
    
    With gr
                .TranslateTransform(PictureBox1.Width \ 2, PictureBox1.Height \ 2)
                Dim img2 = New Bitmap(imgFGpath)
                .DrawImage(img2, -img2.Width \ 2, -img2.Height \ 2)
            End With
            ZoomPictureBox1.Image = img1
    End Sub
    
    
    Private Sub ZoomSlider_Scroll(sender As Object, e As EventArgs) Handles ZoomSlider.Scroll
    
        ZoomPictureBox1.EnableMouseWheelZooming = False
        ZoomPictureBox1.EnableMouseDragging = False
    
        
            If ZoomSlider.Value = 1 Then ZoomPictureBox1.ZoomFactor = 1
            If ZoomSlider.Value = 2 Then ZoomPictureBox1.ZoomFactor = 1.25
            If ZoomSlider.Value = 3 Then ZoomPictureBox1.ZoomFactor = 1.5
            If ZoomSlider.Value = 4 Then ZoomPictureBox1.ZoomFactor = 2
            If ZoomSlider.Value = 5 Then ZoomPictureBox1.ZoomFactor = 2.5
    
             ZoomPictureBox1.Invalidate()
    
    End Sub
    End Class
    your valuable inputs shall be appreciated
    nkvb
    Last edited by nkvb; Oct 12th, 2024 at 12:34 AM.

  2. #2
    Hyperactive Member
    Join Date
    Jul 2022
    Posts
    403

    Re: Front Image not properly displayed in Zoom Picture box

    It would be helpful if you were to add a screenshot or two displaying what you're seeing and then a mockup of what you are trying to achieve. As well as upload the image file(s) you're using.

  3. #3

    Thread Starter
    Member
    Join Date
    Aug 2024
    Posts
    42

    Re: Front Image not properly displayed in Zoom Picture box

    jdelano

    Attaching the Screenshots
    1
    Attachment 193092
    Above Image is when clicked on btnGetImgFile_Click

    the below Full Image of Spiderman (T-IMg .PNG) File to be displayed in front of the above Earth
    2
    Attachment 193094

    3
    Attachment 193093
    Above Image is when clicked on btnGetFrontImg_Click

    and then a mockup of what you are trying to achieve.
    just want the full spiderman to come in front of the earth
    See 3rd atchmt. only right hand of spiderman is showing with either trials shown above

    nkvb
    Last edited by nkvb; Oct 12th, 2024 at 10:11 AM.

  4. #4
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,742

    Re: Front Image not properly displayed in Zoom Picture box

    Quote Originally Posted by nkvb View Post
    jdelano

    Attaching the Screenshots
    1
    Attachment 193092
    Above Image is when clicked on btnGetImgFile_Click

    the below Full Image of Spiderman (T-IMg .PNG) File to be displayed in front of the above Earth
    2
    Attachment 193094

    3
    Attachment 193093
    Above Image is when clicked on btnGetFrontImg_Click


    just want the full spiderman to come in front of the earth
    See 3rd atchmt. only right hand of spiderman is showing with either trials shown above

    nkvb

    You need to use Go Advanced to post images.

    Quote Originally Posted by nkvb View Post
    only right hand of spiderman is showing
    Looks like you need to resize the image before setting it as your front image

  5. #5

    Thread Starter
    Member
    Join Date
    Aug 2024
    Posts
    42

    Re: Front Image not properly displayed in Zoom Picture box

    .Paul Sir,
    Yes Incorporated the below function in full code

    Code:
    Public Shared Function ResizeImage(ByVal InputBitmap As Bitmap, width As Integer, height As Integer) As Bitmap
    
            Return New Bitmap(InputBitmap, New Size(width, height))
    
    End Function
    and used as below in both Trials
    Trial 1
    Code:
    Private Sub btnGetFrontImg_Click(sender As Object, e As EventArgs) Handles btnGetFrontImg.Click
    
            Dim img1 = New Bitmap(imgBGpath)
            Dim gr As Graphics = Graphics.FromImage(img1)
    
       With gr
                .TranslateTransform(PictureBox1.Width \ 2, PictureBox1.Height \ 2)
                Dim img2 = New Bitmap(imgFGpath)
                    img2 = ResizeImage(img2, 100, 100)
                .DrawImage(img2, -150, -150)
                
        End With
        ZoomPictureBox1.Image = img1
    
     End Sub
    Trial 2
    Code:
    Private Sub btnGetFrontImg_Click(sender As Object, e As EventArgs) Handles btnGetFrontImg.Click
    
       With gr
                .TranslateTransform(PictureBox1.Width \ 2, PictureBox1.Height \ 2)
         _AddImage = GetImage(ZoomPictureBox1.Image, EmptyBitmapSize, "Select zoomable image")
                _AddImage = ResizeImage(_AddImage, 100, 100)
                .DrawImage(_AddImage, -150, -150)
    
        End With
        ZoomPictureBox1.Image = img1
     End Sub
    This case was manageable as the actual image of spiderman is 236W and 214H.

    Please the attachment as per the rectified code

    Although it depends,
    What should be simple math formula for resizing and drawing image if we select the case
    with _Addimage respective to seletion of images ?
    So that this remains successful in majority of cases.

    thanks
    nkvb
    Attached Images Attached Images  
    Last edited by nkvb; Oct 12th, 2024 at 09:58 PM.

  6. #6

    Thread Starter
    Member
    Join Date
    Aug 2024
    Posts
    42

    Re: Front Image not properly displayed in Zoom Picture box

    One more observation that when directly clicking on btnGetFrontImg_Click Event both the images appear
    background as well as front image. like the attachment in #5
    Actually if clicked on above button btnGetFrontImg_Click directly Front image should only appear and no backimage.
    How can i avoid bringing the background image ? See the below attachment Only Front image
    Code:
    Private Sub btnGetFrontImg_Click(sender As Object, e As EventArgs) Handles btnGetFrontImg.Click
    
            Dim img1 = New Bitmap(imgBGpath)
            Dim gr As Graphics = Graphics.FromImage(img1)
    
       With gr
                .TranslateTransform(PictureBox1.Width \ 2, PictureBox1.Height \ 2)
                Dim img2 = New Bitmap(imgFGpath)
                    img2 = ResizeImage(img2, 100, 100)
                .DrawImage(img2, -150, -150)
    
                
        End With
        ZoomPictureBox1.Image = img1
    
     End Sub
    nkvb
    Attached Images Attached Images  
    Last edited by nkvb; Oct 13th, 2024 at 02:48 AM.

  7. #7
    Hyperactive Member
    Join Date
    Jul 2022
    Posts
    403

    Re: Front Image not properly displayed in Zoom Picture box

    Although it depends,
    What should be simple math formula for resizing and drawing image if we select the case
    with _Addimage respective to seletion of images ?
    You might want to look at the solution here https://www.codeproject.com/question...eep-aspect-rat for the code to resize an image and preserve its aspect ratio.

    EDIT: I started to build a project, but I see you're using a specialized control, unfortunately it looks like the author of ZoomPicturebox hasn't visited these forums in some time (their last forum post was nearly a year ago Dec 18th, 2023, 03:36 PM) they are probably the best person to answer your usage questions. Hopefully, if their situation allows, they'll return.

    In the meantime, there are a few links that might help:
    https://www.vbforums.com/showthread....n-a-picturebox (in particular post #3)
    https://learn.microsoft.com/en-us/an...sly-drawn-grap
    https://www.reddit.com/r/visualbasic...n_picture_box/ I actually replied to this -jd31068- suggesting a YouTube video - which helped the person posting the question (they posted their new code for zooming)

    Good luck with your project
    Last edited by jdelano; Oct 13th, 2024 at 04:47 AM.

  8. #8

    Thread Starter
    Member
    Join Date
    Aug 2024
    Posts
    42

    Re: Front Image not properly displayed in Zoom Picture box

    jdelano

    Thanks for sending the links.
    https://www.vbforums.com/showthread....n-a-picturebox

    Before starting this thread already I had downloaded the files from the above link. It seemed early version of VB coding which I have never coded on it.
    I've directly jumped on VB.net 2019
    therefore did not take much interest. But now after your suggestion need to study and come out with right aspect ratio. Let me study and work on it

    If anything specific regarding the same will post completely new thread. Hopefully the author of Zoom-Picturebox Boops Boops should be available by that time. Thanks

    For #6
    I worked out on the below following logic which is ok
    Code:
    If Not ZoomPictureBox1.Image is Nothing Then
        //do stuff here
    Else
        //do other stuff
    End If
    I thank you and .Paul Sir for your valuable help.

    nkvb

  9. #9
    Hyperactive Member
    Join Date
    Jul 2022
    Posts
    403

    Re: [RESOLVED] Front Image not properly displayed in Zoom Picture box

    Happy to help, good luck with the rest of your project.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width