[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
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.
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.
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
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 ?
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.
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