圖片顯示方法、裝置及電子設備的制作方法
【專利摘要】本公開是關于一種圖片顯示方法、裝置及電子設備，屬于計算機領域。所述方法包括：接收對顯示焦點的移動操作；若所述移動操作的起始點處于所述顯示框內，則根據所述圖片的尺寸、所述顯示框的尺寸以及所述顯示焦點的位移矢量移動所述圖片；顯示移動后的所述圖片處于所述顯示框內的部分。本公開通過在檢測出對顯示焦點的移動操作的起始點處于被顯示的圖片所屬的顯示框內時，根據該圖片的尺寸、顯示框的尺寸以及顯示焦點與該顯示焦點的位移矢量移動該圖片，并顯示該圖片處于該顯示框內的部分，解決了需要服務器對各個原始圖片進行縮放的問題以及查看原始圖片時需要重新加載的問題，達到節(jié)約處理資源和網絡帶寬資源的目的。
【專利說明】圖片顯示方法、裝置及電子設備
【技術領域】
[0001]本公開涉及計算機領域，特別涉及一種圖片顯示方法、裝置及電子設備。
【背景技術】
[0002]隨著互聯(lián)網領域的不斷發(fā)展，越來越多的以圖片展示為核心的頁面應用出現(xiàn)在人們的日常生活中，比如網絡相冊、購物網站的商品展示頁面以及圖片搜索頁面等。
[0003]當頁面中圖片較多且圖片尺寸較大時，為了便于用戶瀏覽，通常將原始圖片進行縮放后顯示。比如，服務器保持原始圖片的寬高比不變，對各個原始圖片進行縮放，獲得高度或者寬度固定的縮略圖。當終端顯示頁面時，可以從服務器加載并顯示頁面中各個原始圖片對應的縮略圖。用戶想要查看某一縮略圖對應的原始圖片時，只需將鼠標指向該縮略圖，終端即可以從服務器加載并顯示該原始圖片。
[0004]在實現(xiàn)本公開的過程中，發(fā)現(xiàn)相關技術至少存在以下缺點:首先，原始圖片大多為用戶上傳的圖片，沒有統(tǒng)一的寬高比和尺寸，需要服務器對各個原始圖片進行縮放，浪費服務器處理資源；其次，終端中顯示的是原始圖片的縮略圖，當用戶想要查看原始圖片時需要重新加載，浪費網絡帶寬資源。
【發(fā)明內容】
[0005]為了解決相關技術中需要服務器對各個原始圖片進行縮放，浪費服務器處理資源的問題，以及當用戶想要查看原始圖片時需要重新加載，浪費網絡帶寬資源的問題，本公開提供了一種圖片顯示方法、裝置及電子設備。所述技術方案如下:
[0006]一方面，提供了一種圖片顯示方法，所述方法包括:
[0007]接收對顯示焦點的移動操作；
[0008]檢測所述移動操作的起始點是否處于被顯示的圖片所屬的顯示框內；
[0009]若檢測結果為所述移動操作的起始點處于所述顯示框內，則根據所述圖片的尺寸、所述顯示框的尺寸以及所述顯示焦點的位移矢量移動所述圖片；
[0010]顯示移動后的所述圖片處于所述顯示框內的部分。
[0011]可選的，所述顯示焦點的位移矢量包括水平方向位移矢量和垂直方向位移矢量；
[0012]所述根據所述圖片的尺寸、所述顯示框的尺寸以及所述顯示焦點的位移矢量移動所述圖片，包括:
[0013]若所述圖片的寬度大于所述顯示框的寬度，所述圖片的高度不大于所述顯示框的高度，則根據所述水平方向位移矢量移動所述圖片；
[0014]若所述圖片的寬度不大于所述顯示框的寬度，所述圖片的高度大于所述顯示框的高度，則根據所述垂直方向位移矢量移動所述圖片；
[0015]若所述圖片的寬度大于所述顯示框的寬度，所述圖片的高度大于所述顯示框的高度，則根據所述水平方向位移矢量和所述垂直方向位移矢量移動所述圖片。
[0016]可選的，所述若所述圖片的寬度大于所述顯示框的寬度，所述圖片的高度不大于所述顯示框的高度，則根據所述水平方向位移矢量移動所述圖片，包括:
[0017]設所述圖片是寬度為2x，高度為2y的圖片，所述顯示框是寬度為2X，高度為2Y的矩形顯示框，所述水平方向位移矢量對應的移動距離為a，a≥ 0，x、y、X、Y均為正數；
[0018]若X > X，y ≤ Y，則將所述圖片沿與所述水平方向位移矢量相同或相反的方向移動Sx,
【權利要求】
1.一種圖片顯示方法，其特征在于，所述方法包括: 接收對顯示焦點的移動操作； 檢測所述移動操作的起始點是否處于被顯示的圖片所屬的顯示框內； 若檢測結果為所述移動操作的起始點處于所述顯示框內，則根據所述圖片的尺寸、所述顯示框的尺寸以及所述顯示焦點的位移矢量移動所述圖片； 顯示移動后的所述圖片處于所述顯示框內的部分。
2.根據權利要求1所述的方法，其特征在于，所述顯示焦點的位移矢量包括水平方向位移矢量和垂直方向位移矢量； 所述根據所述圖片的尺寸、所述顯示框的尺寸以及所述顯示焦點的位移矢量移動所述圖片，包括: 若所述圖片的寬度大于所述顯示框的寬度，且所述圖片的高度不大于所述顯示框的高度，則根據所述水平方向位移矢量移動所述圖片； 若所述圖片的寬度不大于所述顯示框的寬度，且所述圖片的高度大于所述顯示框的高度，則根據所述垂直方向位移矢量移動所述圖片； 若所述圖片的寬度大于所述顯示框的寬度，且所述圖片的高度大于所述顯示框的高度，則根據所述水平方向位移矢量和所述垂直方向位移矢量移動所述圖片。
3.根據權利要求2所述的方法，其特征在于，所述若所述圖片的寬度大于所述顯示框的寬度，所述圖片的高度不大于所述顯示框的高度，則根據所述水平方向位移矢量移動所述圖片，包括: 設所述圖片是寬度為2x，高度為2y的圖片，所述顯示框是寬度為2X，高度為2Y的矩形顯示框，所述水平方向位移矢量對應的移動距離為a，其中，a > O，x、y、X、Y均為正數； 若X > X，y < Y，則將所述圖片沿與所述水平方向位移矢量相同或相反的方向移動Sx，
4.根據權利要求2所述的方法，其特征在于，所述若所述圖片的寬度不大于所述顯示框的寬度，所述圖片的高度大于所述顯示框的高度，則根據所述垂直方向位移矢量移動所述圖片，包括: 設所述圖片是寬度為2x，高度為2y的圖片，所述顯示框是寬度為2X，高度為2Y的矩形顯示框，所述垂直方向位移矢量對應的移動距離為b, b > O, x、y、X、Y均為正數； 若X < X，y > Y，則將所述圖片沿與所述垂直方向位移矢量相同或相反的方向移動Sy，
5.根據權利要求2所述的方法，其特征在于，所述若所述圖片的寬度大于所述顯示框的寬度，所述圖片的高度大于所述顯示框的高度，則根據所述水平方向位移矢量和所述垂直方向位移矢量移動所述圖片，包括: 設所述圖片是寬度為2x，高度為2y的圖片，所述顯示框是寬度為2X，高度為2Y的矩形顯示框，所述水平方向位移矢量對應的移動距離為a，所述垂直方向位移矢量對應的移動距離為b,a≥0,b≥0,x、y、X、Y均為正數； 若X > X，y > Y，則將所述圖片沿與所述水平方向位移矢量相同的方向移動Sx，同時將所述圖片沿與所述垂直方向位移矢量相同的方向移動Sx ； 或者， 若X > X，y > Y，則將所述圖片沿與所述水平方向位移矢量相反的方向移動Sx，同時將所述圖片沿與所述垂直方向位移矢量相反的方向移動Sx ；
6.根據權利要求2所述的方法，其特征在于， 若所述圖片的寬度小于所述顯示框的寬度，所述圖片的高度小于所述顯示框的高度，則保持所述圖片在所述顯示框內的位置不變。
7.根據權利要求1所述的方法，其特征在于，所述方法還包括: 在初始時刻時，將所述圖片居中顯示于所述顯示框內。
8.一種圖片顯示裝置，其特征在于，所述裝置包括: 操作接收模塊，用于接收對顯示焦點的移動操作； 檢測模塊，用于檢測所述移動操作的起始點是否處于被顯示的圖片所屬的顯示框內；圖片移動模塊，用于若所述檢測模塊的檢測結果為所述移動操作的起始點處于所述顯示框內，則根據所述圖片的尺寸、所述顯示框的尺寸以及所述顯示焦點的位移矢量移動所述圖片； 第一顯示模塊，用于顯示移動后的所述圖片處于所述顯示框內的部分。
9.根據權利要求8所述的裝置，其特征在于，所述圖片移動模塊，包括: 第一移動單元，用于當所述圖片的寬度大于所述顯示框的寬度，所述圖片的高度不大于所述顯示框的高度時，根據水平方向位移矢量移動所述圖片； 第二移動單元，用于當所述圖片的寬度不大于所述顯示框的寬度，所述圖片的高度大于所述顯示框的高度時，根據垂直方向位移矢量移動所述圖片； 第三移動單元，用于當所述圖片的寬度大于所述顯示框的寬度，所述圖片的高度大于所述顯示框的高度時，根據水平方向位移矢量和垂直方向位移矢量移動所述圖片； 其中，所述顯示焦點的位移矢量包括水平方向位移矢量和垂直方向位移矢量。
10.根據權利要求9所述的裝置，其特征在于，所述圖片移動模塊還包括: 位置保持單元，用于當所述圖片的寬度小于所述顯示框的寬度，所述圖片的高度小于所述顯示框的高度時，保持所述圖片在所述顯示框內的位置不變。
11.根據權利要求8所述的裝置，其特征在于，所述裝置還包括: 第二顯示模塊，用于在初始時刻時，將所述圖片居中顯示于所述顯示框內。
12.—種電子設備,其特征在于,所述電子設備包括: 一個或多個處理器； 存儲器；和 一個或多個模塊，所述一個或多個模塊存儲于所述存儲器中并被配置成由所述一個或多個處理器執(zhí)行，所述一個或多個模塊具有如下功能: 接收對顯示焦點的移動操作； 檢測所述移動操作的起始點是否處于被顯示的圖片所屬的顯示框內； 若檢測結果為所述移動操作的起始點處于所述顯示框內，則根據所述圖片的尺寸、所述顯示框的尺寸以及所述顯示焦點的位移矢量移動所述圖片； 顯示移動后的所述圖片處于 所述顯示框內的部分。
【文檔編號】G06F3/14GK103631493SQ201310533217
【公開日】2014年3月12日 申請日期:2013年10月31日 優(yōu)先權日:2013年10月31日
【發(fā)明者】任遠, 漆昱恒, 姚麗梅 申請人:小米科技有限責任公司