JavaScript 放大镜放大倍率和视窗尺寸

更新时间：2011年05月09日 23:32:57 作者：

对JavaScript 放大镜来说, 计算倍率必不可少.一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗.

对JavaScript 放大镜来说, 计算倍率必不可少.
一个完整的放大镜结构里, 与倍率扯上关系的一共有 4 个对象, 原图, 缩略图, 镜片和视窗. 镜片在缩略图上的覆盖位置, 其实就是视窗对原图的部分展示, 所以它们之间有如下关系.
倍率 = 原图/缩略图 = 视窗/镜片

javaScript,magnifier,multiple,viewport,glass,thumb
倍率一般大于等于 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. 此时镜片的尺寸仍须与视窗成正比.

javaScript,magnifier,multiple,viewport,glass,thumb

如果倍率小于 1, 又该如何显示?
将倍率设为 1, 镜片覆盖整个缩略图, 显示整个原图为视窗内容; 或者不作操作 (禁止放大镜效果).

javaScript,magnifier,multiple,viewport,glass,thumb

下面的代码用于获取视窗的尺寸.

复制代码代码如下:

 
/** 
* 返回视窗尺寸 
* @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 方法, 这是一个四舍五入取整方法, 如果要你自己实现这个功能, 你会如何处理? (提示: 可参考计算机图形学关于线条走样的处理方法)

您可能感兴趣的文章:

D3.js 从P元素的创建开始(显示可加载数据)
D3是一个基于数据操作的可视化js库，认识d3，就从最基础的显示可加载数据谈起,需要的朋友可以参考下
2014-10-10
JS实现微信弹出搜索框多条件查询功能
这篇文章主要介绍了JS实现微信弹出搜索框多条件查询功能的实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
2016-12-12
TypeScript条件类型与内置条件类型超详细讲解
我们可以使用TypeScript中的条件类型来根据逻辑定义某些类型，就像是在编写代码那样。它采用的语法和我们在JavaScript中熟悉的三元运算符很像：condition ? ifConditionTrue : ifConditionFalse。我们来看看他是怎么工作的
2023-03-03
JavaScript数组Array对象增加和删除元素方法总结
这篇文章主要介绍了JavaScript数组Array对象增加和删除元素方法,实例总结了pop方法、push方法、splice方法、concat方法等的使用技巧,需要的朋友可以参考下
2015-01-01
简单了解JavaScript中的new Function
这篇文章主要介绍了简单了解JavaScript中的new Function，文章通过围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下
2022-09-09
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
取得ie 里面自定义函数或者属性的集合使用RuntimeObject()实现，需要的朋友可以参考下。
2010-11-11
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
今天小编就为大家分享一篇bootstrap模态框弹出和隐藏,动态改变中间内容的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
用js的for循环获取radio选中的值
获取radio选中值的方法有很多，在本文为大家介绍的是使用for循环来实现，具体的实现如下，感兴趣的朋友可以参考下
2013-10-10
js提取中文拼音首字母的封装工具类
这篇文章主要给大家介绍了关于利用js实现的一个提取中文拼音首字母的封装工具类，文中给出了详细完整的示例代码，对大家的学习或者工作具有一定的参考学习价值，需要的朋友可以直接拿来用，下面随着小编来一起学习学习吧。
2018-03-03
javascript实现避免页面按钮重复提交
很多时候我们都需要防止重复提交,这方面的文章也比较多,实现的途径差别也很大.因为有些时候即使服务器能够识别重复的提交,也会造成问题.比如需要很长等待时间的操作,在首次提交后,不断重复提交,页面可能会死掉.用脚本来控制的话可以防止这种问题.
2015-01-01