JavaScript magnifier magnification and window size

For JavaScript magnifiers, the computing rate is essential.
In a complete magnifier structure, there are a total of four objects related to the magnification, the source image, the thumbnail, the lens and the window. the lens's coverage on the thumbnail is actually the display of the source image by the window, so there is a relationship between them as follows.
Magnification = source image/thumbnail = Window/Lens

The magnification is generally greater than or equal to 1, because the source 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 source image is immutable, we can use them to obtain the magnification.
Copy codeThe Code is as follows:
/**
* Obtain the magnification of a magnifier.
* @ Param thumb thumbnail object
* @ Param glass: Lens object
* @ Return magnifiers 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 source image and thumbnail are fixed. to unify the visual senses and prevent page breaking, we usually specify the size of the window. Therefore, the lens size is calculated based on several other objects.
Lens = thumbnail x Window/source image = thumbnail/rate
Copy codeThe Code is as follows:
/**
* Loading the lens Style
* @ Param viewportSize window size
* @ Param multiple Rate
* @ 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 width or height ratio of the defined window is smaller than that of the source image, how should we display it?
You need to change the size of the window. Assume that the source image is 240x180 and the original size of the window is 200x200. The size of the window is changed to 200x180. At this time, the lens size must be proportional to the size of the window.

What should I do if the magnification is less than 1?
Set the magnification to 1. The lens will overwrite the entire thumbnail and the entire source image will be displayed as the window content. Or, do not perform the operation (prohibit the magnifier effect ).

The following code is used to obtain the size of a window.
Copy codeThe Code is as follows:
/**
* Return window size
* @ Param multiple Rate
* @ Param image: source image 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 source image, set the width to the same as that of the source image. 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 source image, set the height to the same as that of the source image. 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;
}

In the previous section "JavaScript magnifiers-mobile lenses", we implemented the lens moving effect on the thumbnail and left exercises: "When the lens has a border, how can we ensure that the frame does not affect the accuracy of lens movement? "
To prevent the lens offset from being affected by the border, you can set a negative margin value that is the same as the Border width for the lens object to eliminate the offset.

There is no DEMO in this section, but it is very important for the next few lectures. Ask the students to figure out the ratio conversion in normal and abnormal situations.
I also leave a question after class. The round method appears in the code in this article. This is a rounding method. If you want to implement this function by yourself, what will you do? (Tip: refer to the processing method of line samples in computer graphics)