CN107423366A - A kind of carousel figure switching method and device - Google Patents
A kind of carousel figure switching method and device Download PDFInfo
- Publication number
- CN107423366A CN107423366A CN201710509170.6A CN201710509170A CN107423366A CN 107423366 A CN107423366 A CN 107423366A CN 201710509170 A CN201710509170 A CN 201710509170A CN 107423366 A CN107423366 A CN 107423366A
- Authority
- CN
- China
- Prior art keywords
- section
- canvas
- picture
- carousel
- cutting
- 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
- 238000000034 method Methods 0.000 title claims abstract description 43
- 238000010422 painting Methods 0.000 claims abstract description 90
- 238000005520 cutting process Methods 0.000 claims abstract description 58
- 238000006073 displacement reaction Methods 0.000 claims description 17
- 238000004891 communication Methods 0.000 claims description 3
- 230000005055 memory storage Effects 0.000 claims description 2
- 230000000694 effects Effects 0.000 abstract description 9
- 238000005516 engineering process Methods 0.000 abstract description 5
- 238000012545 processing Methods 0.000 abstract description 4
- 238000004590 computer program Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 230000008569 process Effects 0.000 description 3
- 238000000926 separation method Methods 0.000 description 3
- 230000001052 transient effect Effects 0.000 description 3
- 241001269238 Data Species 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000009826 distribution Methods 0.000 description 1
- 235000013399 edible fruits Nutrition 0.000 description 1
- 239000004744 fabric Substances 0.000 description 1
- 230000008676 import Effects 0.000 description 1
- 230000001788 irregular Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 239000002245 particle Substances 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
- 238000013519 translation Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/40—Information retrieval; Database structures therefor; File system structures therefor of multimedia data, e.g. slideshows comprising image and additional audio data
- G06F16/43—Querying
- G06F16/438—Presentation of query results
- G06F16/4387—Presentation of query results by the use of playlists
- G06F16/4393—Multimedia presentations, e.g. slide shows, multimedia albums
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
The present invention, which provides a kind of carousel figure switching method and device, described method, to be included：S1, picture is imported in canvas painting canvas, and cutting is carried out to canvas painting canvas, obtain multiple sections of picture；S2, according to the mobile total time of setting, in canvas painting canvas, each section is moved to final position simultaneously from initial position；S3, split is carried out to all sections at final position, re-forms whole picture, to complete the switching of carousel figure, wherein, the mobile total time of each section is equal.The present invention carries out pixelation processing by canvas technologies to picture, enabling each pixel of every pictures is controlled, can complete particlized and diversified carousel effect.
Description
Technical field
The present invention relates to field of computer technology, more particularly, to a kind of carousel figure switching method and device.
Background technology
Carousel figure is the advertisement position for the broadcasting advertisement or homepage important information commonly used in webpage, generally with picture or bulk
Textual representation, for current, carousel figure realizes that effect is basically divided into following a few classes in webpage：Fade out and fade in class, transverse axis side
Switch class to class, picture replacement class and 3D rotary shafts is slided.
This common three classes carousel figure of in the market, its realization principle is fairly simple, and main application method is all to whole figure
Piece carries out change or lateral displacement, 3d swing offsets of transparency etc. and is changed to complete the switching of carousel figure.
The mode of above-mentioned several carousel figure switchings is the operation carried out to whole picture, picture can not be carried out more smart
Thin control, it can not also realize diversified carousel effect.
The content of the invention
The present invention provides a kind of carousel figure switching method for overcoming above mentioned problem or solving the above problems at least in part
And device.
According to the first aspect of the invention, there is provided a kind of carousel figure switching method, including：
S1, picture is imported in canvas painting canvas, and cutting is carried out to canvas painting canvas, obtain multiple sections of picture；
S2, it is in canvas painting canvas, each section is simultaneously mobile from initial position according to the mobile total time of setting
To final position；
S3, split is carried out to all sections at final position, whole picture is re-formed, to complete cutting for carousel figure
Change, wherein, the mobile total time of each section is equal.
Beneficial effects of the present invention are：Particlized is realized in picture progress cutting to carousel, passes through what each was cut into slices
Movement carries out pixelation processing to realize the switching of carousel figure, and by canvas technologies to picture, enabling to every
Each pixel of picture is controlled, and can complete particlized and diversified carousel effect.
On the basis of above-mentioned technical proposal, the present invention can also improve as follows.
Further, the image data is stored in the javaScript variables of web browser, and methods described is also wrapped
Include：
Object picture is constructed in the web browser, and the src source addresses of object picture are entered as picture address；
According to picture load request, web browser is loaded to picture automatically according to picture address, and loading is completed
Picture afterwards is stored in javaScript variables.
Further, cutting is carried out to canvas painting canvas in the step S1, obtaining multiple sections of picture includes：
Section laterally division number and longitudinally divided number of cutting into slices are set；
According to the overall width of canvas painting canvas and the horizontal width for dividing number, calculating single section of section, and according to
The total height of canvas painting canvas and longitudinally divided number of cutting into slices, calculate the height of single section；
According to the width and height of single section, cutting is carried out to whole picture, obtains multiple sections of picture.
Further, methods described also includes：
By each position in canvas painting canvas of the cutting into slices when pixel data of each section after section and cutting
Confidence breath is stored in javaScript objects, and wipes whole canvas painting canvas, wherein, each section is corresponding one
JavaScript objects.
Further, each is cut into slices from initial position simultaneously according to the mobile total time of setting in the step S2
Being moved to final position includes：
Section in each javaScript object is imported in canvas painting canvas, according to each section in canvas
Initial position and final position in painting canvas, calculate the moving direction and displacement of each section；
According to the mobile total time of setting and each displacement cut into slices, each mobile speed cut into slices is calculated
Degree；
According to the translational speed and moving direction of each section, each section is moved to finally from initial position
Position.
Further, the positional information of each section preserved in javaScript objects is existed as respective slice
Final position in canvas painting canvas.
According to the second aspect of the invention, a kind of carousel figure switching device is also provided, including：
Cutting module, for the picture for importing canvas painting canvas to be carried out into cutting, obtain multiple sections of picture；
Mobile module, for the mobile total time according to setting, in canvas painting canvas, each is cut into slices from initial bit
Put while be moved to final position；
Die section, for carrying out split to all sections at final position, whole picture is re-formed, to complete
The switching of carousel figure, wherein, the mobile total time of each section is equal.
Further, described device also includes setup module and computing module；
Setup module, for setting cut into slices laterally division number and longitudinally divided number of cutting into slices；
First computing module, number is laterally divided for the overall width according to canvas painting canvas and section, calculates single cuts
The width of piece, and the total height according to canvas painting canvas and longitudinally divided number of cutting into slices, calculate the height of single section；
The cutting module, is specifically used for：
According to the width and height of single section, cutting is carried out to whole picture, obtains multiple sections of picture.
Further, described device also includes the second computing module and the 3rd computing module；
Second computing module, for the initial position and most final position cut into slices according to each imported in canvas painting canvas
Put, calculate the moving direction and displacement of each section；
3rd computing module, for according to the mobile total time of setting and each displacement cut into slices, calculating every
The translational speed of one section；
The mobile module, is specifically used for：
According to the translational speed and moving direction of each section, each section is moved to finally from initial position
Position.
According to the third aspect of the invention we, a kind of equipment of carousel figure switching method, including processor are also provided
(processor), memory (memory) and bus；
The processor and memory complete mutual communication by the bus；
The memory storage has and by the programmed instruction of the computing device, the processor described program can be called to refer to
Order is able to carry out following method：
Picture is imported in canvas painting canvas, and cutting is carried out to canvas painting canvas, obtains multiple sections of picture；
According to the mobile total time of setting, in canvas painting canvas, each section is moved to simultaneously from initial position
Final position；
Split is carried out to all sections at final position, re-forms whole picture, to complete the switching of carousel figure,
Wherein, the mobile total time of each section is equal.
Brief description of the drawings
Fig. 1 is the carousel figure switching method flow chart of one embodiment of the invention；
Fig. 2 is that the carousel figure switching device of another embodiment of the present invention connects block diagram；
Fig. 3 is the integrated connection block diagram of the carousel figure switching device of another embodiment of the invention；
Fig. 4 is that the equipment of the carousel figure switching method of further embodiment of the present invention connects block diagram.
Embodiment
With reference to the accompanying drawings and examples, the embodiment of the present invention is described in further detail.Implement below
Example is used to illustrate the present invention, but is not limited to the scope of the present invention.
Referring to Fig. 1, there is provided the carousel figure switching method of one embodiment of the invention, suitable for the switching application of carousel figure
Field, carousel figure switching method include：S1, picture is imported in canvas painting canvas, and cutting is carried out to canvas painting canvas, obtained
Multiple sections of picture；S2, according to the mobile total time of setting, in canvas painting canvas, each is cut into slices from initial position
It is moved to final position simultaneously；S3, split is carried out to all sections at final position, whole picture is re-formed, with complete
Into the switching of carousel figure, wherein, the mobile total time of each section is equal.
During webpage design, what carousel figure referred to commonly use in webpage plays advertisement or the advertisement of homepage important information
Position, generally uses picture and bulk textual representation.Traditional switching mode to carousel figure is that whole picture is handled, such as
Transparency, X direction to picture are slided or 3d rotary shafts switch etc., to realize the carousel switching to picture.Traditional side
Formula can only enter line translation to whole pictures, and fine control can not be carried out to the block of pixels in picture.Therefore, the present embodiment provides
A kind of carousel effect that can be realized the method being controlled to the block of pixels in picture, particlized can be realized.
The canvas technologies used in the present embodiment are simply introduced first, canvas is one that HTML5 is released
Individual special tag, pictute are a painting canvas, and picture, word or lines etc. can be placed on the painting canvas.Also may be used
With the interface defined in canvas, imitated by the calling interface various patterns that can place or complete on canvas painting canvas
Fruit etc., it is one kind that picture is placed in the present embodiment.
In the method for whole embodiment, the picture for needing carousel is imported in canvas painting canvas first, and to whole
Canvas painting canvas carries out cutting, obtains multiple sections of picture.Then, all sections are moved on canvas painting canvas
It is dynamic, when it is implemented, after multiple sections of picture are obtained, canvas painting canvas is wiped, then leads all sections of picture
Enter canvas painting canvas, wherein, all sections are random distributions on canvas painting canvas, namely each section is in canvas
Initial position on painting canvas is random.Then each is cut into slices and is moved to final position from initial position, and is set all
Cut into slices and be moved to the total time of final position from initial position, it is necessary to which explanation, the mobile total time of each section is phase
Deng, so, each section is moved to final position from initial position, can reach final position simultaneously, in final position
Place, split again is carried out to all sections, forms a complete picture, realize the carousel switching of picture.The present embodiment
Pixelation processing is carried out to picture by canvas, enabling each pixel of every pictures is controlled, can be completed
Particlized and diversified carousel effect.
In one embodiment of the invention, the image data is stored in the javaScript variables of web browser,
Methods described also includes：Object picture is constructed in the web browser, and by the src source addresses of object picture with being entered as picture
Location；According to picture load request, web browser loads to picture automatically according to picture address, and by after the completion of loading
Picture is stored in javaScript variables.
Because the handoff procedure of carousel figure is carried out in web browser, therefore, it is necessary to web browser is needed to figure
Piece is loaded.In the present embodiment, it is not necessary to web tab is placed in webpage, can be straight in javaScript environment
Construction Image object pictures are connect, and the src source addresses of the object picture are entered as picture address.When web browser parses
To after picture address, can be Loaded Image automatically according to picture address, and the picture after the completion of loading is stored in javaScript
In variable.
In another embodiment of the present invention, cutting is carried out to canvas painting canvas in the step S1, obtains picture
Multiple sections include：Section laterally division number and longitudinally divided number of cutting into slices are set；According to the overall width of canvas painting canvas and
Section laterally divides number, calculates the width of single section, and longitudinally divided according to the total height of canvas painting canvas and section
Number, calculate the height of single section；According to the width and height of single section, cutting is carried out to whole picture, obtains picture
Multiple sections.
After original picture is stored in into javaScript variables, when needing specific cut, pass through
Original picture is drawn into canvas painting canvas by this interface of canvas.drawImage ().Specifically cut to canvas painting canvas
During point, it is thus necessary to determine that the width and height of each section when carousel switches, namely the size of each section.Its
In, each section can be regular or irregular, can be determined according to real needs.It is easy for description,
In the present embodiment, each section is regular, and is directed to same pictures, and the size of each section is identical, often
The area of one section is smaller, then the quantity of the section after cutting is more.
When carrying out cutting to canvas painting canvas, it is necessary to know the width and height of each section, therefore, then cut
/ it is preceding, it is necessary to obtain the total height CanvasHeight of overall width CanvasWidth, Canvas painting canvas of canvas painting canvas,
Section laterally divides number SlideWidthNum and the longitudinally divided number SlideHeightNum that cuts into slices.Pass through this four parameters
Can calculates the width and height of each section, wherein, the width S lideWidth=of single section
CanvasWideth/SlideWidthNum, the height SlideHeight=CanvasHeight/ of single section
SlideHeightNum.It can be seen from above-mentioned formula the width of single section, highly with section number be inversely proportional, therefore, when
When section laterally divides the number SlideWidthNum and longitudinally divided number SlideHeightNum of section sufficiently large, each
The size of section is with regard to sufficiently small, it is possible to reaches as particle state.
After obtaining width and the height of each section, it is possible to carry out cutting to whole canvas painting canvas, obtain each
Pixel data in individual cutting, by each section when the pixel data of each section and cutting in canvas painting canvas
Positional information is stored in javaScript slice objects, wherein, each section is corresponding to define a javaScript section
Object.After all slice of datas are obtained, canvas painting canvas is wiped, allows canvas painting canvas to be in space state again.
In one embodiment of the invention, each is cut into slices according to the mobile total time of setting in the step S2
Being moved to final position simultaneously from initial position includes：Section in each javaScript object is imported into canvas painting canvas
In, according to initial position and final position of each section in canvas painting canvas, calculate each moving direction cut into slices
And displacement；According to the mobile total time of setting and each displacement cut into slices, the movement of each section is calculated
Speed；According to the translational speed and moving direction of each section, each section is moved to most final position from initial position
Put.
Above-described embodiment will be stored in javaScript objects to each slice of data after canvas painting canvas cuttings,
The present embodiment imports the section in javaScript objects in the canvas painting canvas of foregoing space state.By each
When section is imported in canvas painting canvas, each initial position in canvas painting canvas of cutting into slices is defined at random, i.e., each is cut
Piece is randomly dispersed in canvas painting canvas, and can define the final position of each section.According to the first of each section
Beginning position and final position, calculate the moving direction and displacement of each section.
When calculating the moving direction and displacement of each section, if the horizontal seat of the initial position of each section
InitPosX, longitudinal coordinate initPosY are designated as, the lateral coordinates of the final position of each section are endPosX, longitudinal direction
Coordinate is endPosY, then each section moving direction direction=arcTan ((initPosY-endPosY)/
(initPosX-endPosX)), the unit of its value is angular unit.During each section is mobile, each section
Mobile lateral separation distanceX=initPosX-endPosX are needed, each section needs mobile fore-and-aft distance
DistanceY=initPosY-endPosY.Calculating more than, it becomes possible to obtain moving direction and the shifting of each section
Dynamic distance.
When the moving direction for calculating each section and after displacement, then according to the mobile total time of setting and
The displacement of each section, calculate the translational speed of each section, i.e., the displacement of section per second.If all sections
Mobile total time is Time, then the mobile lateral separation of section per second is PerDisX=distanceX/Time, section per second
Mobile fore-and-aft distance is PerDisY=distanceY/Time.
After the above-mentioned moving direction for calculating each section and translational speed, within the mobile total time of setting, press
According to the translational speed and moving direction of each section, each section is moved to final position from initial position.Due to
The section that the total time of each section movement is equal therefore all reaches final position simultaneously., will be all at final position
Section piece together again, formed a complete picture.So during each section is mobile, in regarding for user
In feel, each section is constantly being moved towards final position, and after mobile total time Time, all sections are all
Just return to final position, it is possible to which split is a complete picture again, is to complete during this split
The switching of carousel figure.
It should be noted that due to needing at the final position of all sections, all sections have been pieced together again
Whole picture, therefore, in the present embodiment, after cutting will be carried out to canvas painting canvas, it is stored in javaScript objects
Position of the current slice in canvas painting canvas as subsequent movement during the final position cut into slices.Due to firm cutting when
Wait, each section can make up the complete picture of a width on current position, therefore, each section of firm cutting is existed
Positional information in canvas painting canvas is defined as the final position of each section during subsequent movement, this ensures that working as
When all sections reach final position, still can split be a complete picture.
After the completion of the split process of a pictures, canvas painting canvas can be wiped, cutting is carried out to an other pictures
With the process of split, when carrying out cutting to other picture, the difference that each can be set to cut into slices is wide high, can also set
The different mobile total times of each section, to realize different carousel effects, the quantity of section is more, can reach
The effect of particlized carousel.
Referring to Fig. 2, there is provided a kind of carousel figure switching system of another embodiment of the present invention, including cutting module 21,
Mobile module 22 and die section 23.
Cutting module 21, for the picture for importing canvas painting canvas to be carried out into cutting, obtain multiple sections of picture；
Mobile module 22, for the mobile total time according to setting, in canvas painting canvas, each is cut into slices from initial
Position is moved to final position simultaneously；
Die section 23, for carrying out split to all sections at final position, whole picture is re-formed, with complete
Into the switching of carousel figure, wherein, the mobile total time of each section is equal.
Referring to Fig. 3, also include constructing module 24, memory module in the carousel figure switching system of another embodiment of the present invention
25th, setup module 26, the first computing module 27, the second computing module 28 and the 3rd computing module 28.
Constructing module 24, for constructing object picture in the web browser, and by the src source address assignment of object picture
For picture address.
Memory module 25, for being added automatically to picture according to picture address according to picture load request, web browser
Carry, and the picture after the completion of loading is stored in javaScript variables.
Setup module 26, for setting cut into slices laterally division number and longitudinally divided number of cutting into slices.
First computing module 27, number is laterally divided for the overall width according to canvas painting canvas and section, is calculated single
The width of section, and the total height according to canvas painting canvas and longitudinally divided number of cutting into slices, calculate the height of single section.
The cutting module 21, specifically for the width and height according to single section, cutting is carried out to whole picture, obtained
To multiple sections of picture.
Above-mentioned memory module 25, it is additionally operable to exist the pixel data of each section after section and current slice
Positional information in canvas painting canvas is stored in javaScript objects, and wipes whole canvas painting canvas, wherein, each
The corresponding javaScript object of section.
Second computing module 28, for the section in each javaScript object to be imported in canvas painting canvas, root
According to initial position and final position of each section in canvas painting canvas, moving direction and the movement of each section are calculated
Distance.
3rd computing module 29, for according to the mobile total time of setting and each displacement cut into slices, calculating
The translational speed of each section.
Fig. 4 shows the structured flowchart of the equipment of the carousel figure switching method of the embodiment of the present application.
Reference picture 4, the equipment of carousel figure switching method include：Processor (processor) 401, memory (memory)
402 and bus 403；Wherein, the processor 401 and memory 402 complete mutual communication by the bus 403.
The processor 401 is used to call the programmed instruction in the memory 402, to perform above-mentioned each method embodiment
The method provided, such as including：Picture is imported in canvas painting canvas, and cutting is carried out to canvas painting canvas, obtains picture
Multiple sections；It is in canvas painting canvas, each section is simultaneously mobile from initial position according to the mobile total time of setting
To final position；Split is carried out to all sections at final position, whole picture is re-formed, to complete cutting for carousel figure
Change, wherein, the mobile total time of each section is equal.
The present invention discloses a kind of computer program product, and the computer program product can including being stored in non-transient computer
The computer program in storage medium is read, the computer program includes programmed instruction, when programmed instruction is computer-executed, meter
Calculation machine is able to carry out the carousel figure switching method that above-mentioned corresponding embodiment is provided, such as including：Picture is imported into canvas to draw
In cloth, and cutting is carried out to canvas painting canvas, obtain multiple sections of picture；According to the mobile total time of setting, in canvas
In painting canvas, each section is moved to final position simultaneously from initial position；All sections are carried out at final position
Split, whole picture is re-formed, to complete the switching of carousel figure, wherein, the mobile total time of each section is equal.
The present invention also provides a kind of non-transient computer readable storage medium storing program for executing, and the non-transient computer readable storage medium storing program for executing is deposited
Computer instruction is stored up, the computer instruction makes computer perform the carousel figure switching method that above-mentioned corresponding embodiment is provided, example
Such as include：Picture is imported in canvas painting canvas, and cutting is carried out to canvas painting canvas, obtains multiple sections of picture；According to
The mobile total time of setting, in canvas painting canvas, each section is moved to final position simultaneously from initial position；Most
Whole opening position carries out split to all sections, re-forms whole picture, to complete the switching of carousel figure, wherein, each
The mobile total time of section is equal.
One of ordinary skill in the art will appreciate that：Realizing all or part of step of above method embodiment can pass through
Programmed instruction related hardware is completed, and foregoing program can be stored in a computer read/write memory medium, the program
Upon execution, the step of execution includes above method embodiment；And foregoing storage medium includes：ROM, RAM, magnetic disc or light
Disk etc. is various can be with the medium of store program codes.
The embodiments such as the equipment of carousel figure switching method described above are only schematical, wherein as separation unit
The unit that part illustrates can be or may not be physically separate, can be as the part that unit is shown or also may be used
Not to be physical location, you can with positioned at a place, or can also be distributed on multiple NEs.Can be according to reality
Need select some or all of module therein to realize the purpose of this embodiment scheme.Those of ordinary skill in the art exist
In the case of not paying performing creative labour, you can to understand and implement.
Through the above description of the embodiments, those skilled in the art can be understood that each embodiment can
Realized by the mode of software plus required general hardware platform, naturally it is also possible to pass through hardware.Based on such understanding, on
The part that technical scheme substantially in other words contributes to prior art is stated to embody in the form of software product, should
Computer software product can store in a computer-readable storage medium, such as ROM/RAM, magnetic disc, CD, including some fingers
Make to cause a computer equipment (can be personal computer, server, or network equipment etc.) to perform each implementation
Some Part Methods of example or embodiment.
A kind of carousel figure switching method provided by the invention and system, cutting is carried out to picture and realizes particlized, by right
The switching of carousel figure is realized in movement of each section, carries out pixelation processing to picture by canvas, enabling right
Each pixel per pictures is controlled, and can complete particlized and diversified carousel effect.
Finally, the present processes are only preferable embodiment, are not intended to limit the scope of the present invention.It is all
Within the spirit and principles in the present invention, any modification, equivalent substitution and improvements made etc., the protection of the present invention should be included in
Within the scope of.
Claims (10)
- A kind of 1. carousel figure switching method, it is characterised in that including：S1, picture is imported in canvas painting canvas, and cutting is carried out to canvas painting canvas, obtain multiple sections of picture；S2, according to the mobile total time of setting, in canvas painting canvas, each section is moved to most simultaneously from initial position Final position is put；S3, split is carried out to all sections at final position, re-forms whole picture, to complete the switching of carousel figure, Wherein, the mobile total time of each section is equal.
- 2. carousel figure switching method as claimed in claim 1, it is characterised in that the image data is stored in web browser JavaScript variables in, methods described also includes：Object picture is constructed in the web browser, and the src source addresses of object picture are entered as picture address；According to picture load request, web browser loads to picture automatically according to picture address, and by after the completion of loading Picture is stored in javaScript variables.
- 3. carousel figure switching method as claimed in claim 1, it is characterised in that carried out in the step S1 to canvas painting canvas Cutting, obtaining multiple sections of picture includes：Section laterally division number and longitudinally divided number of cutting into slices are set；According to the overall width of canvas painting canvas and the horizontal width for dividing number, calculating single section of section, and according to The total height of canvas painting canvas and longitudinally divided number of cutting into slices, calculate the height of single section；According to the width and height of single section, cutting is carried out to whole picture, obtains multiple sections of picture.
- 4. carousel figure switching method as claimed in claim 3, it is characterised in that also include：Each position of section in canvas painting canvas when the pixel data of each section after section and cutting is believed Breath is stored in javaScript objects, and wipes whole canvas painting canvas, wherein, each section is corresponding one JavaScript objects.
- 5. carousel figure switching method as claimed in claim 4, it is characterised in that total according to the movement of setting in the step S2 Time, each section is moved into final position simultaneously from initial position includes：Section in each javaScript object is imported in the canvas painting canvas after erasing, existed according to each section Initial position and final position in canvas painting canvas, calculate the moving direction and displacement of each section；According to the mobile total time of setting and each displacement cut into slices, each translational speed cut into slices is calculated；According to the translational speed and moving direction of each section, each section is moved to most final position from initial position Put.
- 6. carousel figure switching method as claimed in claim 5, it is characterised in that each by what is preserved in javaScript objects Final position of the positional information of individual section as the section in canvas painting canvas.
- A kind of 7. carousel figure switching device, it is characterised in that including：Cutting module, for the picture for importing canvas painting canvas to be carried out into cutting, obtain multiple sections of picture；Mobile module, it is in canvas painting canvas, each section is same from initial position for the mobile total time according to setting When be moved to final position；Die section, for carrying out split to all sections at final position, whole picture is re-formed, to complete carousel The switching of figure, wherein, the mobile total time of each section is equal.
- 8. carousel figure switching device as claimed in claim 7, it is characterised in that described device also includes setup module and calculating Module；Setup module, for setting cut into slices laterally division number and longitudinally divided number of cutting into slices；First computing module, number is laterally divided for the overall width according to canvas painting canvas and section, calculates single section Width, and the total height according to canvas painting canvas and longitudinally divided number of cutting into slices, calculate the height of single section；The cutting module, is specifically used for：According to the width and height of single section, cutting is carried out to whole picture, obtains multiple sections of picture.
- 9. carousel figure switching device as claimed in claim 8, it is characterised in that described device also include the second computing module and 3rd computing module；Second computing module, for the initial position cut into slices according to each imported in canvas painting canvas and final position, meter Calculate the moving direction and displacement of each section；3rd computing module, for according to the mobile total time of setting and each displacement cut into slices, calculating each The translational speed of section；The mobile module, is specifically used for：According to the translational speed and moving direction of each section, each section is moved to most final position from initial position Put.
- 10. a kind of equipment of carousel figure switching method, it is characterised in that including processor (processor), memory And bus (memory)；The processor and memory complete mutual communication by the bus；The memory storage has can be by the programmed instruction of the computing device, and the processor calls described program instruction energy Enough perform the method as described in claim any one of 1-6.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710509170.6A CN107423366B (en) | 2017-06-28 | 2017-06-28 | Carousel graph switching method and device |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710509170.6A CN107423366B (en) | 2017-06-28 | 2017-06-28 | Carousel graph switching method and device |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN107423366A true CN107423366A (en) | 2017-12-01 |
| CN107423366B CN107423366B (en) | 2020-04-10 |
Family
ID=60427379
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710509170.6A Active CN107423366B (en) | 2017-06-28 | 2017-06-28 | Carousel graph switching method and device |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN107423366B (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109872284A (en) * | 2019-01-18 | 2019-06-11 | 平安普惠企业管理有限公司 | Image information desensitization method, device, computer equipment and storage medium |
| CN111273976A (en) * | 2020-01-09 | 2020-06-12 | 北京金山安全软件有限公司 | Animation carousel method and device |
| CN112269957A (en) * | 2020-11-11 | 2021-01-26 | 北京联创信安科技股份有限公司 | Picture processing method, device, equipment and storage medium |
| CN113791751A (en) * | 2021-09-27 | 2021-12-14 | 腾讯科技（深圳）有限公司 | Carousel graph display method and system, storage medium and terminal equipment |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070280544A1 (en) * | 2006-06-01 | 2007-12-06 | Oki Electric Industry Co., Ltd. | Method of dividing a picture into parts |
| CN103390053A (en) * | 2013-07-26 | 2013-11-13 | 贝壳网际（北京）安全技术有限公司 | Page switching control method and device of browser and client |
| CN104636141A (en) * | 2015-01-31 | 2015-05-20 | 国家电网公司 | Multi-interface animation switching method for same region |
| CN105302608A (en) * | 2015-11-10 | 2016-02-03 | 北京京东尚科信息技术有限公司 | Advertisement dynamic display method and device applied at moment of application starting |
| CN106548504A (en) * | 2015-09-23 | 2017-03-29 | 腾讯科技（深圳）有限公司 | Web animation generation method and device |
-
2017
- 2017-06-28 CN CN201710509170.6A patent/CN107423366B/en active Active
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20070280544A1 (en) * | 2006-06-01 | 2007-12-06 | Oki Electric Industry Co., Ltd. | Method of dividing a picture into parts |
| CN103390053A (en) * | 2013-07-26 | 2013-11-13 | 贝壳网际（北京）安全技术有限公司 | Page switching control method and device of browser and client |
| CN104636141A (en) * | 2015-01-31 | 2015-05-20 | 国家电网公司 | Multi-interface animation switching method for same region |
| CN106548504A (en) * | 2015-09-23 | 2017-03-29 | 腾讯科技（深圳）有限公司 | Web animation generation method and device |
| CN105302608A (en) * | 2015-11-10 | 2016-02-03 | 北京京东尚科信息技术有限公司 | Advertisement dynamic display method and device applied at moment of application starting |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109872284A (en) * | 2019-01-18 | 2019-06-11 | 平安普惠企业管理有限公司 | Image information desensitization method, device, computer equipment and storage medium |
| CN111273976A (en) * | 2020-01-09 | 2020-06-12 | 北京金山安全软件有限公司 | Animation carousel method and device |
| CN112269957A (en) * | 2020-11-11 | 2021-01-26 | 北京联创信安科技股份有限公司 | Picture processing method, device, equipment and storage medium |
| CN113791751A (en) * | 2021-09-27 | 2021-12-14 | 腾讯科技（深圳）有限公司 | Carousel graph display method and system, storage medium and terminal equipment |
| CN113791751B (en) * | 2021-09-27 | 2024-05-03 | 腾讯科技（深圳）有限公司 | Method and system for displaying carousel graphs, storage medium and terminal equipment |
Also Published As
| Publication number | Publication date |
|---|---|
| CN107423366B (en) | 2020-04-10 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107423366A (en) | A kind of carousel figure switching method and device | |
| US10430068B2 (en) | Method for displaying interface content and user equipment | |
| US20180027047A1 (en) | Adaptive tile framework | |
| CN102902545B (en) | Markup language element is decomposed for animation | |
| CN104216699B (en) | A kind of icon shows system based on HTML5 | |
| AU2019457052B2 (en) | Table processing method and apparatus, and intelligent interactive tablet and storage medium | |
| CN106775600A (en) | The processing method and processing device of HTML5 canvas painting canvas | |
| CN105786301B (en) | Method and device for switching display object under multi-window system | |
| IL276621B1 (en) | Browser for mixed reality systems | |
| CN105549936A (en) | Data table display method and apparatus | |
| CN104995622A (en) | Compositor support for graphics functions | |
| CN109543139A (en) | Convolution algorithm method, apparatus, computer equipment and computer readable storage medium | |
| US11620503B2 (en) | Neural network processing | |
| CN106548504A (en) | Web animation generation method and device | |
| CN106844606A (en) | The focus processing method and processing device of webpage | |
| CN109976632A (en) | Text animation control methods and device, storage medium and processor | |
| CN105468656B (en) | Webpage background image generation method and system | |
| CN110321184B (en) | Scene mapping method and computer storage medium | |
| CN110020291B (en) | Webpage layout processing method and device | |
| CN113867862B (en) | List page layout method and computing device | |
| CN106033349A (en) | Object position adjusting method and device | |
| CN104408135A (en) | Webpage thermodynamic diagram loading method and device | |
| CN111428455B (en) | Form management method, device, equipment and storage medium | |
| CN113805781A (en) | Chart component arrangement method, device, equipment, storage medium and program product | |
| KR20230145478A (en) | Display update method and device for linking multiple terminals |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20240202 Address after: Room 801, 85 Kefeng Road, Huangpu District, Guangzhou City, Guangdong Province Patentee after: Yami Technology (Guangzhou) Co.,Ltd. Country or region after: China Address before: 430000 East Lake Development Zone, Wuhan City, Hubei Province, No. 1 Software Park East Road 4.1 Phase B1 Building 11 Building Patentee before: WUHAN DOUYU NETWORK TECHNOLOGY Co.,Ltd. Country or region before: China |
|
| TR01 | Transfer of patent right |