快捷導(dǎo)航

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

更新時(shí)間：2011年05月09日 23:32:57 作者：

對(duì)JavaScript 放大鏡來說, 計(jì)算倍率必不可少.一個(gè)完整的放大鏡結(jié)構(gòu)里, 與倍率扯上關(guān)系的一共有 4 個(gè)對(duì)象, 原圖, 縮略圖, 鏡片和視窗.

對(duì)JavaScript 放大鏡來說, 計(jì)算倍率必不可少.
一個(gè)完整的放大鏡結(jié)構(gòu)里, 與倍率扯上關(guān)系的一共有 4 個(gè)對(duì)象, 原圖, 縮略圖, 鏡片和視窗. 鏡片在縮略圖上的覆蓋位置, 其實(shí)就是視窗對(duì)原圖的部分展示, 所以它們之間有如下關(guān)系.
倍率 = 原圖/縮略圖 = 視窗/鏡片

javaScript,magnifier,multiple,viewport,glass,thumb
倍率一般大于等于 1, 因?yàn)樵瓐D一般都不會(huì)小于縮略圖. 一旦倍率小于 1, 則將倍率設(shè)為 1.
因?yàn)榭s略圖和原圖的尺寸是不可變的, 所以我們通過它們來獲得倍率.

復(fù)制代碼代碼如下:

 
/** 
* 獲取放大鏡放大倍數(shù) 
* @param thumb 縮略圖對(duì)象 
* @param glass 鏡片對(duì)象 
* @return 放大鏡放大倍數(shù) 
*/ 
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; 
} 

原圖和縮略圖是固定的. 而為了統(tǒng)一視覺感官和防止破頁, 我們一般也會(huì)指定視窗的尺寸, 所以鏡片的尺寸是根據(jù)其他幾個(gè)對(duì)象計(jì)算出來的.
鏡片 = 縮略圖x視窗/原圖 = 縮略圖/倍率

復(fù)制代碼代碼如下:

 
/** 
* 加載鏡片的樣式 
* @param viewportSize 視窗尺寸 
* @param multiple 倍率 
* @param glass 鏡片對(duì)象 
*/ 
function loadGlassStyle(viewportSize, multiple, glass) { 
glass.style.width = round(viewportSize.width / multiple.horizontal) + 'px'; 
glass.style.height = round(viewportSize.height / multiple.vertical) + 'px'; 
} 

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

javaScript,magnifier,multiple,viewport,glass,thumb

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

javaScript,magnifier,multiple,viewport,glass,thumb

下面的代碼用于獲取視窗的尺寸.

復(fù)制代碼代碼如下:

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

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

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

return dimension; 
} 

上節(jié)《JavaScript 放大鏡- 移動(dòng)鏡片》我們實(shí)現(xiàn)了鏡片在縮略圖上的移動(dòng)效果, 并留下習(xí)題:"當(dāng)鏡片帶邊框時(shí), 如何保證邊框不影響鏡片移動(dòng)時(shí)的精確度?"
為了防止鏡片受邊框影響偏移, 可以通過為鏡片對(duì)象設(shè)定與邊框?qū)挾纫粯拥呢?fù) margin 值來消除偏移.

本節(jié)沒有 DEMO, 但對(duì)后面幾講來說十分重要, 請(qǐng)同學(xué)們搞清楚正常和異常情況下的比例換算.
同樣留個(gè)課后思考題, 本文的代碼中出現(xiàn)了 round 方法, 這是一個(gè)四舍五入取整方法, 如果要你自己實(shí)現(xiàn)這個(gè)功能, 你會(huì)如何處理? (提示: 可參考計(jì)算機(jī)圖形學(xué)關(guān)于線條走樣的處理方法)

您可能感興趣的文章: