CN102110149B - 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
- CN102110149B CN102110149B CN201110040167A CN201110040167A CN102110149B CN 102110149 B CN102110149 B CN 102110149B CN 201110040167 A CN201110040167 A CN 201110040167A CN 201110040167 A CN201110040167 A CN 201110040167A CN 102110149 B CN102110149 B CN 102110149B
- Authority
- CN
- China
- Prior art keywords
- pictures
- webpage
- rotation
- reference point
- center
- 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.)
- Expired - Fee Related
Links
Images
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 need carry out real-time modification, processing etc. to the picture on the webpage; For example at online shopping site; The user hopes to see the arranging effect of the many dress ornaments that oneself is bought, and just need the picture of each part dress ornament 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, the internal memory that therefore requires implementation method to take is little, the real-time of Flame Image Process is high; And owing to the Flame Image Process storehouse of different browsers support also is not quite similar, thereby also need guarantee compatibility to multiple browser.
Web page image treatment technology of the prior art can be realized the image processing function that some are basic, like 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 like 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 (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 at the below or the top of other pictures that need not rotate on the webpage 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:
Confirm the initial position of each pictures in the plurality of pictures selected on the webpage;
Confirm the operational controls border;
Confirm the operation reference point;
Obtain the anglec of rotation of said operational controls borderline phase for said operation reference point;
For each pictures in the said plurality of pictures, confirm its target location respectively; The initial position of said target location and each pictures and said operational controls borderline phase are associated for the anglec of rotation of said reference point.
Alternatively, said definite respectively its target location comprises: the initial position with each pictures in the said plurality of pictures rotates the said anglec of rotation with respect to said reference point respectively, to obtain its target location.
Alternatively, have at least one to be positioned at different figure layer in the said plurality of pictures with other pictures.
Alternatively, said operational controls border and operation reference point and said selected plurality of pictures are arranged in same webpage.
Alternatively, said operational controls border is for surrounding the minimum rectangle of said plurality of pictures.
Alternatively, said reference point is the center of said minimum rectangle.
Alternatively, initial position and this picture at center that the initial position of each pictures comprises each pictures in the said plurality of pictures is with respect to the initial rotation angle degree at its center.
Alternatively, target location and this picture at center that the target location of each pictures comprises each pictures in the said plurality of pictures is with respect to the target anglec of rotation at its center.
Alternatively, said definite respectively its target location comprises: the initial position with the center of each pictures in the said plurality of pictures rotates the said anglec of rotation with respect to said reference point respectively, to obtain the target location at its center.
Alternatively; Saidly confirm that respectively its target location comprises: with each pictures in the said plurality of pictures with respect to the anglec of rotation addition of the initial rotation angle degree at its center and said operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center for said reference point.
Alternatively, saidly obtain said operational controls borderline phase and comprise for the anglec of rotation of said operation reference point:
Said operational controls border is shown as newly-built DOM Document Object Model node;
Confirm to supply the user said operational controls border to be rotated the point of rotation of operation;
Based on user's operation, confirm the anglec of rotation of the said point of rotation with respect to said operation reference point.
Alternatively, the said methods of many figure rotations that on webpage, realize also comprise: the target location of each pictures in the said plurality of pictures is updated in the CSS shows.
Alternatively, said 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 on webpage, realizing many figure rotations, comprising:
First confirms the unit, is suitable for confirming the initial position of each pictures in the plurality of pictures selected on the webpage;
Second confirms the unit, is suitable for confirming the operational controls border;
The 3rd confirms the unit, is suitable for confirming the operation reference point;
The angle acquiring unit is suitable for obtaining the anglec of rotation of said operational controls borderline phase for said operation reference point;
The 4th confirms to be suitable for for each pictures in the said plurality of pictures unit, confirms its target location respectively, and the initial position of said target location and each pictures and said operational controls borderline phase are associated for the anglec of rotation of said reference point.
Alternatively, the said the 4th confirms that the unit is suitable for respectively the initial position of each pictures in the said plurality of pictures is rotated the said anglec of rotation with respect to said reference point, to obtain its target location.
Alternatively, said operational controls border and operation reference point and said selected plurality of pictures are arranged in same webpage.
Alternatively, said operational controls border is for surrounding the minimum rectangle of said plurality of pictures.
Alternatively, said reference point is the center of said minimum rectangle.
Alternatively, said first confirms that the unit is suitable for confirming 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, the said the 4th confirms that the unit is suitable for the target location and the target anglec of rotation of this picture with respect to its center that the target location of each pictures in the plurality of pictures comprises the center of each pictures.
Alternatively, the said the 4th confirms that the unit is suitable for the initial position at the center of each pictures in the said plurality of pictures is rotated the said anglec of rotation with respect to said reference point, to obtain the target location at its center.
Alternatively; The said the 4th confirms that the unit is suitable for each pictures in the said plurality of pictures with respect to the anglec of rotation addition for said reference point of the initial rotation angle degree at its center and said operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center.
Alternatively, said angle acquiring unit comprises:
The DOM Document Object Model node is created the unit, is suitable for said operational controls border is shown as newly-built DOM Document Object Model node;
The point of rotation is confirmed the unit, is suitable for confirming to supply the user said operational controls border to be rotated the point of rotation of operation;
Angle is confirmed the unit, is suitable for the operation based on the user, confirms the anglec of rotation of the said point of rotation with respect to said operation reference point.
The present invention also provides a kind of system that on webpage, realizes many figure rotations; Comprise above-mentioned each described device of on webpage, realizing many figure rotations; And the pattern control module, said pattern control module is suitable for the target location of each pictures in the said plurality of pictures is updated in the CSS and shows.
Alternatively, have at least one to be positioned at same figure layer with other pictures in the said plurality of pictures, said pattern control module also is suitable in said CSS the figure layer information of each pictures in the said plurality of pictures of maintenance.
Alternatively, the said system of many figure rotations that on webpage, realizes also comprises the picture acquiring unit, and said plurality of pictures is selected from the exterior artwork storehouse through said picture acquiring unit by the user and obtained.
Compared with prior art, the present invention has the following advantages:
The present technique scheme is at first confirmed the initial position of each pictures in the plurality of pictures selected on the webpage; Confirm operational controls border and operation reference point afterwards; Obtain the anglec of rotation of said operational controls borderline phase again for said operation reference point; At last for each pictures in the said plurality of pictures, confirm its target location respectively, the initial position of said target location and each pictures and said operational controls borderline phase are associated for the anglec of rotation of said reference point.Because after having obtained the anglec of rotation of operational controls borderline phase for said operation reference point; According to the said anglec of rotation each pictures is confirmed 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 the figure ATM layer relationsATM between each picture.
Further; Operational controls border described in the present technique scheme is preferably the minimum rectangle of surrounding said plurality of pictures; Said reference point is preferably the center of said minimum rectangle; The position of each pictures is adopted the center and is represented and calculates with respect to the anglec of rotation at its center, makes that calculating and implementation procedure are 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 present technique scheme is at first confirmed operational controls border and operation reference point; Obtain the anglec of rotation of user expectation plurality of pictures through obtaining the operational controls borderline phase for the anglec of rotation of operation reference point with respect to reference point; The target location of confirming this picture respectively for the anglec of rotation of operation reference point according to the initial position and the operational controls borderline phase of every pictures more afterwards; Owing to the operation of every pictures is carried out separately respectively, thereby has been kept the figure ATM layer relationsATM between each pictures.
Further; The operational controls border is preferably the minimum rectangle of surrounding said selected plurality of pictures in the present technique scheme; Said reference point is preferably the center of said minimum rectangle; And the position of each pictures adopts the center and representes and calculates with respect to the anglec of rotation at its center, makes that calculating and implementation procedure are very succinct, and the rotary manipulation that provides in can better utilization CSS.
For make above-mentioned purpose of the present invention, feature and advantage can be more obviously understandable, does detailed explanation below in conjunction with the accompanying drawing specific embodiments of the invention.
Set forth detail in the following description so that make much of 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 does not receive the restriction of following disclosed embodiment.
Fig. 1 shows the schematic flow sheet of the method that on webpage, realizes many figure rotations of the embodiment of the invention, comprising:
Step S11 confirms the initial position of each pictures in the plurality of pictures selected on the webpage;
Step S12 confirms the operational controls border;
Step S13 confirms the operation reference point;
Step S14 obtains the anglec of rotation of said operational controls borderline phase for said operation reference point;
Step S15 for each pictures in the said plurality of pictures, confirms its target location respectively; The initial position of said target location and each pictures and said operational controls borderline phase are associated for the anglec of rotation of said reference point.
Fig. 2 to Fig. 6 shows the structure of web page synoptic diagram of the method that on webpage, realizes many figure rotations 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 through browser for user in the present embodiment; With reference to figure 2; Comprise plurality of pictures on the page 10, said plurality of pictures is positioned at same figure layer or has at least one to be positioned at different figure layers with other pictures, and the 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, and 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.
Said picture F11 can be selected from the exterior artwork storehouse by the user to picture F14 and obtain, and for example can be from the picture library of third party's webpage, to obtain.The said 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 confirms the initial position of each pictures in the plurality of pictures selected on the webpage.As an example, selected plurality of pictures is picture F11, picture F12 and picture F13, and selected state can be that the user triggers through 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, and 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, and its initial rotation angle degree with respect to the center is 0, and 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 confirms operational controls border 15; Execution in step S13 confirms operation reference point 16.In the present embodiment, said operational controls border 15 is preferably the minimum rectangle of surrounding selected plurality of pictures, and said operation reference point 16 is preferably the center of said minimum rectangle.Definite method of said minimum rectangle comprises: for each pictures in the selected plurality of pictures; Calculate to confirm respectively its go up, down, a left side and the rightest extreme point, going up in respectively corresponding all the above-mentioned extreme points in four limits of said minimum rectangle, under, 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, and the extreme point on a left side is the summit B of picture F11, and 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 confirm operational controls border 15 afterwards.
After definite said operational controls border 15; Said operational controls border 15 is shown as newly-built DOM node; In the present embodiment; After the user chose picture F11, picture F12 and picture F13, the minimum rectangle of confirm surrounding each picture was as operational controls border 15, and with said minimum rectangle newly-built be that a DOM node is presented at and supplies user's operation on the page 10.While also can be added into said operation reference point 16 in the lump in this DOM node and show, can certainly not add this operation reference point 16 of demonstration.Said operational controls border 15 can be arranged in same webpage with operation reference point 16 with said 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, said operational controls border 15 also can be the bigger rectangle frame that surrounds said selected plurality of pictures, and the scope of its covering is greater than the scope of each picture, promptly greater than said minimum rectangle; Perhaps also can and not exclusively surround said 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 said selected plurality of pictures.Said operation reference point 16 can also be a certain summit on operational controls border 15, or operational controls border 15 inner more arbitrarily, or operational controls border 15 outside more arbitrarily.In a word, said 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 said operational controls border 15 anglecs of rotation with respect to said operation reference point 16; Execution in step S15 for each pictures in the said plurality of pictures, confirms its target location respectively, and said target location is associated with the initial position and said operational controls border 15 anglecs of rotation with respect to said reference point 16 of each pictures.
Particularly, at first with reference to figure 5, confirm to supply the user said operational controls border 15 to be rotated the point of rotation 17 of operation.The said 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 said operational controls border 15.The user can with input equipments such as mouse, touch-screen on the page 10 to dragging rotation through the point of rotation 17, realize rotation through CSS afterwards to operational controls border 15.Operate based on the user; Specifically can operate triggering through the monitor user ' operation or by the user; Confirm the anglec of rotation of the said point of rotation 17 with respect to said operation reference point 16; Promptly confirmed said operational controls border 15 the anglecs of rotation, thereby can obtain the target location of each pictures with the initial position of each pictures of selected plurality of pictures with respect to said operation reference point 16 these anglecs of rotation of rotation with respect to said operation reference point 16.
The concrete implementation procedure of present embodiment please combine Fig. 5 and Fig. 6; Based on the operation of user to the point of rotation 17; Can confirm that the said point of rotation 17 is rotated counterclockwise angle beta with respect to said operation reference point 16; Can know that promptly said operational controls border 15 also is rotated counterclockwise angle beta with respect to said operation reference point 16; Be shifted respectively and rotary manipulation for selected picture F11, picture F12 and picture F13 afterwards, particularly, the initial position C11 at its center, C12, C13 be rotated counterclockwise angle beta with respect to operation reference point 16 respectively; Obtain target location C11 ', C12 ' and the C13 ' of each center picture respectively; 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 has been rotated counterclockwise angle beta, and the coordinate figure of target location C11 ', C12 ' and the C13 ' of each center picture can pass through computing method such as polar coordinates, rotation matrix and obtain.
Each pictures equals this picture with respect to the initial rotation angle degree at its center and said operational controls border 15 anglec of rotation sum with respect to said 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+ β).The The whole calculations process comprises target location and the calculating of the target anglec of rotation at the center of each pictures, 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 confirming each picture with respect to the center; Can the corresponding data of each pictures be updated to CSS; Through 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 said target anglec of rotation, show 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, confirms with respect to the anglec of rotation on this summit and calculates like 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, and 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 method that on webpage, realizes many figure rotations in the present embodiment realizes through 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 languages such as Flash.
In one embodiment; The user can be through having the said 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 (like 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 on webpage, realizes many figure rotations.
Present embodiment also provides a kind of device and system that on webpage, realizes many figure rotations.Fig. 7 shows the said structural representation of on webpage, realizing the device of many figure rotations, mainly comprises: first confirms unit 21, is suitable for confirming the initial position of each pictures in the plurality of pictures selected on the webpage; Second confirms unit 22, is suitable for confirming the operational controls border; The 3rd confirms unit 23, is suitable for confirming the operation reference point; Angle acquiring unit 24 is suitable for obtaining the anglec of rotation of said operational controls borderline phase for said operation reference point; The 4th confirms to be suitable for for each pictures in the said plurality of pictures unit 25, confirms its target location respectively, and the initial position of said target location and each pictures and said operational controls borderline phase are associated for the anglec of rotation of said reference point.
Said angle acquiring unit 24 specifically comprises in the present embodiment: the DOM Document Object Model node is created unit 241, is suitable for said operational controls border is shown as newly-built DOM Document Object Model node; The point of rotation is confirmed unit 242, is suitable for confirming to supply the user said operational controls border to be rotated the point of rotation of operation; Angle is confirmed unit 243, is suitable for the operation based on the user, confirms the anglec of rotation of the said point of rotation with respect to said operation reference point.
The border of operational controls described in the present embodiment is preferably the minimum rectangle of surrounding said selected plurality of pictures, and said operation reference point is preferably the center of said minimum rectangle.
Fig. 8 shows the system that on webpage, realizes many figure rotations that comprises device shown in Figure 7; On webpage, realize the devices of scheming to rotate except that said more; Also comprise: pattern control module 31 is suitable for the target location of each pictures in the said plurality of pictures is updated in the CSS and shows; Picture acquiring unit 32, said selected plurality of pictures are selected from the exterior artwork storehouse through said picture acquiring unit 32 by the user and are obtained.In addition, said pattern unit 31 also is suitable in CSS, keeping the figure layer information of each pictures, shows according to figure layer information afterwards, keeps the figure layer upper and lower relation of each pictures rotation front and back.
The said course of work and principle in the device of realizing many figure rotations on the webpage and system sees also the aforementioned embodiment that on webpage, realizes the method for many figure rotations, repeats no more here.
Need to prove; Present embodiment is described can be documented in through 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 are not breaking away from the spirit and scope of the present invention; Can utilize the method and the technology contents of above-mentioned announcement that technical scheme of the present invention is made possible change and modification, therefore, every content that does not break away from technical scheme of the present invention; To any simple modification, equivalent variations and modification that above embodiment did, all belong to the protection domain of technical scheme of the present invention according to technical spirit of the present invention.
Claims (25)
1. a method that on webpage, realizes many figure rotations is characterized in that, comprising:
Confirm the initial position of each pictures in the plurality of pictures selected on the webpage, have at least a pictures and other pictures to be positioned at different figure layers in the said plurality of pictures;
Confirm the operational controls border;
Confirm the operation reference point;
Obtain the anglec of rotation of said operational controls borderline phase for said operation reference point;
For each pictures in the said plurality of pictures, confirm its target location respectively; The target location of said each pictures is associated with initial position and the said operational controls borderline phase of this picture anglec of rotation for said reference point.
2. the method that on webpage, realizes many figure rotations according to claim 1; It is characterized in that; Said definite respectively its target location comprises: the initial position with each pictures in the said plurality of pictures rotates the said anglec of rotation with respect to said reference point respectively, to obtain its target location.
3. the method that on webpage, realizes many figure rotations according to claim 1 is characterized in that said operational controls border is arranged in same webpage with operation reference point and said selected plurality of pictures.
4. the method that on webpage, realizes many figure rotations according to claim 1 is characterized in that said operational controls border is for surrounding the minimum rectangle of said plurality of pictures.
5. the method that on webpage, realizes many figure rotations according to claim 4 is characterized in that said reference point is the center of said minimum rectangle.
6. the method that on webpage, realizes many figure rotations 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 said plurality of pictures.
7. the method that on webpage, realizes many figure rotations according to claim 6 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 said plurality of pictures.
8. the method that on webpage, realizes many figure rotations according to claim 7; It is characterized in that; Said definite respectively its target location comprises: the initial position with the center of each pictures in the said plurality of pictures rotates the anglec of rotation of said operational controls borderline phase for said operation reference point with respect to said reference point respectively, to obtain the target location at its center.
9. the method that on webpage, realizes many figure rotations according to claim 7; It is characterized in that; Saidly confirm that respectively its target location comprises: with each pictures in the said plurality of pictures with respect to the anglec of rotation addition of the initial rotation angle degree at its center and said operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center for said reference point.
10. the methods that on webpage, realize many figure rotations according to claim 1 is characterized in that, saidly obtain said operational controls borderline phase and comprise for the anglec of rotation of said operation reference point:
Said operational controls border is shown as newly-built DOM Document Object Model node;
Confirm to supply the user said operational controls border to be rotated the point of rotation of operation;
Based on user's operation, confirm the anglec of rotation of the said point of rotation with respect to said operation reference point.
11. the methods that on webpage, realize many figure rotations according to claim 1 is characterized in that, also comprise: the target location of each pictures in the said plurality of pictures is updated in the CSS shows.
12. the method that on webpage, realizes many figure rotations according to claim 1 is characterized in that said selected plurality of pictures is selected from the exterior artwork storehouse by the user and obtained.
13. a device of on webpage, realizing many figure rotations is characterized in that, comprising:
First confirms the unit, is suitable for confirming the initial position of each pictures in the plurality of pictures selected on the webpage, has at least a pictures and other pictures to be positioned at different figure layers in the said plurality of pictures;
Second confirms the unit, is suitable for confirming the operational controls border;
The 3rd confirms the unit, is suitable for confirming the operation reference point;
The angle acquiring unit is suitable for obtaining the anglec of rotation of said operational controls borderline phase for said operation reference point;
The 4th confirms to be suitable for for each pictures in the said plurality of pictures unit, confirms that respectively its target location, the target location of said each pictures are associated with initial position and the said operational controls borderline phase of this picture anglec of rotation for said reference point.
14. the device of on webpage, realizing many figure rotations according to claim 13; It is characterized in that; The said the 4th confirms that the unit is suitable for respectively the initial position of each pictures in the said plurality of pictures is rotated the said anglec of rotation with respect to said reference point, to obtain its target location.
15. the device of on webpage, realizing many figure rotations according to claim 13 is characterized in that said operational controls border is arranged in same webpage with operation reference point and said selected plurality of pictures.
16. the device of on webpage, realizing many figure rotations according to claim 13 is characterized in that said operational controls border is for surrounding the minimum rectangle of said plurality of pictures.
17. the device of on webpage, realizing many figure rotations according to claim 16 is characterized in that said reference point is the center of said minimum rectangle.
18. the device of on webpage, realizing many figure rotations according to claim 13; It is characterized in that said first confirms that the unit is suitable for confirming 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.
19. the device of on webpage, realizing many figure rotations according to claim 13; It 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 said plurality of pictures.
20. the device of on webpage, realizing many figure rotations according to claim 19; It is characterized in that; The said the 4th confirms that the unit is suitable for the initial position at the center of each pictures in the said plurality of pictures is rotated the anglec of rotation of said operational controls borderline phase for said operation reference point with respect to said reference point, to obtain the target location at its center.
21. the device of on webpage, realizing many figure rotations according to claim 19; It is characterized in that; The said the 4th confirms that the unit is suitable for each pictures in the said plurality of pictures with respect to the anglec of rotation addition for said reference point of the initial rotation angle degree at its center and said operational controls borderline phase, to obtain the target anglec of rotation of this picture with respect to its center.
22. the device of on webpage, realizing many figure rotations according to claim 13 is characterized in that said angle acquiring unit comprises:
The DOM Document Object Model node is created the unit, is suitable for said operational controls border is shown as newly-built DOM Document Object Model node;
The point of rotation is confirmed the unit, is suitable for confirming to supply the user said operational controls border to be rotated the point of rotation of operation;
Angle is confirmed the unit, is suitable for the operation based on the user, confirms the anglec of rotation of the said point of rotation with respect to said operation reference point.
23. 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 13 to 22; And the pattern control module, said pattern control module is suitable for the target location of each pictures in the said plurality of pictures is updated in the CSS and shows.
24. the system that on webpage, realizes many figure rotations according to claim 23; It is characterized in that; Have at least one to be positioned at same figure layer with other pictures in the said plurality of pictures, said pattern control module also is suitable in said CSS the figure layer information of each pictures in the said plurality of pictures of maintenance.
25. the system that on webpage, realizes many figure rotations according to claim 23 is characterized in that also comprise the picture acquiring unit, said plurality of pictures is selected through said 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 CN102110149A (en) | 2011-06-29 |
| CN102110149B true 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) |
Families Citing this family (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| 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 |
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 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN102110149A (en) | 2011-06-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US11169694B2 (en) | Interactive layer for editing a rendering displayed via a user interface | |
| US20220236866A1 (en) | Method and system for section-based editing of a website page | |
| US11763067B2 (en) | User interface for editing web content | |
| JP4059802B2 (en) | Image display method | |
| TW201525851A (en) | Touch-based reorganization of page element | |
| CN106776939A (en) | A kind of image lossless mask method and system | |
| CN102110149B (en) | Method, device and system for realizing multi-picture rotation on webpage | |
| CN104424318A (en) | Method and device for controlling page elements | |
| US10417310B2 (en) | Content inker | |
| CN111602119A (en) | System and method for creating and managing interactive application networks | |
| CN113204401A (en) | Browser rendering method, terminal and storage medium | |
| CN107679219B (en) | Matching method and device, interactive intelligent panel and storage medium | |
| US8185818B2 (en) | Mixed techniques for HTML crosstab rendering | |
| JP2014132468A (en) | Image display method and image display program | |
| US20190004675A1 (en) | Flexible layout for calendars | |
| JP6264951B2 (en) | Drawing apparatus, program, and drawing method | |
| US20180173385A1 (en) | System and Method for Incremental Diagram Node Expansion | |
| CN115496050B (en) | Method and device for drawing configuration of head-of-table oblique line, electronic equipment and storage medium | |
| JP4790693B2 (en) | Image display method and image display program | |
| US20140365930A1 (en) | Remote display of content elements | |
| JP5475856B2 (en) | Image display method and image display program | |
| JP5364746B2 (en) | Image display method and image display program | |
| JP2016119978A (en) | Urban development game program | |
| JP5646432B2 (en) | Image display apparatus and computer program | |
| CN115688702A (en) | Information processing method and device |
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 | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20121017 Termination date: 20210217 |