Results 1 to 10 of 10

Thread: How to center-rotate an image in VB.NET?

  1. #1

    Thread Starter
    Hyperactive Member pourkascheff's Avatar
    Join Date
    Apr 2020
    Location
    LocalHost
    Posts
    384

    How to center-rotate an image in VB.NET?

    Hi, I saw on one of jmcilhinney's replies a quite reliable code to easily do that someday. (Link will be added as soon as I find it again.)

    The problem are 2 things:
    - In case of removing picturebox, I'm unable to find center of image itself inside a form or a panel. It is literally rotating from center of screen but from top-left corner.
    - In case of resizing, image will not follow and exceeds in x,y and It goes out of the box.
    I'm trying to upload a gif/video. to describe more detailed.

    Consider you want to represent a sort of compass control. Radial rotation center anchored resizable/scalable north-peak-symbol-kind-of-thing.

    Here's the entire code I used:
    Code:
    Imports System.Drawing.Drawing2D
    Public Class Form3
        Public HeelValue As Integer = 0
        Private picture As Image = My.Resources.Untitled.png
        Private heelangle As Integer = 0
    
        Private Sub Form3_Resize(sender As Object, e As EventArgs) Handles Me.Resize
            Me.Refresh()
            Panel1.CreateGraphics.DrawLine(Pens.Red, Panel1.Width \ 2, 0, Panel1.Width \ 2, Panel1.Height)
            Panel1.CreateGraphics.DrawLine(Pens.Red, 0, Panel1.Height \ 2, Panel1.Width, Panel1.Height \ 2)
        End Sub
    
    
        Private Sub Panel1_Paint(sender As Object, e As PaintEventArgs) Handles Panel1.Paint
            With e.Graphics
                'Move the origin to the centre of the PictureBox.
                .TranslateTransform(Me.Panel1.Width / 2, Me.Panel1.Height / 2)
    
                'Rotate the world.
                .RotateTransform(Me.heelangle)
    
                'Size/Scale
                '.ScaleTransform((Panel1.Height / picture.Height) * 2, (Panel1.Height / picture.Height) * 2)
    
                'Draw the image so its centre coincides with the origin.
                '.DrawImage(Me.picture, (Me.Panel1.Width \ 2) - (Me.picture.Width \ 2), (Me.Panel1.Height \ 2) - (Me.picture.Height \ 2))
                .DrawImage(picture, (Me.Panel1.Width \ 2) - (picture.Width \ 2), (Panel1.Height \ 2) - (picture.Height \ 2))
            End With
            Panel1.CreateGraphics.DrawLine(Pens.Red, Panel1.Width \ 2, 0, Panel1.Width \ 2, Panel1.Height)
            Panel1.CreateGraphics.DrawLine(Pens.Red, 0, Panel1.Height \ 2, Panel1.Width, Panel1.Height \ 2)
        End Sub
    
        Private Sub TrackBar2_Scroll(sender As Object, e As EventArgs) Handles TrackBar2.Scroll
            'NOT THIS EVENT
        End Sub
    
        Private Sub TrackBar2_ValueChanged(sender As Object, e As EventArgs) Handles TrackBar2.ValueChanged
            Me.heelangle = TrackBar2.Value / 10 Mod 360
            Panel1.CreateGraphics.DrawImage(picture, 0, 0)
            Me.Refresh()
        End Sub
    End Class
    *Update: What I tried:
    - Subtract DrawImage argument from a proportion of image size (and location) to achieve required results but it acts even more weird.
    - This is intended to being introduced to more possible properties of e.graphics which do things more easier... I'm not familiar with
    Last edited by pourkascheff; Oct 28th, 2022 at 08:00 AM.

  2. #2
    Addicted Member
    Join Date
    Nov 2011
    Posts
    223

    Re: How to center-rotate an image in VB.NET?

    I would probably create a user control for this but just for the example you can create this on a Windows form.

    I created a gif image called Needle sized at 201 x 201 pixels with a transparent background and put that in My.Resources.

    The code uses a Rectangle to hold and rotate the image, the x and y location properties of the rectangle are set to -101 (center of image)

    To visualize the rotation there is a trackbar included with a Maximum property of 360

    Code:
    Imports System.Drawing
    Imports System.Drawing.Drawing2D
    
    Public Class Form1
    
        Dim i As Integer
    
        Private Sub Form1_Paint(sender As Object, e As PaintEventArgs) Handles Me.Paint
    
            Dim graphics_state As GraphicsState = e.Graphics.Save()
            Dim _rect As New Rectangle(-101, -101, 201, 201)
    
            e.Graphics.ScaleTransform(1, 1, MatrixOrder.Append)
    
            ' Translate to center on the form. Adjust height/width to reposition.
            e.Graphics.TranslateTransform(Me.Width \ 2, Me.Height \ 2, MatrixOrder.Append)
    
            ' Rotate i degrees.
            e.Graphics.RotateTransform(i, MatrixOrder.Prepend)
    
            'Draw the needle in the rectangle
            e.Graphics.DrawImageUnscaled(My.Resources.Needle, _rect)
    
            e.Graphics.Restore(graphics_state)
    
        End Sub
    
        Private Sub TrackBar1_Scroll(sender As Object, e As EventArgs) Handles TrackBar1.Scroll
            i = TrackBar1.Value
            Me.Invalidate()
        End Sub
    End Class

  3. #3

    Thread Starter
    Hyperactive Member pourkascheff's Avatar
    Join Date
    Apr 2020
    Location
    LocalHost
    Posts
    384

    Re: How to center-rotate an image in VB.NET?

    Alright mate, What your code does:
    Name:  rotate1.png
