When I try to upscale a portion of an image in VB.NET, the source rectangle seems to bleed over.
BMP1 = Bitmap.FromFile(Application.StartupPath & "\TST.png")
Dim G As Graphics = PictureBox3.CreateGraphics
G.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor
G.DrawImage(BMP1, New Point(0, 0))
G.Dispose()
G = PictureBox1.CreateGraphics
G.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor
G.DrawImage(BMP1, New Rectangle(0, 0, 256, 256),
New Rectangle(0, 32, 32, 32), GraphicsUnit.Pixel)
G.Dispose()
G = PictureBox2.CreateGraphics
G.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor
G.DrawImage(BMP1, New Rectangle(0, 0, 256, 256),
New Rectangle(0, 32, 31, 32), GraphicsUnit.Pixel)
G.Dispose()
VB.NET Test Image Results:
As you can see, when upscaled to 8x, the image borrows red pixels from the neighboring cell. When I tried to adjust the source box by 1 pixel, the upscaled image seemed to lose two pixels instead of one.
My question is, how can I reproduce the stretching behavior from VB6?
VB6 Test Image Results:
Turns out the answer was to call DrawImage with RectangleFs instead of Rectangles, and then to subtract a magic number of 0.5 from the X and Y value of the source rectangle. This scales the image perfectly.
G.DrawImage(BMP1, New RectangleF(0, 0, 256, 256),
New RectangleF(-0.5, 31.5, 32, 32), GraphicsUnit.Pixel)
Related
I am trying to create a heatmap in vb.net, what I've done so far is to create gray circles, and map the bitmap with a mapping scheme to a colourized bitmap, as you can see here:
But how am I able to fade between the gray circles? Is there an easy way available?
This is how I am drawing my circles at the moment:
Dim tmpBitmap As New Bitmap(300, 300)
With Graphics.FromImage(tmpBitmap)
'.DrawLine(...)
'.DrawString(...)
Dim pth As New GraphicsPath()
pth.AddEllipse(0, 0, 150, 150)
Dim pgb As New PathGradientBrush(pth)
pgb.SurroundColors = New Color() {Color.DarkGray}
pgb.CenterColor = Color.Black
.FillRectangle(pgb, 0, 0, 150, 150)
Dim pth2 As New GraphicsPath()
pth2.AddEllipse(100, 0, 150, 150)
Dim pgb2 As New PathGradientBrush(pth2)
pgb2.SurroundColors = New Color() {Color.DarkGray}
pgb2.CenterColor = Color.Black
.FillRectangle(pgb2, 100, 0, 150, 150)
End With
Thank you!
Edit:
I need it for an application very similar to what netspot does (www.netspotapp.com) so I need to set points with measurements, and I want it to look like a heatmap. Like this:
Edit2:
Sample with LinearGradientBrush.
If I use LinearGradientBrush (because it's easier for testing)
I set two points:
.DrawEllipse(Pens.Black, 45, 45, 10, 10)
.DrawEllipse(Pens.Black, 145, 145, 10, 10)
After that I create a LinearGradientBrush with the origin of the circles.
Dim tmpBrush As New Drawing2D.LinearGradientBrush(New Point(50, 50), New Point(150, 150), Color.FromArgb(0, 0, 0), Color.FromArgb(100, 100, 100))
.FillRectangle(tmpBrush, 0, 0, 500, 500)
This is the result, but I don't understand how to add a third point for example.
As you use a graphics object shouldn't the changes occur on the bitmap (source image) at some point? Running the code below I get 5 images that are all identical to the source. 1.bmp, 2.bmp, 3.bmp, 4.bmp, and 5.bmp are identical to "scaleCharacter" except 4 & 5 have higher compression (smaller file size)
Private Function DrawCharacterMenu() As Boolean
Try
'Background
Dim rect As Rectangle = New Rectangle(100, 100, 128, 128)
Graphics.FromImage(Render).FillRectangle(Brushes.Black, rect)
'Scale up sprite
Dim scaleCharacter As Bitmap = ActiveCharacter.img.Clone
Using grDest = Graphics.FromImage(scaleCharacter)
scaleCharacter.Save("1.bmp")
grDest.ScaleTransform(4.0F, 4.0F)
scaleCharacter.Save("2.bmp")
grDest.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor
scaleCharacter.Save("3.bmp")
grDest.DrawImage(scaleCharacter, 0, 0)
scaleCharacter.Save("4.bmp")
End Using
scaleCharacter.Save("5.bmp")
'Draw scaled up sprite to rendering
Graphics.FromImage(Render).DrawImage(scaleCharacter, 100, 100)
Catch ex As Exception
addDebugMessage("Error: Mainmenu.DrawCharacterMenu: " & ex.Message)
Return False
End Try
Return True
End Function
I would Expect 1 to be the same as 'scaleCharacter'
2 and beyond to be 4 times larger (32x32 to 128x128)
3 and beyond to have less interpolation (not looked stretched)
The finished 'scaleCharacter' drawn onto the rendering also is identical to the original image...
All your images are the same because technically you never change them.
Graphics.ScaleTransform() changes only the internal "world" matrix used when drawing primitives. ScaleTransform(4.0F, 4.0F) makes the drawing grid 4x wider and 4x taller, but it doesn't change the image itself until you draw something on it. For instance, if you were to draw a 20 x 10 rectangle on your image now it would result in a rectangle 80 x 40 in size.
To resize the actual image you have to create a new bitmap with the scaled size, then draw the old image scaled onto it.
Changing Graphics.InterpolationMode affects only newly drawn objects. Again it doesn't change your image until you draw something on it.
Finally, while grDest.DrawImage(scaleCharacter, 0, 0) does change your image, it draws the same image in the top-left corner (0, 0) of itself, so there is no visible change.
Here's how you can make it work:
Scaling your image:
'Scale factor.
Dim scaleFactor As Single = 4.0F
'Create a new bitmap of the scaled size.
Using scaledBmp As New Bitmap(scaleCharacter.Width * scaleFactor, scaleCharacter.Height * scaleFactor)
Using g As Graphics = Graphics.FromImage(scaledBmp)
'Draw the old image, scaled, onto the new one.
'srcRect: The rectangle specifying which portion of the source image (scaleCharacter) to draw.
' We want the full image so we specify (0, 0, source width, source height).
'destRect: The rectangle specifying where on the destination image (scaledBmp) to draw the source image.
' Since we want to scale it we specify the full destination image (0, 0, dest width, dest height).
Dim srcRect As New Rectangle(0, 0, scaleCharacter.Width, scaleCharacter.Height)
Dim destRect As New Rectangle(0, 0, scaledBmp.Width, scaledBmp.Height)
g.DrawImage(scaleCharacter, destRect, srcRect, GraphicsUnit.Pixel)
'Save the image.
scaledBmp.Save("2.bmp")
End Using
End Using
Scaling your image using Nearest Neighbour interpolation:
'Create a new bitmap of the scaled size.
Using scaledBmp As New Bitmap(scaleCharacter.Width * scaleFactor, scaleCharacter.Height * scaleFactor)
Using g As Graphics = Graphics.FromImage(scaledBmp)
'Set the interpolation mode before drawing.
g.InterpolationMode = Drawing2D.InterpolationMode.NearestNeighbor
'Draw the old image, scaled, onto the new one.
'srcRect: The rectangle specifying which portion of the source image (scaleCharacter) to draw.
' We want the full image so we specify (0, 0, source width, source height).
'destRect: The rectangle specifying where on the destination image (scaledBmp) to draw the source image.
' Since we want to scale it we specify the full destination image (0, 0, dest width, dest height).
Dim srcRect As New Rectangle(0, 0, scaleCharacter.Width, scaleCharacter.Height)
Dim destRect As New Rectangle(0, 0, scaledBmp.Width, scaledBmp.Height)
g.DrawImage(scaleCharacter, destRect, srcRect, GraphicsUnit.Pixel)
'Save the image.
scaledBmp.Save("3.bmp")
End Using
End Using
I have an png image 120x120. I want to take a part of it (10x10) and zoom it by a factor of x32 and show it to a picturebox pixelated.
what i have done:
bmp = New Bitmap(320, 320, PixelFormat.Format32bppArgb) 'create a bitmap x32
Dim g As Graphics = Graphics.FromImage(bmp)
'draw the part in that bitmap
g.DrawImage(My.Resources.MyImage, New Rectangle(0, 0, 320, 320), New Rectangle(50, 50, 10, 10), GraphicsUnit.Pixel)
PictureBox1.Image = bmp
g.Dispose()
The image is not pixelated. What can I do to fix it?
You have to specify in your graphics:
g.InterpolationMode = InterpolationMode.NearestNeighbor
and change the rectangles to:
g.DrawImage(My.Resources.MyImage, New RectangleF(0, 0, 320, 320), New RectangleF(49.5, 49.5, 10, 10), GraphicsUnit.Pixel)
so you will not lose half a pixel.
I know how to draw rectangle, line and ovals on windows form but I am not sure how to draw this type of ........figure........
in windows form. I want all three sides to be variable so I can change its size and also the thickness of line should be variable.
I can draw line like this
Dim pen As New Pen(Color.FromArgb(255, 0, 0, 0))
e.Graphics.DrawLine(pen, 20, 10, 300, 100)
but how do I manage to draw the above shown picture?
Can I group these lines showhow?
Any help will be highly appreciated
Cheers
Mak
Dim pen As New Pen(Color.FromArgb(255, 0, 0, 0))
' Create array of points that define lines to draw.
Dim points As Point() = {New Point(10, 100), New Point(10, 10), New Point(100, 10), New Point(100, 100)}
'Draw lines to screen.
e.Graphics.DrawLines(Pen, points)
I have problem with Graphics.RotateTransfrom() with the following code :
Dim newimage As Bitmap
newimage = System.Drawing.Image.FromFile("C:\z.jpg")
Dim gr As Graphics = Graphics.FromImage(newimage)
Dim myFontLabels As New Font("Arial", 10)
Dim myBrushLabels As New SolidBrush(Color.Black)
Dim a As String
'# last 2 number are X and Y coords.
gr.DrawString(MaskedTextBox2.Text * 1000 + 250, myFontLabels, myBrushLabels, 1146, 240)
gr.DrawString(MaskedTextBox2.Text * 1000, myFontLabels, myBrushLabels, 1146, 290)
a = Replace(Label26.Text, "[ mm ]", "")
gr.DrawString(a, myFontLabels, myBrushLabels, 620, 1509)
a = Replace(Label5.Text, "[ mm ]", "")
gr.DrawString(a, myFontLabels, myBrushLabels, 624, 548)
gr.RotateTransform(90.0F)
gr.DrawString(a, myFontLabels, myBrushLabels, 0, 0)
PictureBox1.Image = newimage
I dont know why but my image in pictureBox1 is not rotated. Someone known solution ?
The issue at hand is that the RotateTransform method does not apply to the existing image.
Instead, it applies to the transformation matrix of the graphics object. Basically, the transformation matrix modifies the coordinate system used to add new items.
Try the following :
Dim gfx = Graphics.FromImage(PictureBox1.Image)
gfx.DrawString("Test", Me.Font, Brushes.Red, New PointF(10, 10))
gfx.RotateTransform(45)
gfx.DrawString("Rotate", Me.Font, Brushes.Red, New PointF(10, 10))
The first string is drawn normally, while the second is drawn rotated.
So what you need to do is create a new graphics object, apply your rotation, draw your source image onto the graphics (graphics.DrawImage), and then draw all your text :
' Easy way to create a graphisc object
Dim gfx = Graphics.FromImage(PictureBox1.Image)
gfx.Clear(Color.Black)
gfx.RotateTransform(90) ' Rotate by 90°
gfx.DrawImage(Image.FromFile("whatever.jpg"), New PointF(0, 0))
gfx.DrawString("Test", Me.Font, Brushes.Red, New PointF(10, 10))
gfx.DrawString("Rotate", Me.Font, Brushes.Red, New PointF(10, 10))
But beware of rotation, you'll find that you need to change the coordinates at which you draw your image (Or change the RenderingOrigin property of the graphics, setting it to the center of the image makes it easier to handle rotations), otherwise your picture won't be visible (it will be drawn, but off the visible part of the graphics).
Hope that helps