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


Posted in Javascript onMay 09, 2011

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

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; 
}

 原图和缩略图是固定的. 而为了统一视觉感官和防止破页, 我们一般也会指定视窗的尺寸, 所以镜片的尺寸是根据其他几个对象计算出来的.
镜片 = 缩略图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 放大镜 放大倍率和视窗尺寸

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

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

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

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

Javascript 相关文章推荐
JavaScript几种形式的树结构菜单
May 10 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
Oct 29 Javascript
原生js实现可拖拽效果
Feb 28 Javascript
浅谈JS中的常用选择器及属性、方法的调用
Jul 28 Javascript
深入理解React高阶组件
Sep 28 Javascript
Vue.js路由实现选项卡简单实例
Jul 24 Javascript
vue 框架下自定义滚动条(easyscroll)实现方法
Aug 29 Javascript
vue 解决文本框被键盘遮住的问题
Nov 06 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
原生JavaScript实现留言板
Jan 10 Javascript
关于JavaScript的with 语句的使用方法
May 09 #Javascript
JavaScript的parseInt 取整使用
May 09 #Javascript
实现变速回到顶部的JavaScript代码
May 09 #Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
May 09 #Javascript
Chrome Form多次提交表单问题的解决方法
May 09 #Javascript
JQuery将文本转化成JSON对象需要注意的问题
May 09 #Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
May 07 #Javascript
You might like
ThinkPHP实现将SESSION存入MYSQL的方法
2014/07/22 PHP
destoon供应信息title调用出公司名称的方法
2014/08/22 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
jQuery下通过$.browser来判断浏览器.
2011/04/05 Javascript
js禁止小键盘输入数字功能代码
2011/08/01 Javascript
js动态添加onload、onresize、onscroll事件(另类方法)
2012/12/26 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
JS实现侧悬浮浮动实例代码
2013/11/29 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
2016/11/30 Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
2017/05/02 Javascript
JS动态添加元素及绑定事件造成程序重复执行解决
2017/12/07 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
在vue中获取token,并将token写进header的方法
2018/09/26 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
Javascript表单序列化原理及实现代码详解
2020/10/30 Javascript
python中matplotlib的颜色及线条控制的示例
2018/03/16 Python
python 移除字符串尾部的数字方法
2018/07/17 Python
python使用xlsxwriter实现有向无环图到Excel的转换
2018/12/12 Python
pyenv与virtualenv安装实现python多版本多项目管理
2019/08/17 Python
python numpy 常用随机数的产生方法的实现
2019/08/21 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
vscode+PyQt5安装详解步骤
2020/08/12 Python
python 中关于pycharm选择运行环境的问题
2020/10/31 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
PHP开发工程师面试问题集锦
2012/11/01 面试题
大学活动邀请函
2014/01/28 职场文书
村容村貌整治方案
2014/05/21 职场文书
年检委托书
2014/08/30 职场文书
《折线统计图》教学反思
2016/02/22 职场文书
python编写函数注意事项总结
2021/03/29 Python
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server