The computational magnification is essential for JavaScript Magnifier.
In a complete magnifying glass structure, a total of 4 objects, original images, thumbnails, lenses, and windows are linked to the magnification. The position of the lens in the thumbnail is actually the display of the window to the original image, so they have the following relationship.
magnification = Original image/thumbnail = window/lens
The magnification is generally greater than or equal to 1, because the original image is generally not smaller than the thumbnail. Once the magnification is less than 1, the magnification is set to 1.
Because the size of the thumbnail and the original image is immutable, we get the magnification by using them.
Copy Code code as follows:
/**
* Get Magnifier magnification
* @param thumb thumbnail objects
* @param Glass Lens Object
* @return Magnifier magnification
*/
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;
}
The original artwork and thumbnail are fixed. In order to unify the visual senses and prevent broken pages, we usually specify the size of the window, so the size of the lens is calculated from several other objects.
Lens = thumbnail X Window/Original image = thumbnail/magnification
Copy Code code as follows:
/**
* Load the style of the lens
* @param viewportsize window size
* @param multiple magnification
* @param Glass Lens Object
*/
function Loadglassstyle (viewportsize, multiple, glass) {
Glass.style.width = Round (viewportsize.width/multiple.horizontal) + ' px ';
Glass.style.height = Round (viewportsize.height/multiple.vertical) + ' px ';
}
If the defined window is wider or taller than the original, how do you show it?
You need to change the size of the window. Assuming the original is 240x180, the window is 200x200. The size of the window changes to 200x180. At this point the size of the lens still has to be proportional to the window.
If the magnification is less than 1, how to display?
The magnification is set to 1, the lens covers the entire thumbnail, showing the entire original image as the window content; or no action (no Magnifier effect).
The following code is used to get the dimensions of the window.
Copy Code code as follows:
/**
* Return to Window size
* @param multiple magnification
* @param image Artwork Object
* @return Window Size
*/
Getviewportsize:function (multiple, image) {
var dimension = {
width:0,
height:0
};
If the magnification is less than 1 or the window is wider than the original, the width is set to match the original, otherwise set the width
if (multiple.horizontal <= 1 | | config.viewportsize[0] > Image.width) {
Dimension.width = Image.width;
} else {
Dimension.width = config.viewportsize[0];
}
If the magnification is less than 1 or the window is higher than the original, height is set to match the original, otherwise set the height
if (multiple.vertical <= 1 | | config.viewportsize[1] > Image.height) {
Dimension.height = Image.height;
} else {
Dimension.height = config.viewportsize[1];
}
return dimension;
}
JavaScript Magnifier-Moving lenses in the last section we achieved the movement of the lens on the thumbnail and left the exercise: "When the lens is framed, how do I ensure that the border does not affect the accuracy of the lens when it moves?"
To prevent the lens from being offset by the border, you can eliminate the offset by setting a negative margin value that is the same as the border width for the lens object.
There is no DEMO in this section, but it is very important for the next few, please understand the normal and abnormal situation of the proportional conversion.
Also leave a class after study questions, this article in the code of the round method, this is a rounded rounding method, if you want to implement this function, how would you deal with it? (Hint: can refer to computer graphics about line aliasing processing method)
