JavaScript 放大鏡 放大倍率和視窗尺寸

對JavaScript 放大鏡來說, 計算倍率必不可少.
一個完整的放大鏡結構裡, 與倍率扯上關係的一共有 4 個對象, 原圖, 縮圖, 鏡片和視窗. 鏡片在縮圖上的覆蓋位置, 其實就是視窗對原圖的部分展示, 所以它們之間有如下關係.
倍率 = 原圖/縮圖 = 視窗/鏡片

倍率一般大於等於 1, 因為原圖一般都不會小於縮圖. 一旦倍率小於 1, 則將倍率設為 1.
因為縮圖和原圖的尺寸是不可變的, 所以我們通過它們來獲得倍率.

複製代碼 代碼如下:/**
* 擷取放大鏡放大倍數
* @param thumb 縮圖對象
* @param glass 鏡片對象
* @return 放大鏡放大倍數
*/
function getMultiple(thumb, glass) {
var multiple = {
horizontal:0,
vertical:0
};

var thumbSize = getSize(thumb);
var imageSize = getImageSize(image);

multiple.horizontal = imageSize.width / thumbSize.width;
if(multiple.horizontal <= 1) {
multiple.horizontal = 1;
}

multiple.vertical = imageSize.height / thumbSize.height;
if(multiple.vertical <= 1) {
multiple.vertical = 1;
}

return multiple;
}

原圖和縮圖是固定的. 而為了統一視覺感官和防止破頁, 我們一般也會指定視窗的尺寸, 所以鏡片的尺寸是根據其他幾個對象計算出來的.
鏡片 = 縮圖x視窗/原圖 = 縮圖/倍率 複製代碼 代碼如下:/**
* 載入鏡片的樣式
* @param viewportSize 視窗尺寸
* @param multiple 倍率
* @param glass 鏡片對象
*/
function loadGlassStyle(viewportSize, multiple, glass) {
glass.style.width = round(viewportSize.width / multiple.horizontal) + 'px';
glass.style.height = round(viewportSize.height / multiple.vertical) + 'px';
}

如果定義的視窗的寬或高比原圖還要小, 那該如何顯示?
需要改變視窗的尺寸. 假設原圖是 240x180, 視窗原定尺寸是 200x200. 視窗尺寸隨之改變為 200x180. 此時鏡片的尺寸仍須與視窗成正比.

如果倍率小於 1, 又該如何顯示?
將倍率設為 1, 鏡片覆蓋整個縮圖, 顯示整個原圖為視窗內容; 或者不作操作 (禁止放大鏡效果).

下面的代碼用於擷取視窗的尺寸.

複製代碼 代碼如下:/**
* 返回視窗尺寸
* @param multiple 倍率
* @param image 原圖對象
* @return 視窗尺寸
*/
getViewportSize: function(multiple, image) {
var dimension = {
width:0,
height:0
};

// 如果倍率小於 1 或者視窗比原圖還寬, 寬度設為跟原圖一致, 否則去設定寬度
if(multiple.horizontal <= 1 || config.viewportSize[0] > image.width) {
dimension.width = image.width;
} else {
dimension.width = config.viewportSize[0];
}

// 如果倍率小於 1 或者視窗比原圖還高, 高度設為跟原圖一致, 否則去設定高度
if(multiple.vertical <= 1 || config.viewportSize[1] > image.height) {
dimension.height = image.height;
} else {
dimension.height = config.viewportSize[1];
}

return dimension;
}

上節《JavaScript 放大鏡- 移動鏡片》我們實現了鏡片在縮圖上的移動效果, 並留下習題:"當鏡片帶邊框時, 如何保證邊框不影響鏡片移動時的精確度?"
為了防止鏡片受邊框影響位移, 可以通過為鏡片對象設定與邊框寬度一樣的負 margin 值來消除位移.

本節沒有 DEMO, 但對後面幾講來說十分重要, 請同學們搞清楚正常和異常情況下的比例換算.
同樣留個課後思考題, 本文的代碼中出現了 round 方法, 這是一個四捨五入取整方法, 如果要你自己實現這個功能, 你會如何處理? (提示: 可參考電腦圖形學關於線條走樣的處理方法)