[VBNET] 快速呈現縮放選擇框

常常在論壇上看到有人討論順暢的顯示控制項變化,一直沒想到以縮放選擇框為例來做說明,因為核心原始碼真的很短,而且取得容易,所以一直沒考慮過要寫類似的主題。

今天又看到類似的問題,一時興起,把以前的原始碼摘出來,並且用 CamStudio 2.0 錄影作為展示,以 1440×900 、每秒 30 格速度錄製。

用的電腦是 2007 買的,都在這個網誌有資料可查:
1. OS: Win2012r2 : [Windows] 超舊主機板安裝 Windows 2012 R2
2. 顯卡 EN210 : [硬體] ASUS EN8600GT 爆電容
3. CPU Intel Core Q6600 :  四核新電腦 – 華碩平台【四核魔神】DVD燒錄遊戲電腦

先說背景的原因是因為讓看倌知道,是用很舊的編譯器、硬體在跑,都可以很順暢時,不用擔心用新電腦會速度太慢。

一開始我碰上控制項變化會在螢幕殘影時,因為初始畫面很正常,我就很納悶,微軟是怎麼處理。

例如你開一個 Form1.vb 好了,微軟就會自動開一個 Form1.Designer.vb,如果你想到這麼做,你這篇基本上不用看了,答案就在 .Designer.vb 檔案中。

你會發現,微軟自動產生的原始碼,一開始都會讓控制項做
object.SuspendLayout()

最後做
object.ResumeLayout(False)
object.PerformLayout()

然後對照線上手冊說明後,你會發現,就這麼簡單。是的,所以根本沒想到要去寫一篇文來談這件事。

當然,經過測試後,大多數情形,只需要將容器做 object.SuspendLayout() ,裡面的控制項有沒有做 .SuspendLayout() 就影響不大了。常見的容器可能是 Form、PictureBox、Panel 等。

我有做了一個地理資訊展示,所以考量放大需求,需要一個控制項在地圖上框來框去,當滑鼠事件觸發後,統一呼叫 SetSelectRect :


Private Overloads Function SetSelectRect(ByVal rect  As Hisdt.Drawing.RectangleD) As Hisdt.Drawing.RectangleD

   With shpSelectRect
      .SuspendLayout()

      .Location = rect.Location.ToPoint + picImage.Location
      .Size = rect.Size.ToSize

      .ResumeLayout(False)
      .PerformLayout()

      If .Size.Width <> 0 OrElse .Size.Height <> 0 Then .Visible = True
   End With
OnMapSelectChanged()
Return rect
End Function


因此當需要變動大量控制項,又很注重螢幕展示效能的時候,配合 SuspendLayout() 即可做到最大程度的改善。

那為什麼要呼叫 SuspendLayout() ?

從 VB 起,微軟設計上會讓應用程式開發工具自動化的工作。因此當你有任何控制項變更時,就會透過內部事件觸發重繪。到了 VBNET、C# 時,延續 VB 精神,將此功能內建在系統內,所以變成只有 C++ 需要人工重繪,而在 VBNET 及 C# 下,都可以輕鬆得開發程式。但反過來,太自動的時候,就會做了多餘的動作,因此大量控制項屬性變更時,先暫止自動觸發內部重繪事件,等到所有變更完成後,才允許自動重繪,就可以把展示的效能提升上來。

更進階就是使用記憶體繪圖、雙緩衝顯示之類的部分,就不在這篇討論範圍了。

影片中,滑鼠操作動作因為看不見選單,所以簡單解釋一下:
左鍵點選拖拉 -> 框選放大範圍
左鍵雙擊 -> 滑鼠位置中心放大 1.1 倍
右鍵單擊 -> 滑鼠位置中心縮小 1.1 倍
右鍵點選拖拉 -> 移動顯示範圍
滾輪下捲 -> 滑鼠位置中心放大 1.1 倍
滾輪上捲 -> 滑鼠位置中心縮小 1.1 倍

Categories: 技術分享, 決策支援系統 | Tags: , , , | 1 則迴響

文章導覽

One thought on “[VBNET] 快速呈現縮放選擇框

  1. 通告: [VBNET] 一個簡單的 YouTube 播放器 | 鄭子璉

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 變更 )

Twitter picture

You are commenting using your Twitter account. Log Out / 變更 )

Facebook照片

You are commenting using your Facebook account. Log Out / 變更 )

Google+ photo

You are commenting using your Google+ account. Log Out / 變更 )

連結到 %s

在WordPress.com寫網誌.

%d 位部落客按了讚: