CN102110149A - Method, device and system for realizing multi-picture rotation on webpage - Google Patents
Method, device and system for realizing multi-picture rotation on webpage Download PDFInfo
- Publication number
- CN102110149A CN102110149A CN 201110040167 CN201110040167A CN102110149A CN 102110149 A CN102110149 A CN 102110149A CN 201110040167 CN201110040167 CN 201110040167 CN 201110040167 A CN201110040167 A CN 201110040167A CN 102110149 A CN102110149 A CN 102110149A
- Authority
- CN
- China
- Prior art keywords
- pictures
- webpage
- rotation
- rotations
- reference point
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
- Editing Of Facsimile Originals (AREA)
Abstract
The invention discloses a method, device and system for realizing multi-picture rotation on a webpage. The method comprises the following steps: determining the initial position of each picture in multiple selected pictures on the webpage; determining an operation control boundary; determining an operation datum point; obtaining the rotation angle of the operation control boundary relative to the operation datum point; for each picture in the multiple pictures, respectively determining a target position; and associating the target position, the initial position of each picture and the operation control boundary relative to the rotation angle of the datum point. According to the invention, the multiple pictures can be rotated in a simple mode, and simultaneously the layer relationship of the picture can be maintained.
Description
Technical field
The present invention relates to a kind of method, Apparatus and system of on webpage, realizing many figure rotations.
Background technology
Computer Image Processing is a kind of widely used technology, and in internet, applications, the demand of image processing techniques is also increasing.The user of browsing page often needs the picture on the webpage is carried out real-time modification, processing etc., for example at online shopping site, the user wishes to see the arranging effect of the many dress ornaments that oneself is bought, and just the picture of each part dress ornament need be carried out operations such as convergent-divergent, rotation.Yet, different with general image processing software, realize that on webpage the operational resource of Flame Image Process is very limited, browser is only arranged basically, so the internal memory that requires implementation method to take is little, the real-time height of Flame Image Process, and, thereby also need to guarantee compatibility to multiple browser because the Flame Image Process storehouse of different browsers support also is not quite similar.
Web page image treatment technology of the prior art can be realized the image processing function that some are basic, as the amplification of individual picture, dwindle, rotation etc., but the rotary manipulation of geometric operation, the especially plurality of pictures of plurality of pictures is also existed variety of issue.The convergent-divergent of convergent-divergent, rotation and the plurality of pictures of individual picture can be realized as more existing webpages, but the rotation of plurality of pictures can't be realized.
Realize a kind of comparatively directly method of many figure rotations in the prior art, be that the plurality of pictures that needs are rotated is added a new DOM Document Object Model (DOM, Document Object Model) in the node, in CSS (cascading style sheet) (CSS, Cascading Style Sheet), this DOM node that comprises plurality of pictures is rotated then.Yet, adopting said method, the plurality of pictures that adds same DOM node will be positioned at same figure layer all the time, promptly be positioned on the webpage below or top that other do not need the picture that rotates simultaneously, and the figure layer upper and lower relation between each picture before can't keeping rotating.
Summary of the invention
The problem that the present invention solves is that prior art realizes that on webpage the method for many figure rotations can't keep the figure ATM layer relationsATM of picture.
For addressing the above problem, the invention provides a kind of method that on webpage, realizes many figure rotations, comprising:
Determine the initial position of each pictures in the plurality of pictures selected on the webpage;
Determine the operational controls border;
Determine the operation reference point;
Obtain the anglec of rotation of described operational controls borderline phase for described operation reference point;
For each pictures in the described plurality of pictures, determine its target location respectively; The initial position of described target location and each pictures and described operational controls borderline phase are associated for the anglec of rotation of described reference point.
Alternatively, described definite respectively its target location comprises: the initial position with each pictures in the described plurality of pictures rotates the described anglec of rotation with respect to described reference point respectively, to obtain its target location.
Alternatively, have at least one to be positioned at different figure layers in the described plurality of pictures with other pictures.
Alternatively, described operational controls border and operation reference point and described selected plurality of pictures are arranged in same webpage.
Alternatively, described operational controls border is for surrounding the minimum rectangle of described plurality of pictures.
Alternatively, described reference point is the center of described minimum rectangle.
Alternatively, the initial position of each pictures comprises the initial position at center of each pictures and this picture initial rotation angle degree with respect to its center in the described plurality of pictures.
Alternatively, the target location of each pictures comprises the target location at center of each pictures and this picture target anglec of rotation with respect to its center in the described plurality of pictures.
Alternatively, described definite respectively its target location comprises: the initial position with the center of each pictures in the described plurality of pictures rotates the described anglec of rotation with respect to described reference point respectively, to obtain the target location at its center.
Alternatively, describedly determine that respectively its target location comprises: with each pictures in the described plurality of pictures with respect to the anglec of rotation addition of the initial rotation angle degree at its center and described operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center for described reference point.
Alternatively, describedly obtain described operational controls borderline phase and comprise for the anglec of rotation of described operation reference point:
Described operational controls border is shown as newly-built DOM Document Object Model node;
Determine described operational controls border to be rotated the point of rotation of operation for the user;
Based on user's operation, determine the anglec of rotation of the described point of rotation with respect to described operation reference point.
Alternatively, the described methods of many figure rotations that realize on webpage also comprise: the target location of each pictures in the described plurality of pictures is updated in the CSS (cascading style sheet) shows.
Alternatively, described selected plurality of pictures is selected from the exterior artwork storehouse by the user and is obtained.
The present invention also provides a kind of device of realizing many figure rotations on webpage, comprising:
First determining unit is suitable for determining the initial position of each pictures in the plurality of pictures selected on the webpage;
Second determining unit is suitable for determining the operational controls border;
The 3rd determining unit is suitable for determining the operation reference point;
The angle acquiring unit is suitable for obtaining the anglec of rotation of described operational controls borderline phase for described operation reference point;
The 4th determining unit is suitable for for each pictures in the described plurality of pictures, determines its target location respectively, and the initial position of described target location and each pictures and described operational controls borderline phase are associated for the anglec of rotation of described reference point.
Alternatively, described the 4th determining unit is suitable for respectively the initial position of each pictures in the described plurality of pictures is rotated the described anglec of rotation with respect to described reference point, to obtain its target location.
Alternatively, described operational controls border and operation reference point and described selected plurality of pictures are arranged in same webpage.
Alternatively, described operational controls border is for surrounding the minimum rectangle of described plurality of pictures.
Alternatively, described reference point is the center of described minimum rectangle.
Alternatively, described first determining unit is suitable for determining the initial position and the initial rotation angle degree of this picture with respect to its center at the center of each pictures in the plurality of pictures selected on the webpage.
Alternatively, described the 4th determining unit is suitable for the target location of each pictures in the plurality of pictures and comprises the target location at center of each pictures and this picture target anglec of rotation with respect to its center.
Alternatively, described the 4th determining unit is suitable for the initial position at the center of each pictures in the described plurality of pictures is rotated the described anglec of rotation with respect to described reference point, to obtain the target location at its center.
Alternatively, described the 4th determining unit is suitable for each pictures in the described plurality of pictures with respect to the anglec of rotation addition for described reference point of the initial rotation angle degree at its center and described operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center.
Alternatively, described angle acquiring unit comprises:
DOM Document Object Model node creating unit is suitable for described operational controls border is shown as newly-built DOM Document Object Model node;
Point of rotation determining unit is suitable for determining to supply the user described operational controls border to be rotated the point of rotation of operation;
The angle determining unit is suitable for the operation based on the user, determines the anglec of rotation of the described point of rotation with respect to described operation reference point.
The present invention also provides a kind of system that realizes many figure rotations on webpage, comprise above-mentioned each described device of on webpage, realizing many figure rotations, and the pattern control module, described pattern control module is suitable for the target location of each pictures in the described plurality of pictures is updated in the CSS (cascading style sheet) and shows.
Alternatively, have at least one to be positioned at same figure layer with other pictures in the described plurality of pictures, described pattern control module also is suitable in described CSS (cascading style sheet) keeping the figure layer information of each pictures in the described plurality of pictures.
Alternatively, the described system of many figure rotations that realizes on webpage also comprises the picture acquiring unit, and described plurality of pictures is selected from the exterior artwork storehouse by described picture acquiring unit by the user and obtained.
Compared with prior art, the present invention has the following advantages:
The technical program is at first determined the initial position of each pictures in the plurality of pictures selected on the webpage, determine operational controls border and operation reference point afterwards, obtain the anglec of rotation of described operational controls borderline phase again for described operation reference point, at last for each pictures in the described plurality of pictures, determine its target location respectively, the initial position of described target location and each pictures and described operational controls borderline phase are associated for the anglec of rotation of described reference point.Because after having obtained the anglec of rotation of operational controls borderline phase for described operation reference point, according to the described anglec of rotation each pictures is determined its target location respectively, whole pictures are not added in the same DOM node, but the rotation that is shifted respectively, thereby when realizing the plurality of pictures rotation, kept figure ATM layer relationsATM between each picture.
Further, the border of operational controls described in the technical program is preferably the minimum rectangle of surrounding described plurality of pictures, described reference point is preferably the center of described minimum rectangle, the position of each pictures is adopted the center and is represented and calculate with respect to the anglec of rotation at its center, make to calculate and implementation procedure very succinct, and the rotary manipulation that provides in can better utilization CSS.
Description of drawings
Fig. 1 is the embodiment of the invention realizes the method for many figure rotations on webpage a schematic flow sheet;
Fig. 2 to Fig. 6 is the embodiment of the invention realizes the method for many figure rotations on webpage a Webpage synoptic diagram;
Fig. 7 is the embodiment of the invention realizes the device of many figure rotations on webpage a structural representation;
Fig. 8 is the embodiment of the invention realizes the system of many figure rotations on webpage a structural representation.
Embodiment
When prior art realizes that on webpage many figure rotate, will be added a new DOM node by the plurality of pictures that the user chooses often and carry out whole rotation, but this can't keep the figure ATM layer relationsATM between the picture, has limited the manifestation mode of image works.
The technical program is at first determined operational controls border and operation reference point, obtain the anglec of rotation of user expectation plurality of pictures by obtaining the operational controls borderline phase for the anglec of rotation of operation reference point with respect to reference point, determine the target location of this picture afterwards more respectively for the anglec of rotation of operation reference point according to the initial position of every pictures and operational controls borderline phase, because the operation of every pictures is carried out separately respectively, thereby kept figure ATM layer relationsATM between each pictures.
Further, the operational controls border is preferably the minimum rectangle of surrounding described selected plurality of pictures in the technical program, described reference point is preferably the center of described minimum rectangle, and the position of each pictures is adopted the center and is represented and calculate with respect to the anglec of rotation at its center, make to calculate and implementation procedure very succinct, and the rotary manipulation that provides in can better utilization CSS.
For above-mentioned purpose of the present invention, feature and advantage can more be become apparent, the specific embodiment of the present invention is described in detail below in conjunction with accompanying drawing.
Set forth detail in the following description so that fully understand the present invention.But the present invention can be different from alternate manner described here and implements with multiple, and those skilled in the art can do similar popularization under the situation of intension of the present invention.Therefore the present invention is not subjected to the restriction of following public embodiment.
Fig. 1 shows the schematic flow sheet of the method that realizes many figure rotations on webpage of the embodiment of the invention, comprising:
Step S11 determines the initial position of each pictures in the plurality of pictures selected on the webpage;
Step S12 determines the operational controls border;
Step S13 determines the operation reference point;
Step S14 obtains the anglec of rotation of described operational controls borderline phase for described operation reference point;
Step S15 for each pictures in the described plurality of pictures, determines its target location respectively; The initial position of described target location and each pictures and described operational controls borderline phase are associated for the anglec of rotation of described reference point.
Fig. 2 to Fig. 6 shows the structure of web page synoptic diagram of the method that realizes many figure rotations on webpage of present embodiment, below in conjunction with Fig. 1 and Fig. 2 to Fig. 6 present embodiment is elaborated.
The structure of web page signal that Fig. 2 sees by browser for user in the present embodiment, with reference to figure 2, comprise plurality of pictures on the page 10, described plurality of pictures is positioned at same figure layer or has at least one to be positioned at different figure layers with other pictures, plurality of pictures in the present embodiment on the page 10 is respectively picture F11, picture F12, picture F13 and picture F14, wherein, picture F11 and picture F12 are positioned at same figure layer, picture F14 is positioned at the figure layer on picture F11 and the picture F12, and picture F13 is positioned at the figure layer on the picture F14.Certainly, Fig. 2 only is a nonrestrictive example, and picture number on the page 10 and mutual figure ATM layer relationsATM thereof can also be respectively other numerals and possible combination in any relation.
Described picture F11 can be selected from the exterior artwork storehouse by the user to picture F14 and obtain, and for example can be to obtain from the picture library of third party's webpage.The described page 10 can be an independently Webpage, also can be the control page embedded on another webpage.
With reference to figure 1 and Fig. 3, execution in step S11 determines the initial position of each pictures in the plurality of pictures selected on the webpage.As example, selected plurality of pictures is picture F11, picture F12 and picture F13, and selected state can be that the user triggers by external input devices such as mouse, touch-screens.In the present embodiment, the initial position of each pictures comprises the initial position and the initial rotation angle degree of this picture with respect to its center at the center of this picture, particularly, the initial position at the center of picture F11 is C11, its initial rotation angle degree with respect to the center is α, the initial position at the center of picture F12 is C12, its initial rotation angle degree with respect to the center is 0, the initial position at the center of picture F13 is C13, its initial rotation angle degree with respect to the center is 0, and the initial position at the center of each picture can be represented with rectangular coordinate system or other coordinate systems.
In conjunction with Fig. 1 and Fig. 4, execution in step S12 determines operational controls border 15; Execution in step S13 determines operation reference point 16.In the present embodiment, described operational controls border 15 is preferably the minimum rectangle of surrounding selected plurality of pictures, and described operation reference point 16 is preferably the center of described minimum rectangle.Definite method of described minimum rectangle comprises: for each pictures in the selected plurality of pictures, calculate to determine that respectively it is gone up most, the most following, the most left and the rightest extreme point, going up most in respectively corresponding all the above-mentioned extreme points in four limits of described minimum rectangle, the most following, the most left and coordinate figure the most laterally or longitudinally of right four direction.Particularly, the extreme point of going up most in the present embodiment is the summit A of picture F11, extreme point is the broadside D of picture F13, the most left extreme point is the summit B of picture F11, the rightest extreme point is the long limit C of picture F12, respectively with the ordinate of summit A, the ordinate of broadside D, the horizontal ordinate of summit B and the definite minimum rectangle of surrounding selected plurality of pictures of horizontal ordinate of long limit C, promptly determine operational controls border 15 afterwards.
After definite described operational controls border 15, described operational controls border 15 is shown as newly-built DOM node, in the present embodiment, after the user chooses picture F11, picture F12 and picture F13, the minimum rectangle of determine surrounding each picture is as operational controls border 15, and with described minimum rectangle newly-built be that a DOM node is presented on the page 10 for user's operation.While also can be added into described operation reference point 16 in the lump in this DOM node and show, can certainly not add to show this operation reference point 16.Described operational controls border 15 and operation reference point 16 can be arranged in same webpage with described selected plurality of pictures, also can be arranged in different web pages, as be positioned on the new Webpage of ejection.
In other specific embodiments, described operational controls border 15 also can be the bigger rectangle frame that surrounds described selected plurality of pictures, and the scope of its covering is greater than the scope of each picture, promptly greater than described minimum rectangle; Perhaps also can and not exclusively surround described selected plurality of pictures, only cover the part of each pictures; Even also can be not overlapping fully, as be positioned at a side of the integral body of each pictures with the scope of described selected plurality of pictures.Described operation reference point 16 can also be a certain summit on operational controls border 15, or 15 inside, operational controls border more arbitrarily, or 15 outsides, operational controls border more arbitrarily.In a word, described operation reference point 15 can be chosen to be the optional position on the Webpage, also can be the position of being selected by the user in one embodiment.
In conjunction with Fig. 1 and Fig. 5 to Fig. 6, execution in step S14 obtains described operational controls border 15 anglecs of rotation with respect to described operation reference point 16; Execution in step S15 for each pictures in the described plurality of pictures, determines its target location respectively, and described target location is associated with the initial position and described operational controls border 15 anglecs of rotation with respect to described reference point 16 of each pictures.
Particularly, at first with reference to figure 5, determine described operational controls border 15 to be rotated the point of rotation 17 of operation for the user.The described point of rotation 17 can be on the page 10 more arbitrarily, be preferably in the present embodiment operation reference point 16 to the right transverse horizontal extend the intersection point on back and described operational controls border 15.The user can with input equipments such as mouse, touch-screen on the page 10 to dragging rotation by the point of rotation 17, realize rotation by CSS afterwards to operational controls border 15.Operate based on the user, specifically can operate triggering by the monitor user ' operation or by the user, determine the anglec of rotation of the described point of rotation 17 with respect to described operation reference point 16, described operational controls border 15 the anglecs of rotation have promptly been determined with respect to described operation reference point 16, thereby can obtain the target location of each pictures with the initial position of each pictures of selected plurality of pictures with respect to described operation reference point 16 these anglecs of rotation of rotation.
The specific implementation process of present embodiment is please in conjunction with Fig. 5 and Fig. 6, based on the operation of user to the point of rotation 17, can determine that the described point of rotation 17 is rotated counterclockwise angle beta with respect to described operation reference point 16, can know that promptly described operational controls border 15 also is rotated counterclockwise angle beta with respect to described operation reference point 16, afterwards for selected picture F11, picture F12 and picture F13 are shifted respectively and rotary manipulation, particularly, initial position C11 with its center, C12, C13 is rotated counterclockwise angle beta with respect to operation reference point 16 respectively, obtain the target location C11 ' of each center picture respectively, C12 ' and C13 ', the target location of each center picture equals its initial position and the distance of operating reference point 16 with the distance of operation reference point 16, only be rotated counterclockwise angle beta, the target location C11 ' of each center picture, the coordinate figure of C12 ' and C13 ' can pass through polar coordinates, computing method such as rotation matrix obtain.
Each pictures equals this picture with respect to the initial rotation angle degree at its center and described operational controls border 15 anglec of rotation sum with respect to described operation reference point 16 with respect to the target anglec of rotation at its center in the selected plurality of pictures.Particularly, for picture F11, its target anglec of rotation with respect to self center is an alpha+beta; For picture F12, its target anglec of rotation with respect to self center is β (being 0+ β); For picture F13, its target anglec of rotation with respect to self center is β (being 0+ β).Whole computation process comprises the target location at center of each pictures and the calculating of the target anglec of rotation, and all very succinct is easy to realize, can not cause excessive burden to the computing machine of browser and running browser.
After the target location and the target anglec of rotation at the center of determining each picture with respect to the center, the corresponding data of each pictures can be updated to CSS, by CSS the center of every pictures is shifted respectively, the center of every pictures is displaced to the target location by initial position, and every pictures is rotated, make every pictures equal the described target anglec of rotation, shown again afterwards with respect to the anglec of rotation at its center.Because the operation among the CSS all is that basic point carries out basically with the center, therefore, in the present embodiment with center and the operation that can better utilization CSS with respect to the account form of the anglec of rotation at center provides.Certainly, in other specific embodiments, definite process of the initial position of every pictures and target location also can not use its center as basic point, determines with respect to the anglec of rotation on this summit and calculates as the position on a certain summit that can adopt picture and picture.
Present embodiment is owing to all carry out respectively the displacement and the rotation of each pictures, do not change its figure layer information, thereby each picture that is presented on user's the webpage has still kept the figure ATM layer relationsATM before the rotation, picture F12 still is positioned at the figure layer of picture F14 below, picture F13 still is positioned at the figure layer of picture F14 top, and the upper and lower relation of its figure layer is not destroyed.
The methods that realize many figure rotations on webpage in the present embodiment realize by JavaScript, certainly in other specific embodiments, also can or well known to a person skilled in the art that other modes realize by webpage programming language such as Flash.
In one embodiment, the user can be by having the described page 10 of computer access of input equipments such as mouse, touch-screen, operate in browser on this computing machine in load page 10, load the program in machine code section (as JavaScript program, Flash program etc.) that realizes said method in the lump, operate based on the user, browser is resolved and is carried out this program in machine code section, thereby realizes many figure rotations on webpage.
Present embodiment also provides a kind of device and system that realizes many figure rotations on webpage.Fig. 7 shows the described structural representations of realizing the device of many figure rotations on webpage, mainly comprises: first determining unit 21 is suitable for determining the initial position of each pictures in the plurality of pictures selected on the webpage; Second determining unit 22 is suitable for determining the operational controls border; The 3rd determining unit 23 is suitable for determining the operation reference point; Angle acquiring unit 24 is suitable for obtaining the anglec of rotation of described operational controls borderline phase for described operation reference point; The 4th determining unit 25 is suitable for for each pictures in the described plurality of pictures, determines its target location respectively, and the initial position of described target location and each pictures and described operational controls borderline phase are associated for the anglec of rotation of described reference point.
Described angle acquiring unit 24 specifically comprises in the present embodiment: DOM Document Object Model node creating unit 241 is suitable for described operational controls border is shown as newly-built DOM Document Object Model node; Point of rotation determining unit 242 is suitable for determining to supply the user described operational controls border to be rotated the point of rotation of operation; Angle determining unit 243 is suitable for the operation based on the user, determines the anglec of rotation of the described point of rotation with respect to described operation reference point.
The border of operational controls described in the present embodiment is preferably the minimum rectangle of surrounding described selected plurality of pictures, and described operation reference point is preferably the center of described minimum rectangle.
Fig. 8 shows the system that realizes many figure rotations on webpage that comprises device shown in Figure 7, on webpage, realize the devices of scheming to rotate except that described more, also comprise: pattern control module 31 is suitable for the target location of each pictures in the described plurality of pictures is updated in the CSS (cascading style sheet) and shows; Picture acquiring unit 32, described selected plurality of pictures are selected from the exterior artwork storehouse by described picture acquiring unit 32 by the user and are obtained.In addition, described pattern unit 31 also is suitable for keeping the figure layer information of each pictures in CSS (cascading style sheet), shows according to figure layer information afterwards, keeps the figure layer upper and lower relation of each pictures rotation front and back.
The described course of work and principle in the device of realizing many figure rotations on the webpage and system sees also the aforementioned embodiment that realizes the method for many figure rotations on webpage, repeats no more here.
Need to prove, present embodiment is described can be documented in by certain program language on the storage medium of web page server in the method that realizes many figure rotations on the webpage, when this webpage of user capture, be transmitted through the network on the storage medium of the employed computing machine of user by the storage medium of server.
Though openly as above with preferred embodiment; but it is not to be used for limiting the present invention; any those skilled in the art without departing from the spirit and scope of the present invention; can utilize the method and the technology contents of above-mentioned announcement that technical solution of the present invention is made possible change and modification; therefore; every content that does not break away from technical solution of the present invention; to any simple modification, equivalent variations and modification that above embodiment did, all belong to the protection domain of technical solution of the present invention according to technical spirit of the present invention.
Claims (26)
1. a method that realizes many figure rotations on webpage is characterized in that, comprising:
Determine the initial position of each pictures in the plurality of pictures selected on the webpage;
Determine the operational controls border;
Determine the operation reference point;
Obtain the anglec of rotation of described operational controls borderline phase for described operation reference point;
For each pictures in the described plurality of pictures, determine its target location respectively; The initial position of described target location and each pictures and described operational controls borderline phase are associated for the anglec of rotation of described reference point.
2. the method that on webpage, realizes many figure rotations according to claim 1, it is characterized in that, described definite respectively its target location comprises: the initial position with each pictures in the described plurality of pictures rotates the described anglec of rotation with respect to described reference point respectively, to obtain its target location.
3. the methods that realize many figure rotations on webpage according to claim 1 is characterized in that, have at least one to be positioned at different figure layers with other pictures in the described plurality of pictures.
4. the method that realizes many figure rotations on webpage according to claim 1 is characterized in that described operational controls border and operation reference point and described selected plurality of pictures are arranged in same webpage.
5. the method that realizes many figure rotations on webpage according to claim 1 is characterized in that described operational controls border is for surrounding the minimum rectangle of described plurality of pictures.
6. the method that realizes many figure rotations on webpage according to claim 5 is characterized in that described reference point is the center of described minimum rectangle.
7. the method that realizes many figure rotations on webpage according to claim 1 is characterized in that, the initial position of each pictures comprises the initial position and the initial rotation angle degree of this picture with respect to its center at the center of each pictures in the described plurality of pictures.
8. the method that realizes many figure rotations on webpage according to claim 7 is characterized in that, the target location of each pictures comprises the target location and the target anglec of rotation of this picture with respect to its center at the center of each pictures in the described plurality of pictures.
9. the method that on webpage, realizes many figure rotations according to claim 8, it is characterized in that, described definite respectively its target location comprises: the initial position with the center of each pictures in the described plurality of pictures rotates the described anglec of rotation with respect to described reference point respectively, to obtain the target location at its center.
10. the method that on webpage, realizes many figure rotations according to claim 8, it is characterized in that, describedly determine that respectively its target location comprises: with each pictures in the described plurality of pictures with respect to the anglec of rotation addition of the initial rotation angle degree at its center and described operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center for described reference point.
11. the methods that realize many figure rotations on webpage according to claim 1 is characterized in that, describedly obtain described operational controls borderline phase and comprise for the anglec of rotation of described operation reference point:
Described operational controls border is shown as newly-built DOM Document Object Model node;
Determine described operational controls border to be rotated the point of rotation of operation for the user;
Based on user's operation, determine the anglec of rotation of the described point of rotation with respect to described operation reference point.
12. the methods that realize many figure rotations on webpage according to claim 1 is characterized in that, also comprise: the target location of each pictures in the described plurality of pictures is updated in the CSS (cascading style sheet) shows.
13. the method that realizes many figure rotations on webpage according to claim 1 is characterized in that described selected plurality of pictures is selected from the exterior artwork storehouse by the user and obtained.
14. a device of realizing many figure rotations on webpage is characterized in that, comprising:
First determining unit is suitable for determining the initial position of each pictures in the plurality of pictures selected on the webpage;
Second determining unit is suitable for determining the operational controls border;
The 3rd determining unit is suitable for determining the operation reference point;
The angle acquiring unit is suitable for obtaining the anglec of rotation of described operational controls borderline phase for described operation reference point;
The 4th determining unit is suitable for for each pictures in the described plurality of pictures, determines its target location respectively, and the initial position of described target location and each pictures and described operational controls borderline phase are associated for the anglec of rotation of described reference point.
15. the device of on webpage, realizing many figure rotations according to claim 14, it is characterized in that, described the 4th determining unit is suitable for respectively the initial position of each pictures in the described plurality of pictures is rotated the described anglec of rotation with respect to described reference point, to obtain its target location.
16. the device of realizing many figure rotations on webpage according to claim 14 is characterized in that described operational controls border and operation reference point and described selected plurality of pictures are arranged in same webpage.
17. the device of realizing many figure rotations on webpage according to claim 14 is characterized in that described operational controls border is for surrounding the minimum rectangle of described plurality of pictures.
18. the device of realizing many figure rotations on webpage according to claim 17 is characterized in that described reference point is the center of described minimum rectangle.
19. the device of on webpage, realizing many figure rotations according to claim 14, it is characterized in that described first determining unit is suitable for determining the initial position and the initial rotation angle degree of this picture with respect to its center at the center of each pictures in the plurality of pictures selected on the webpage.
20. the device of on webpage, realizing many figure rotations according to claim 14, it is characterized in that described the 4th determining unit is suitable for the target location of each pictures in the plurality of pictures and comprises the target location at center of each pictures and this picture target anglec of rotation with respect to its center.
21. the device of on webpage, realizing many figure rotations according to claim 20, it is characterized in that, described the 4th determining unit is suitable for the initial position at the center of each pictures in the described plurality of pictures is rotated the described anglec of rotation with respect to described reference point, to obtain the target location at its center.
22. the device of on webpage, realizing many figure rotations according to claim 20, it is characterized in that, described the 4th determining unit is suitable for each pictures in the described plurality of pictures with respect to the anglec of rotation addition for described reference point of the initial rotation angle degree at its center and described operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center.
23. the device of realizing many figure rotations on webpage according to claim 14 is characterized in that described angle acquiring unit comprises:
DOM Document Object Model node creating unit is suitable for described operational controls border is shown as newly-built DOM Document Object Model node;
Point of rotation determining unit is suitable for determining to supply the user described operational controls border to be rotated the point of rotation of operation;
The angle determining unit is suitable for the operation based on the user, determines the anglec of rotation of the described point of rotation with respect to described operation reference point.
24. system that on webpage, realizes many figure rotations, it is characterized in that, comprise each described device of on webpage, realizing many figure rotations in the claim 14 to 23, and the pattern control module, described pattern control module is suitable for the target location of each pictures in the described plurality of pictures is updated in the CSS (cascading style sheet) and shows.
25. the system that on webpage, realizes many figure rotations according to claim 24, it is characterized in that, have at least one to be positioned at same figure layer with other pictures in the described plurality of pictures, described pattern control module also is suitable in described CSS (cascading style sheet) keeping the figure layer information of each pictures in the described plurality of pictures.
26. the system that realizes many figure rotations on webpage according to claim 24 is characterized in that also comprise the picture acquiring unit, described plurality of pictures is selected by described picture acquiring unit by the user and obtained from the exterior artwork storehouse.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201110040167A CN102110149B (en) | 2011-02-17 | 2011-02-17 | Method, device and system for realizing multi-picture rotation on webpage |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201110040167A CN102110149B (en) | 2011-02-17 | 2011-02-17 | Method, device and system for realizing multi-picture rotation on webpage |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN102110149A true CN102110149A (en) | 2011-06-29 |
| CN102110149B CN102110149B (en) | 2012-10-17 |
Family
ID=44174310
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201110040167A Expired - Fee Related CN102110149B (en) | 2011-02-17 | 2011-02-17 | Method, device and system for realizing multi-picture rotation on webpage |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN102110149B (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103092492A (en) * | 2011-10-27 | 2013-05-08 | 腾讯科技（深圳）有限公司 | Image rotating method and image rotating system |
| CN105630815A (en) * | 2014-10-31 | 2016-06-01 | 广州市动景计算机科技有限公司 | Webpage reformatting method and device |
| CN108255995A (en) * | 2017-12-29 | 2018-07-06 | 北京奇虎科技有限公司 | A kind of method and device for exporting image |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1343067A (en) * | 2000-09-04 | 2002-04-03 | 索尼服务中心(欧洲)股份有限公司 | MHP TV. devie and GUI application |
| WO2004025420A2 (en) * | 2002-09-13 | 2004-03-25 | Yahoo! Inc. | Improved browser user interface |
| CN101770490A (en) * | 2008-12-31 | 2010-07-07 | 常州佰腾科技有限公司 | Display method of full patent texts based on computer display |
-
2011
- 2011-02-17 CN CN201110040167A patent/CN102110149B/en not_active Expired - Fee Related
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1343067A (en) * | 2000-09-04 | 2002-04-03 | 索尼服务中心(欧洲)股份有限公司 | MHP TV. devie and GUI application |
| WO2004025420A2 (en) * | 2002-09-13 | 2004-03-25 | Yahoo! Inc. | Improved browser user interface |
| CN101770490A (en) * | 2008-12-31 | 2010-07-07 | 常州佰腾科技有限公司 | Display method of full patent texts based on computer display |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103092492A (en) * | 2011-10-27 | 2013-05-08 | 腾讯科技（深圳）有限公司 | Image rotating method and image rotating system |
| CN103092492B (en) * | 2011-10-27 | 2016-05-04 | 腾讯科技（深圳）有限公司 | Picture rotation method and system |
| CN105630815A (en) * | 2014-10-31 | 2016-06-01 | 广州市动景计算机科技有限公司 | Webpage reformatting method and device |
| CN108255995A (en) * | 2017-12-29 | 2018-07-06 | 北京奇虎科技有限公司 | A kind of method and device for exporting image |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102110149B (en) | 2012-10-17 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11169694B2 (en) | Interactive layer for editing a rendering displayed via a user interface | |
| US11763067B2 (en) | User interface for editing web content | |
| US20220236866A1 (en) | Method and system for section-based editing of a website page | |
| JP6768695B2 (en) | Methods and devices for generating composite pictures | |
| JP6133318B2 (en) | Cross window animation | |
| US20090240654A1 (en) | File Access Via Conduit Application | |
| CN106776939A (en) | A kind of image lossless mask method and system | |
| US9886465B2 (en) | System and method for rendering of hierarchical data structures | |
| CN112965645B (en) | Page dragging method and device, computer equipment and storage medium | |
| US10102219B2 (en) | Rendering high resolution images using image tiling and hierarchical image tile storage structures | |
| CN102110149B (en) | Method, device and system for realizing multi-picture rotation on webpage | |
| EP3036614A1 (en) | Navigating fixed format document in e-reader application | |
| US20140215295A1 (en) | Three-dimensional image displaying system and method | |
| CN111984166A (en) | Annular rotation interaction method, device, equipment and medium for menu | |
| CN106775634A (en) | One kind displaying block display method and device | |
| CN115421631A (en) | Interface display method and device | |
| US10353991B2 (en) | Generating a visual description tree based on a layout interruption record | |
| US11907646B1 (en) | HTML element based rendering supporting interactive objects | |
| JP7248668B2 (en) | Customize content animation based on viewport position | |
| US20140365930A1 (en) | Remote display of content elements | |
| CN115688702A (en) | Information processing method and device | |
| JP2015170050A (en) | Drawing device, program and drawing method | |
| JP5646432B2 (en) | Image display apparatus and computer program | |
| US20150052429A1 (en) | Interface method and device | |
| GB2456337A (en) | Viewing and editing an infinite digital image |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| C14 | Grant of patent or utility model | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20121017 Termination date: 20210217 |
|
| CF01 | Termination of patent right due to non-payment of annual fee |