JavaScript 放大镜组件：倍率计算与视窗尺寸逻辑

JavaScript 放大镜倍率计算原理

在开发 JavaScript 放大镜功能时，准确计算放大倍率是核心基础。

一个完整的放大镜交互结构中，涉及倍率关系的元素共有四个：原图、缩略图、镜片和视窗。镜片在缩略图上的覆盖区域，实际上对应着视窗对原图的展示范围，因此它们之间存在固定的比例关系。

倍率 = 原图尺寸 / 缩略图尺寸 = 视窗尺寸 / 镜片尺寸

通常情况下，放大倍率应大于或等于 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;
} 

镜片尺寸与视窗动态调整逻辑

原图和缩略图的尺寸是固定的。为了保持视觉体验的一致性并防止页面布局错乱，我们通常也会预设视窗的尺寸。因此，镜片的尺寸需要根据其他几个对象的参数计算得出。

镜片尺寸 = 缩略图尺寸 × 视窗尺寸 / 原图尺寸 = 缩略图尺寸 / 倍率

 
/** 
* 加载镜片的样式
* @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。由于原图高度仅为 180，视窗尺寸需随之调整为 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 方法，这是一个四舍五入取整方法。如果要你自己实现这个功能，你会如何处理？（提示：可参考计算机图形学关于线条走样的处理方法）