JavaScript 放大鏡 放大倍率和視窗尺寸
更新時間：2011年05月09日 23:32:57 作者：
對JavaScript 放大鏡來說, 計算倍率必不可少.一個完整的放大鏡結構里, 與倍率扯上關系的一共有 4 個對象, 原圖, 縮略圖, 鏡片和視窗.
對JavaScript 放大鏡來說, 計算倍率必不可少.
一個完整的放大鏡結構里, 與倍率扯上關系的一共有 4 個對象, 原圖, 縮略圖, 鏡片和視窗. 鏡片在縮略圖上的覆蓋位置, 其實就是視窗對原圖的部分展示, 所以它們之間有如下關系.
倍率 = 原圖/縮略圖 = 視窗/鏡片
/**
* 獲取放大鏡放大倍數(shù)
* @param thumb 縮略圖對象
* @param glass 鏡片對象
* @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)一視覺感官和防止破頁, 我們一般也會指定視窗的尺寸, 所以鏡片的尺寸是根據(jù)其他幾個對象計算出來的.
鏡片 = 縮略圖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';
}
/**
* 返回視窗尺寸
* @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;
}
上節(jié)《JavaScript 放大鏡- 移動鏡片》我們實現(xiàn)了鏡片在縮略圖上的移動效果, 并留下習題:"當鏡片帶邊框時, 如何保證邊框不影響鏡片移動時的精確度?"
為了防止鏡片受邊框影響偏移, 可以通過為鏡片對象設定與邊框?qū)挾纫粯拥呢?margin 值來消除偏移.
本節(jié)沒有 DEMO, 但對后面幾講來說十分重要, 請同學們搞清楚正常和異常情況下的比例換算.
同樣留個課后思考題, 本文的代碼中出現(xiàn)了 round 方法, 這是一個四舍五入取整方法, 如果要你自己實現(xiàn)這個功能, 你會如何處理? (提示: 可參考計算機圖形學關于線條走樣的處理方法)
一個完整的放大鏡結構里, 與倍率扯上關系的一共有 4 個對象, 原圖, 縮略圖, 鏡片和視窗. 鏡片在縮略圖上的覆蓋位置, 其實就是視窗對原圖的部分展示, 所以它們之間有如下關系.
倍率 = 原圖/縮略圖 = 視窗/鏡片
倍率一般大于等于 1, 因為原圖一般都不會小于縮略圖. 一旦倍率小于 1, 則將倍率設為 1.
因為縮略圖和原圖的尺寸是不可變的, 所以我們通過它們來獲得倍率.
復制代碼 代碼如下:
/**
* 獲取放大鏡放大倍數(shù)
* @param thumb 縮略圖對象
* @param glass 鏡片對象
* @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)一視覺感官和防止破頁, 我們一般也會指定視窗的尺寸, 所以鏡片的尺寸是根據(jù)其他幾個對象計算出來的.
鏡片 = 縮略圖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. 視窗尺寸隨之改變?yōu)?200x180. 此時鏡片的尺寸仍須與視窗成正比.
如果倍率小于 1, 又該如何顯示?
將倍率設為 1, 鏡片覆蓋整個縮略圖, 顯示整個原圖為視窗內(nèi)容; 或者不作操作 (禁止放大鏡效果).
下面的代碼用于獲取視窗的尺寸.
復制代碼 代碼如下:
/**
* 返回視窗尺寸
* @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;
}
上節(jié)《JavaScript 放大鏡- 移動鏡片》我們實現(xiàn)了鏡片在縮略圖上的移動效果, 并留下習題:"當鏡片帶邊框時, 如何保證邊框不影響鏡片移動時的精確度?"
為了防止鏡片受邊框影響偏移, 可以通過為鏡片對象設定與邊框?qū)挾纫粯拥呢?margin 值來消除偏移.
本節(jié)沒有 DEMO, 但對后面幾講來說十分重要, 請同學們搞清楚正常和異常情況下的比例換算.
同樣留個課后思考題, 本文的代碼中出現(xiàn)了 round 方法, 這是一個四舍五入取整方法, 如果要你自己實現(xiàn)這個功能, 你會如何處理? (提示: 可參考計算機圖形學關于線條走樣的處理方法)
相關文章
破解Session cookie的方法...2006-07-07
基于aotu.js實現(xiàn)微信自動添加通訊錄中的聯(lián)系人功能
這篇文章主要介紹了利用aotu.js實現(xiàn)微信自動添加通訊錄中的聯(lián)系人,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
js調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法
下面小編就為大家?guī)硪黄猨s調(diào)用父框架函數(shù)與彈窗調(diào)用父頁面函數(shù)的簡單方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
如何使用TypeScript實現(xiàn)一個瀏覽器事件的集中管理
這篇文章主要介紹了使用TypeScript實現(xiàn)一個瀏覽器事件的集中管理,瀏覽器事件模型的主要優(yōu)點是它可以使開發(fā)人員更加靈活地處理用戶交互，并且可以通過事件委托等技術來提高性能，本文給大家講解的非常詳細，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了ES6擴展運算符的用途 ,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-08-08
這篇文章主要介紹了關于微信上網(wǎng)頁圖片點擊全屏放大效果的相關資料,需要的朋友可以參考下2016-12-12
微信小程序?qū)崿F(xiàn)藍牙設備搜索及連接功能示例詳解
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)藍牙設備搜索及連接功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了微信小程序判斷用戶是否需要再次授權獲取個人信息,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了禁用JavaScript控制臺調(diào)試的方法,需要的朋友可以參考下2014-03-03
純屬技術交流，在實際應用中不建議那么做。建議js加載比較好。2009-08-08