Views: 1284
Size:  30.8 KB
    What I need:
    Name:  rotate2.png
Views: 1276
Size:  28.3 KB
    I manipulated your code a bit. Doesn't work. Rotate center of image, anchored on center of screen.

  4. #4
    Addicted Member
    Join Date
    Nov 2011
    Posts
    223

    Re: How to center-rotate an image in VB.NET?

    Show me your code

  5. #5
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    26,413

    Re: How to center-rotate an image in VB.NET?

    Try this...

    Code:
    Dim pens() As Pen = {New Pen(Color.LightGray, 2), New Pen(Color.DarkGray, 2), New Pen(Color.Black, 2)}
    
    Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
        Dim r As New Rectangle(-50, -50, 100, 100)
    
        Dim i As Integer = 0
        For x As Integer = -60 To 0 Step 30
            e.Graphics.TranslateTransform(CSng(Me.ClientSize.Width / 2), CSng(Me.ClientSize.Height / 2))
            e.Graphics.RotateTransform(x)
            e.Graphics.DrawRectangle(pens(i), r)
            e.Graphics.ResetTransform()
            i += 1
        Next
    End Sub

  6. #6

    Thread Starter
    Hyperactive Member pourkascheff's Avatar
    Join Date
    Apr 2020
    Location
    LocalHost
    Posts
    384

    Re: How to center-rotate an image in VB.NET?

    Already mentioned up there bro.

  7. #7
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    26,413

    Re: How to center-rotate an image in VB.NET?

    Quote Originally Posted by pourkascheff View Post
    Already mentioned up there bro.
    It does this…

    Name:  4DC23563-B503-4CC8-B557-14995A57B460.png
Views: 1140
Size:  28.3 KB

  8. #8
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    26,413

    Re: How to center-rotate an image in VB.NET?

    If you can already do that, what is the question?

  9. #9
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    26,413

    Re: How to center-rotate an image in VB.NET?

    If you want the image to resize with the form...

    Code:
    Public Class Form1
        
        Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
            Dim img As New Bitmap("C:\Users\Paul\Desktop\f09f6c88eb6a65ed641aefcff4008600.png")
            Dim sz As Integer = Math.Min(Me.ClientSize.Width, Me.ClientSize.Height) - 40
            Dim r As New Rectangle(CInt(-(sz / 2)), CInt(-(sz / 2)), sz, sz)
    
            e.Graphics.TranslateTransform(CSng(Me.ClientSize.Width / 2), CSng(Me.ClientSize.Height / 2))
            e.Graphics.RotateTransform(-30)
            e.Graphics.DrawImage(img, r)
            e.Graphics.ResetTransform()
            
        End Sub
    
        Private Sub Form1_Resize(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Resize
            Me.Refresh()
        End Sub
    
        Private Sub Form1_Shown(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Shown
            Me.Refresh()
        End Sub
    
    End Class

  10. #10

    Thread Starter
    Hyperactive Member pourkascheff's Avatar
    Join Date
    Apr 2020
    Location
    LocalHost
    Posts
    384

    Re: How to center-rotate an image in VB.NET?

    Quote Originally Posted by .paul. View Post
    It does this…
    For me, It doesn't.

    Quote Originally Posted by .paul. View Post
    If you can already do that, what is the question?
    It does not follow "rotating an image in center of a UserControl/Form anchored to its middle." for me I can show you a video.

    I turned on Option strict and replaced recommended CType/CSng/CStr things...
    Still not working properly.

    Come on it shouldn't be this much hard. :'(((



    *Update:
    I temporarily achieved what I wanted with following try/fail coefficient (1 - x \ 6 and 1 - y \ 6)And draw relation varies for another imported image:
    Code:
            With e.Graphics
                'Move the origin to the centre of the PictureBox.
                .TranslateTransform(Me.PictureBox1.Width \ 2, Me.PictureBox1.Height \ 2)
    
                'Rotate the world.
                .RotateTransform(Me.angle)
    
                'Size/Scale
                .ScaleTransform(CSng(2 * PictureBox1.Height / picture.Height), CSng(2 * PictureBox1.Height / picture.Height))
    
                'Draw the image so its centre coincides with the origin.
                .DrawImage(Me.picture, 1 - Me.picture.Width \ 6, 1 - Me.picture.Height \ 6)
            End With
    Last edited by pourkascheff; Oct 30th, 2022 at 01:56 PM.

Tags for this Thread

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