CN117991962A - Limiting image zooming and dragging method based on cloud platform - Google Patents

Abstract

The invention relates to a method for limiting image scaling and dragging based on a cloud platform, and belongs to the technical field of computer visual operation. The method comprises the following steps: s1, positioning an origin of a picture; s2, enabling the picture to be self-adaptive to the width and height of the view port, and taking the view port height value as a minimum zooming limiting value of the picture; s3, positioning the picture in the center of the view port; s4, triggering a mouse wheel event to execute limited zooming operation on the picture; s5, acquiring a coordinate point pressed by a mouse and a coordinate point after the mouse moves; s6, performing difference processing on the coordinate points after the mouse moves and the coordinate points when the mouse is pressed, obtaining the difference value of the two coordinate points and giving left and top attributes of the picture patterns; s7, calculating a width difference value and a height difference value of the pictures before and after zooming; s8, drag limiting is carried out based on the difference value of the two coordinate points acquired in the S6. According to the invention, through setting the limitation of positioning and zooming on the picture, the convenience and experience of picture operation are improved.

Description

Limiting image zooming and dragging method based on cloud platform

Technical Field

The invention relates to a method for limiting image scaling and dragging based on a cloud platform, and belongs to the technical field of computer visual operation.

Background

At present, informatization, intelligence and networking have become the signs of time development, and people have higher and higher aesthetic level and requirements while pursuing convenience of life. Based on this, the picture display function of the platform should be more comprehensive, convenient and beautiful to meet the needs and aesthetic requirements of the public.

At present, although the existing plug-in provided based on jQuery can realize the zooming and dragging functions of pictures, the zooming and dragging of the pictures are not provided with a limiting function, and in practice, the plug-in mainly has the following two defects:

1. When the picture is reduced to break through the minimum value, the picture can be inversely amplified due to lack of scaling limitation;

2. Since the drag restriction is not set for the picture in the viewport, when the picture is dragged, a problem often occurs that the picture is dragged out of the viewport, and the position where the picture is located cannot be determined.

In view of the above, the present invention proposes a method for limiting image scaling and dragging based on a cloud platform.

Disclosure of Invention

In order to solve the problems, the invention provides a method for limiting image scaling and dragging based on a cloud platform.

A method for limiting image scaling and dragging based on a cloud platform comprises the following steps:

S1, positioning an operation origin of a picture at the upper left corner of the picture;

s2, enabling the picture to be self-adaptive to the width and the height of the view port, taking the width and the height of the view port as minimum zoom limiting values of the picture, and obtaining the width w1 and the height h1 of the view port, wherein the width w1 and the height h1 of the view port are the width and the height of the picture before zooming;

S3, positioning the picture at the most center of the view port;

S4, responding to the sliding operation of the mouse wheel on the picture in the view port, and executing limited zooming operation on the picture by triggering a mouse wheel event;

s5, responding to the dragging operation of the mouse on the picture in the view port, and respectively acquiring coordinate points (xa, ya) of the pressed mouse and coordinate points (xb, xb) of the moved mouse;

