MakeIT II

在上一篇[WM]利用Microsoft.Drawing擴充Graphics & 繪製縮圖當中有提到可以利用Microsoft.Drawing的命名空間下去繪製縮圖，而點了縮圖之後會叫出第二個Form來顯示較大的圖形，但顯示較大的圖形時，也只有一個等級；能不能再放大來看呢，今天就來測試看看這個部分。
首先，在Mobile 6.5的作業系統當中，在首頁可以看到圖片的瀏覽介面，像是下圖這樣

點選進入之後，就可以看到瀏覽的介面，選擇Zoom之後，會看到有個可以放大圖片的介面

今天就試做一個跟這個類似的瀏覽方式；在看程式碼之前，先說明一下大概實作的方向；筆者這邊背景放了一個較大的Picturebox，是顯示大圖用的，而在做放大的功能時，也是用偷懶的方式，設定picturebox的sizemode屬性為自動縮放；另外用一個panel來放置顯示縮圖的picturebox以及放大縮小的按鈕，在縮圖發生mousemove事件時，第一個動作是在縮圖上繪製紅色方框，之後移動下方的picturebox來模擬這樣的效果，那麼接下來就來看看程式碼的部分。

Public Class Form2
    ''暫存檔案位置
    Private _filePath As String

    Dim img As IImage
    Dim imgThumb As IImage = Nothing
    ''繪製縮圖上面方框的pen
    Dim rectPen As New Pen(Color.Red, 2)
    Dim RectWidth As Integer = 30
    Dim RectHeight As Integer = 30
    ''紀錄座標相關
    Dim sX, sY As Integer   ''來源位置
    Dim dX, dY As Integer   ''變動位置
    Dim rX, rY As Integer    ''實際繪製位置
    ''儲存原始圖檔
    Dim tmpBmp As Bitmap
    ''儲存放大級數
    Dim intLavel As Integer = 1
    ''儲存大圖pictureBox的原始寬、高
    Dim intBigPicWidth As Integer = 234
    Dim intBigPicHeight As Integer = 288

    ''' 

    ''' 取得或設定檔案位置
    ''' 
    ''' 
    ''' 
    ''' 
    Public Property FilePath() As String
        Get
            Return _filePath
        End Get
        Set(ByVal value As String)
            _filePath = value
        End Set
    End Property

    Private Sub Form2_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles MyBase.Load
        ''產生縮圖
        img = GetImage(_filePath)
        img.GetThumbnail(picThumb.Width, picThumb.Height, imgThumb)
        ''將縮圖儲存在tag屬性中給paint事件使用
        picThumb.Tag = imgThumb
        imgThumb = Nothing
        ''初始化大圖緩衝區
        tmpBmp = New Bitmap(FilePath)
        ''設定顯示大圖用的picturebox
        picBig.SizeMode = PictureBoxSizeMode.StretchImage
        picBig.Image = tmpBmp
        ''
        rX = 0
        rY = 0
    End Sub

    ''' 

    ''' 移動大圖
    ''' 
    ''' 
    Private Sub DrawBigImage()
        Me.SuspendLayout()
        picBig.Width = intBigPicWidth * intLavel
        picBig.Height = intBigPicHeight * intLavel
        picBig.Left = 0 - (rX * intLavel)
        picBig.Top = 0 - (rY * intLavel)
        Me.ResumeLayout()
    End Sub

    ''' 

    ''' 取得影像相關動作
    ''' 
    ''' 
    ''' 
    ''' 
    Private Function GetImage(ByVal fileName As String) As IImage
        Dim imgFactory As IImagingFactory
        imgFactory = ImagingFactory.GetImaging
        Dim image As IImage = Nothing
        imgFactory.CreateImageFromFile(fileName, image)
        Return image
    End Function

    Private Sub picThumb_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles picThumb.MouseDown
        ''取得起始參考點
        sX = e.X
        sY = e.Y
    End Sub

    Private Sub picThumb_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles picThumb.MouseMove
        ''計算變量
        dX = e.X - sX
        dY = e.Y - sY
        picThumb.Invalidate()
        ''大圖重新繪製
        If intLavel > 1 Then DrawBigImage()
    End Sub

    Private Sub picThumb_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles picThumb.Paint
        If picThumb.Tag Is Nothing Then Exit Sub
        ''將圖片繪製到picturebox上
        e.Graphics.DrawImageAlphaChannel(CType(picThumb.Tag, IImage), 0, 0)
        ''繪製方框
        ''判斷是否有超出範圍
        rX = sX + dX
        If rX - (RectWidth \ 2) < 0 Then
            rX = 0
        ElseIf rX + (RectWidth \ 2) > picThumb.Width Then
            rX = picThumb.Width - RectWidth
        Else
            rX = rX - (RectWidth \ 2)
        End If
        rY = sY + dY
        If rY - (RectHeight \ 2) < 0 Then
            rY = 0
        ElseIf rY + (RectHeight \ 2) > picThumb.Height Then
            rY = picThumb.Height - RectHeight
        Else
            rY = rY - (RectHeight \ 2)
        End If

        e.Graphics.DrawRectangle(rectPen, rX, rY, RectWidth, RectHeight)
    End Sub

    Private Sub btnAdd_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnAdd.Click
        ''增加放大級數
        intLavel += 1
        DrawBigImage()
    End Sub

    Private Sub btnSub_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSub.Click
        ''減少放大級數
        intLavel -= 1
        If intLavel < 1 Then
            intLavel = 1
            rX = 0
            rY = 0
        End If
        DrawBigImage()
    End Sub
End Class

執行後的結果會長的像這樣

放大時的效果