JavaScript 放大镜 放大倍率和视窗尺寸_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 multiple.horizontal = 1;
}

multiple.vertical = imageSize.height / thumbSize.height;
if(multiple.vertical 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 image.width) {
dimension.width = image.width;
} else {
dimension.width = config.viewportSize[0];
}

// 如果倍率小于 1 或者视窗比原图还高, 高度设为跟原图一致, 否则去设定高度
if(multiple.vertical image.height) {
dimension.height = image.height;
} else {
dimension.height = config.viewportSize[1];
}

return dimension;
}

上节《JavaScript 放大镜- 移动镜片》我们实现了镜片在缩略图上的移动效果, 并留下习题:"当镜片带边框时, 如何保证边框不影响镜片移动时的精确度?"
为了防止镜片受边框影响偏移, 可以通过为镜片对象设定与边框宽度一样的负 margin 值来消除偏移.

本节没有 DEMO, 但对后面几讲来说十分重要, 请同学们搞清楚正常和异常情况下的比例换算.
同样留个课后思考题, 本文的代码中出现了 round 方法, 这是一个四舍五入取整方法, 如果要你自己实现这个功能, 你会如何处理? (提示: 可参考计算机图形学关于线条走样的处理方法)