S6, carrying out difference processing on coordinate points (xb, xb) after the mouse is moved and coordinate points (xa, ya) when the mouse is pressed, obtaining difference values (xc, yc) of the two coordinate points, and respectively giving the difference values (xc, yc) to left and top attributes of a picture pattern through setting $ (') css ({ "left": xc, "top": yc }), so as to position the picture;

S7, subtracting the width w2 of the zoomed picture from the width w1 of the picture before zooming, namely the width w1 of the viewport, so as to obtain a width difference value w3=w1-w 2 of the picture before zooming and the picture after zooming; subtracting the height h2 of the zoomed picture from the height h1 of the zoomed picture, namely the view port height, so as to obtain a height difference value h3=h1-h 2 of the zoomed picture;

S8, based on xc and yc obtained in the S6, the following judgment is made:

When xc < = 0 and xc > w3, positioning the picture at a position distant from the left frame xc pixel of the view port based on the operation origin point of the picture, so as to limit the dragging of the picture in the left-right direction of the view port, and prevent the picture from leaving the left-right frame boundary of the view port;

When yc < = 0 and yc > h3, the picture is positioned at a position away from the yc pixel of the upper frame of the view port based on the operation origin point of the picture, so that the dragging of the picture in the up-down direction of the view port is limited, and the picture cannot leave the upper and lower frame boundaries of the view port.

Further, in the step S2, by setting in css of the picture

Img { width:100%, min-height:100%, object-fit: contact }, adapting the picture to the width and height of the viewport, and taking the height value of the viewport as the minimum zoom limit value of the picture.

Further, the specific step of S4 includes:

S41, acquiring a receiving value "e" of an event return result object through a mouse wheel event $ (') on (mousewheel, function (e));

s42, based on the step value e.originalevent.wheel delta in the receiving value "e", a corresponding scaling multiple currentScale is calculated;

S43, assigning the obtained scaling multiple currentScale to transfrom attribute in the picture css, namely transfrom: scale (currentScale), realizing a zooming function of the picture, and obtaining a zoomed picture width w2 and a zoomed picture height h2;

And S44, when the picture is reduced to the minimum, namely, the picture is consistent with the width and height dimensions of the video port, no reduction event is executed.

According to the cloud platform-based image scaling and dragging limiting method, based on the image function of jQuery, the image cannot be dragged to a position away from the boundary of the viewport and cannot be infinitely reduced by setting positioning and scaling limits on the image. The picture is kept in the center of the view port all the time, the picture can be prevented from being infinitely reduced, lost, the convenience of watching the picture is improved, and the picture viewing device has a good impression experience effect.

Drawings

Fig. 1 is a schematic flow chart of a method for limiting image scaling and dragging based on a cloud platform according to the first embodiment.

Detailed Description

In order to clearly illustrate the technical features of the present solution, the present invention will be described in detail below with reference to the following detailed description and the accompanying drawings. The following disclosure provides many different embodiments for implementing different configurations of the invention. In order to simplify the present disclosure, components and arrangements of specific examples are described below. Furthermore, the present invention may repeat reference numerals and/or letters in the various examples. This repetition is for the purpose of simplicity and clarity and does not in itself dictate a relationship between the various embodiments and/or configurations discussed. It should be noted that the components illustrated in the figures are not necessarily drawn to scale. Descriptions of well-known components and processing techniques and processes are omitted so as to not unnecessarily obscure the present invention.

Example 1

A method for limiting image scaling and dragging based on a cloud platform comprises the following steps:

S1, origin positioning

Transfrom-origin is added to css (cascading style sheet) of the picture: 00 attribute, positioning the operation origin of the picture at the upper left corner of the picture, so that the mouse can zoom based on the upper left corner of the picture when zooming.

S2, initializing a minimum value of the picture

Set in css (cascading style sheet) of picture

Img { width:100%, min-height:100%, object-fit: contact } making the picture self-adapt to the width and height of the viewport, and taking the viewport height and viewport width as limiting values for picture shrinkage; and obtaining the width w1 and the height h1 of the viewport through parseInt ($ (', ') css (' width ')), parseInt ($ (') css (' width ')), wherein the width w1 and the height h1 of the viewport are the width and the height of the picture before zooming.

S3, initializing picture positioning

The picture is positioned in the most center of the viewport by setting $ (') css ({ "left": "0", "top": "0").

S4, scaling operation

When the mouse performs zooming operation on the picture in the view port, responding to the sliding of the mouse wheel on the picture in the view port, and executing the zooming operation with limitation on the picture by triggering a mouse wheel event:

S41, a mouse-over wheel event $ (') on (mousewheel, function (e) { }) acquires a receiving value "e" of an object of a return result of the event;

s42, based on the step value e.originalevent.wheel delta in the receiving value "e", a corresponding scaling multiple currentScale is calculated;

S43, assigning the obtained scaling multiple currentScale to transfrom attribute in the picture css, namely transfrom: scale (currentScale), realizing a zooming function of the picture, and obtaining a zoomed picture width w2 and a zoomed picture height h2;

s44, limiting the zooming of the picture when the picture is reduced to the minimum, namely, the picture is consistent with the width and the height of the video port, and not executing the reduction event.

S5, acquiring coordinate points before and after dragging

When the mouse performs drag operation on the picture in the view port, the system will obtain a coordinate point (xa, ya) of pressing the mouse by pressing the mouse event $ (') mousedown (); the coordinate point (xb, xb) after the mouse movement is obtained by the mouse movement event $ (') mousemove ().

S6, drawing and positioning

And performing difference processing on the coordinate points (xb, xb) after the mouse moves and the coordinate points (xa, ya) when the mouse is pressed to obtain difference values (xc, yc) of the two coordinate points, and respectively assigning the difference values (xc, yc) to the left and top attributes of the picture patterns by setting $ ('.+ -.)') css ({ left ": xc top": yc }), so as to position the picture.

S7, obtaining the difference before and after zooming

Subtracting the width w2 of the zoomed picture from the width w1 of the zoomed picture, namely the width of the viewport, so as to obtain a width difference value w3=w1-w 2 of the zoomed picture; subtracting the height h2 of the zoomed picture from the height h1 of the zoomed picture, namely the view port height, to obtain a height difference value h3=h1-h 2 of the zoomed picture.

S8, limiting drawing

Based on xc and yc acquired in S6, the following determination is made:

When xc < = 0 and xc > w3, positioning the picture at a position distant from the left frame xc pixel of the view port based on the operation origin point of the picture, so as to limit the dragging of the picture in the left-right direction of the view port, and prevent the picture from leaving the left-right frame boundary of the view port;

When yc < = 0 and yc > h3, the picture is positioned at a position away from the yc pixel of the upper frame of the view port based on the operation origin point of the picture, so that the dragging of the picture in the up-down direction of the view port is limited, and the picture cannot leave the upper and lower frame boundaries of the view port.

The specific operation code of S8 is as follows:

if（xc<= 0&&xc>w3）{

$(‘...’).css(‘left’,xc+’px’)

}else（yc<= 0&&yc>h3）{

$(‘...’).css(‘top’,yc+’px’)

} 。

Finally, it should be noted that: the above embodiments are only for illustrating the technical aspects of the present invention and not for limiting the same, and although the present invention has been described in detail with reference to the above embodiments, it should be understood by those of ordinary skill in the art that: modifications and equivalents may be made to the specific embodiments of the invention without departing from the spirit and scope of the invention, which is intended to be covered by the claims.

Claims (3)

1. A method for limiting image scaling and dragging based on a cloud platform is characterized by comprising the following steps:

S1, positioning an operation origin of a picture at the upper left corner of the picture;

s2, enabling the picture to be self-adaptive to the width and the height of the view port, taking the width and the height of the view port as minimum zoom limiting values of the picture, and obtaining the width w1 and the height h1 of the view port, wherein the width w1 and the height h1 of the view port are the width and the height of the picture before zooming;

S3, positioning the picture at the most center of the view port;

S4, responding to the sliding operation of the mouse wheel on the picture in the view port, and executing limited zooming operation on the picture by triggering a mouse wheel event;

s5, responding to the dragging operation of the mouse on the picture in the view port, and respectively acquiring coordinate points (xa, ya) of the pressed mouse and coordinate points (xb, xb) of the moved mouse;

S6, carrying out difference processing on coordinate points (xb, xb) after the mouse is moved and coordinate points (xa, ya) when the mouse is pressed, obtaining difference values (xc, yc) of the two coordinate points, and respectively giving the difference values (xc, yc) to left and top attributes of a picture pattern through setting $ (') css ({ "left": xc, "top": yc }), so as to position the picture;

S7, subtracting the width w2 of the zoomed picture from the width w1 of the picture before zooming, namely the width w1 of the viewport, so as to obtain a width difference value w3=w1-w 2 of the picture before zooming and the picture after zooming; subtracting the height h2 of the zoomed picture from the height h1 of the zoomed picture, namely the view port height, so as to obtain a height difference value h3=h1-h 2 of the zoomed picture;

S8, based on xc and yc obtained in the S6, the following judgment is made:

when xc < = 0 and xc > w3, positioning the picture at a position distant from the left frame xc pixel of the view port based on the operation origin point of the picture, so as to limit the dragging of the picture in the left-right direction of the view port, and prevent the picture from leaving the left-right frame boundary of the view port;

when yc < = 0 and yc > h3, the picture is positioned at a position away from the yc pixel of the upper frame of the view port based on the operation origin point of the picture, so that the dragging of the picture in the up-down direction of the view port is limited, and the picture cannot leave the upper and lower frame boundaries of the view port.

2. The method for restricting image zooming and dragging based on a cloud platform as claimed in claim 1, wherein in S2, by setting in css of a picture

Img { width:100%, min-height:100%, object-fit: contact }, adapting the picture to the width and height of the viewport, and taking the height value of the viewport as the minimum zoom limit value of the picture.

3. The method for restricting image zooming and dragging based on the cloud platform as claimed in claim 1, wherein the specific step of S4 includes:

S41, acquiring a receiving value "e" of an event return result object through a mouse wheel event $ (') on (mousewheel, function (e));

s42, based on the step value e.originalevent.wheel delta in the receiving value "e", a corresponding scaling multiple currentScale is calculated;

S43, assigning the obtained scaling multiple currentScale to transfrom attribute in the picture css, namely transfrom: scale (currentScale), realizing a zooming function of the picture, and obtaining a zoomed picture width w2 and a zoomed picture height h2;

And S44, when the picture is reduced to the minimum, namely, the picture is consistent with the width and height dimensions of the video port, no reduction event is executed.