前言：在開發程序時，可能需要將一張照片或影像顯示在程序內部界面上。一般來說，界面的大小是固定的，不超過屏幕大小，但是我們需要顯示的照片往往有不同的分辨率，并且一張照片的像素動不動就上千萬，即使1920*1080的屏幕最多也只能顯示200萬像素的照片。要想在程序界面上瀏覽整張圖像，必然需要加入縮放和平移功能。縮放使得我們能夠以較原圖更低的分辨率加載并顯示整張圖像，平移使得在較大分辨率尺度下界面只能加載影像部分區域時方面我們瀏覽影像的其他部分。參考目前已有的各類圖像瀏覽軟件，提出一種實現方案。

簡介：采用平面坐標系統一圖像坐標和顯示窗口(界面)坐標。當圖像加載時，界面與圖像計算縮放比例，界面上每個像素按照縮放比例生成坐標位置，然后根據坐標位置對原圖進行采樣并生成一張與界面大小完全一樣的影像，之后界面直接顯示該圖像即可。完成圖像加載后，界面上顯示的是原圖根據窗口大小按比例縮放后的全貌。接下來，只需要改變縮放比例即可實現縮放，增大縮放比例相當于界面無形中增大了尺寸，原圖看起來在界面中變得更小，而減小縮放比例，相當于界面變小了，界面只能框下原圖更小范圍。平移則是通過改變界面中心坐標實現，由于加載圖像時，界面中心坐標初始值與圖像中心坐標一致，當改變界面中心坐標，通過界面中心坐標和窗口大小從帶坐標的原圖中進行采樣即可獲取平移后的影像。

接下來對上述方案進行詳細描述。

第一步：讀取圖像，獲取圖像的寬和高以及色彩信息，其實圖像本身就是一個二維平面坐標系統，(0,0)對應一個RGB色彩值，(0,1)又對應另一個RGB色彩值。如果想要獲取某一區域的像素數據，只需要根據這個坐標值加上需要獲取的寬度和高度參數即可，圖像裁剪也是同樣原理。那么現在就可以根據圖像寬和高建立一個坐標系，以圖像左下角為坐標系原點。圖像中心坐標為image_center=(image_width/2,image_height/2)。此時還有一個重要步驟就是設定步長，也就是每個像素在坐標系中的跨度范圍，由于已經將圖像中心坐標設定為(image_width/2,image_height/2)，那么一個像素跨度為1，image_step=1。此時原始圖像已經有了固定的坐標，它的每個像素在坐標系中的位置就固定了，坐標系中有圖像的位置就有了對應的RGB值，圖像范圍以外的位置可以設定為黑色或其他顏色對應的RGB值。

概念圖：

第二步：將在界面中全局顯示圖像。首先獲取界面寬和高，window_width,window_height。接下來，計算縮放比例:width_scale=window_width/image_width,height_scale=window_height/image_height。由于要保持圖像寬高比，必須比較width_scale和height_scale，選取較小的一個作為縮放比例scale。接著計算界面上每個像素在全局顯示下對應的步長，window_step=image_step/scale。由于圖像全局顯示，界面的中心和圖像中心一致，即window_center=image_center。接下來根據界面已經確定的參數(window_width,window_height,window_step,window_center)，從坐標系中尋找界面每個像素對應的RGB值。由于界面寬高比和圖像寬高比不保證一致，圖像全局加載后肯定是存在一些空白的地方。

概念圖：

實際效果：

第三步：放大和縮小。有前面兩步的實現，已經為放大縮小打好了基礎。第二步為了在界面全局顯示圖像，相當于已經進行了一次縮放。圖像上每一個像素的坐標都是固定的，界面中心坐標與圖像中心坐標一致，我們只需要改變界面上每個像素在坐標系中的步長即可。當window_step值增加，也就是整個界面在坐標系中范圍增大，界面邊界隨著window_step增大將遠遠超出圖像范圍，圖像在界面中占的面積也就變小，也就實現了將圖像縮小顯示，隨著不斷縮小，最終圖像只會在界面中占一個像素。反之，window_step值減小，整個界面在坐標系中范圍也就減小，界面邊界將小于圖像范圍，顯示的將是圖像的部分區域，隨著不斷放大，界面最終只會顯示圖像中某一個像素的RGB值。

縮小操作概念圖：

縮小效果：

放大操作概念圖：

放大效果圖：

第四步：平移的實現。其實將圖像和界面統一在一個坐標系內本身就是為了同時解決縮放和平移問題的。本質上講，縮放并沒有對圖像進行任何縮小或放大操作，是界面投影到坐標系中的大小在發生變化。界面在坐標系中的投影大小可以解決圖像縮放問題，那么界面中心在坐標系中的投影位置也就解決了圖像的平移問題。當我們改變window_center，不改變window_step，由于界面的寬和高是固定的，整個界面在坐標系中進行移動，那么獲取到的圖像就是移動圖像產生的效果。

平移操作概念圖：

移動效果圖：

總結：到此為止，圖像瀏覽界面的縮放和平移實現就完成了。該方案的核心思想就是給原圖每一個像素賦予一個固定坐標，在界面中進行縮放和平移，變化的是界面在坐標系中投影的位置和大小，圖像本身是沒有進行任何操作的。通過調整界面大小和位置，從坐標系中去采樣色彩信息，返回一張圖像，由于界面的像素是固定的，每次采樣只采樣與界面分辨率一樣的數據量，計算量相對較小，基本可以實時更新畫面。如果界面窗口大小是1000*1000像素，那么總像素是100萬，每次縮放或平移操作需要更新100萬像素的數據量，如果電腦配置較差，可能會有些許卡頓。

補充：利用鼠標來實現圖像的縮放和平移。一般圖像瀏覽軟件都會加入鼠標事件監聽來實現圖像的縮放和平移。這里我采用鼠標滾輪來實現圖像縮放，鼠標左鍵拖動來實現圖像平移。可以定義當滾輪向前滾動來放大圖像，滾輪每向前滾動一個單位，window_step/1.1，由于我們是縮放界面在坐標系中的大小，不是縮放圖像，當界面的步長減小，對應在坐標系中的大小也就是變小，能夠采樣到的圖像范圍也就變小，實現了圖像的放大，與圖像放大是反的，因為圖像本身沒有變化。當然，如果想要縮小圖像顯示，加大界面步長，window_step*1.1，那么采樣到的圖像范圍就更大，圖像在界面中是縮小了的。這里的1.1作為縮放參數是可以更改的。圖像的平移采用鼠標左鍵拖動，當按下鼠標左鍵，記錄下當前鼠標在界面上的位置，這個位置包含兩個參數X和Y，當鼠標開始拖動，獲取每次拖動后的位置，減去上一次的位置，結合界面當前步長window_step和XY方向上的平移量便獲得了界面中心坐標在坐標系中需要移動的位置，再根據這個位置重新采樣圖像并更新到界面上。

總結

以上是生活随笔為你收集整理的图像浏览界面缩放和平移操作的实现的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。