JavaScript Picture Magnifier (drag and drop, zoom effect) Page 2/4

【Scaling Program】

The principle is also very simple, set the scaling object style according to the mouse coordinates.
In addition to setting width and height, you also need to set left and top for the scaling on the top and left. For details, please refer to the code.

What is more important about the program is structural design, because there are eight directions and are divided into ordinary and proportional scaling.
Try to capture the reusable parts, otherwise the complexity of the program can be imagined.
In order to improve the reuse of functions in the program, I have made the following design:
1. Suppose a _fun program stores the program to be executed during the scaling process (a bit like a delegate);
2. Calculate the initial values ​​of the four styles, modify these initial values ​​by the scaling function, and finally reset all styles (not modified as needed to reduce complexity);
3. For ordinary scaling, programs that only require four directions are enough. For example, the lower right direction can be replaced by executing the right and lower programs;
4. Four correction programs were extracted based on the reusable parts of the scaled program and the ordinary scaling program (partial program efficiency was exchanged for);

Here are the more useful parts of the program:

【Edge width acquisition】

As height and width modifications are involved, acquisition of border width is essential.
Because the width or height obtained with offset includes the border width, the width and height in style do not include the border width.
Therefore, when setting the style, the border width must be subtracted based on the width or height obtained by offset.

So how to get the border width?
The intuitive way is to get it through parseInt(), but this is wrong,
Because this way, you can only get the style set in style, but you can't get the style set in class.

To get the final style (actual style), you can use currentStyle in ie, use (object, null) in ff,
Then you can get the border width using the following program:

【Scaling】

The principle of proportional scaling is also very simple. Based on the original scaling, set the height and width in proportion.
For example, the scale scaling in the lower right is to set the normal scaling on the right to get the width.
After obtaining the height according to the proportion, the following correction procedure is executed once.
Since the height may have changed after being corrected at this time, the correction procedure on the right needs to be executed again.

This scaling is based on width priority, and there will be a better experience for the upper and lower points with height priority.
For example, for the above point, you can:

For the four points up, down, left and right, a better experience is of course to scale with that point as the center.
If you are interested, you can do this and write four more correction procedures to correspond to these points.

For the minimum limit and scope limit, you can refer to the code in the correction program.
The program also uses release selection and mouse capture similar to drag and drop.

【Mouse Capture Supplement】

setCapture solves the problem of mouse capture in ie, but there are still problems with mouse capture under ff.
When there is no text content inside the layer, ie capture is normal, but ff capture will fail when dragging and dropping outside the browser.
The temporary solution is only to insert text, for example:
= "<font size='1px'>&nbsp;</font>";
If you have a better solution, please remember to notify me.