[vb.net]使用GDI+绘图达到图片随鼠标缩放与移动的效果

近日需要在软件中加入对图片的浏览功能，类似地图的拖拽及缩放操作。
作为vb小白，首先遇到的难点是,如何实现图片随鼠标的拖拽和滚动来实现缩放和移动的效果。网上大部分教程写的不够详细，对于初学者来讲不易理解。大神请绕道。

在查询相关资料后，总结下要点，有二：
（1）捕捉鼠标的点击操作和滚动操作以及鼠标的位移大小；
（2）使用GDI+对缩放或移动过的图片进行绘制。

实现鼠标的点击操作并捕捉鼠标位置：

Dim U_MousePosX As Integer
Dim U_MousePosY As Integer
Dim D_MousePosX As Integer
Dim D_MousePosT As Integer
Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
U_MousePosX = e.X
U_MousePosY = e.Y
End Sub
Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e  As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
D_MousePosX = e.X
D_MousePosY = e.Y
End Sub

使用GDI+对图片进行缩放和移动并绘制到目标图上：

Private img As Bitmap
Private imgRect As Rectangle
img = PictureBox1.Image
imgRect = New Rectangle(0, 0, img.Width, img.Height)
Me.PictureBox1.CreateGraphics().DrawImage(img, imgRect)

使用GDI+的drawimage绘图时需要注意参数的意义，结合简单计算即可算出应鼠标操作所对应的参数值。下面进行缩放的简单说明：图片硕放的尺寸说明假设缩放系数为r，那么缩放之后图片h1=h0*r，w1=w0*r。鼠标的坐标值为(ex,ey)，以鼠标为中心进行缩放时，实际上是以其为中心进行缩放，如图所示向左dw*r。所以可以计算出缩放之后图片的坐标值，x1=e.y - (ey - y0) * r,y1=e.y - (ey - y0) * r。

代码

Public Class Form1
    Private m_Leftx As Integer
    Private m_Lefty As Integer
    Dim m_MousePosX As Integer
    Dim m_MousePosY As Integer
    Dim m_DeltaX As Integer
    Dim m_DeltaY As Integer
    Dim m_StrecthX As Double
    Dim m_StrecthY As Double
    Private img As Bitmap
    Private ratio As Single
    Private imgRect As Rectangle
'当鼠标按下时，记录鼠标按下时的位置；将鼠标变成手形：
    Private Sub PictureBox1_MouseDown(ByVal sender As Object, ByVal e _
            As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseDown
        m_MousePosX = e.X
        m_MousePosY = e.Y
        Me.Cursor = System.Windows.Forms.Cursors.Hand
    End Sub
'鼠标按键抬起事件，保存鼠标抬起时的位置；计算鼠标移动偏移量，移动图片：
    Private Sub PictureBox1_MouseUp(ByVal sender As Object, ByVal e _
            As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseUp
        m_DeltaX = m_MousePosX - e.X
        m_DeltaY = m_MousePosY - e.Y
        imgRect.X = imgRect.X - m_DeltaX
        imgRect.Y = imgRect.Y - m_DeltaY
        Me.PictureBox1.CreateGraphics().DrawImage(img, imgRect)
        Me.Cursor = System.Windows.Forms.Cursors.Arrow
    End Sub

'滚动鼠标事件，对图片以鼠标为中心进行缩放：
    Private Sub PictureBox1_MouseWheel1(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PictureBox1.MouseWheel
        Dim pb As PictureBox = CType(sender, PictureBox)
        If e.Delta > 0 Then
            ratio = 1.1        
        Else
            ratio = 0.9
        End If
        '在被点击位置变换为画像上的位置
        Dim imgPoint As New Point(CInt(e.X - (e.X - imgRect.X) * ratio), CInt(e.Y - (e.Y - imgRect.Y) * ratio))
        imgRect.Width = CInt(Math.Round((imgRect.Width * ratio)))
        imgRect.Height = CInt(Math.Round((imgRect.Height * ratio)))
        imgRect.X = imgPoint.X
        imgRect.Y = imgPoint.Y
        Me.PictureBox1.CreateGraphics().DrawImage(img, imgRect)
    End Sub
'初始化
    Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
        img = PictureBox1.Image
        imgRect = New Rectangle(0, 0, img.Width, img.Height)
        ratio = 1.0
        PictureBox1.Invalidate()
    End Sub
End Class

展示效果

略 ;)

栏目列表