Heim >Web-Frontend >js-Tutorial >JavaScript 放大镜 放大倍率和视窗尺寸_javascript技巧

JavaScript 放大镜 放大倍率和视窗尺寸_javascript技巧

WBOY
WBOYOriginal
2016-05-16 18:06:581677Durchsuche

对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 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. 此时镜片的尺寸仍须与视窗成正比.

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 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 方法, 这是一个四舍五入取整方法, 如果要你自己实现这个功能, 你会如何处理? (提示: 可参考计算机图形学关于线条走样的处理方法)
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn