一個完整的放大鏡結構裡, 與倍率扯上關系的一共有 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 方法, 這是一個四捨五入取整方法, 如果要你自己實現這個功能, 你會如何處理? (提示: 可參考計算機圖形學關於線條走樣的處理方法)