CN109284457A - A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops - Google Patents
A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops Download PDFInfo
- Publication number
- CN109284457A CN109284457A CN201811018909.4A CN201811018909A CN109284457A CN 109284457 A CN109284457 A CN 109284457A CN 201811018909 A CN201811018909 A CN 201811018909A CN 109284457 A CN109284457 A CN 109284457A
- Authority
- CN
- China
- Prior art keywords
- gesture
- angle
- sector
- sliding
- canvas
- 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.)
- Pending
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
- G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present invention relates to web pages to slide disk technique field, realize method that sliding turntable stops more particularly to a kind of draw based on JavaScript event monitoring and canvas, including localized view center, angle A=0 that initializes turntable initial rotation, monitor starting position when gesture touches screen, gesture monitors position when gesture frames out after persistently moving, the angle that calculates gesture sliding, calculate start-stop angle value, determine start-stop angle value, obtain data.Advantageous effect of the invention: comprehensive JavaScript event monitoring and canvas picture technology realize one can gesture rotation turntable, and obtain related data information corresponding with pointer position when showing that gesture stops, the pointer can be placed on any edge in fan section according to design drawing, show visualized data in new form, while realizing functional and landscaping effect unification.
Description
Technical field
The present invention relates to web pages to slide disk technique field, and in particular to one kind is based on JavaScript event monitoring
The method that sliding turntable stops is realized with canvas picture.
Background technique
There is two classes technology relevant to web page sliding turntable at present, one kind is turntable for lucky draw, that is, a turntable is clicked,
A certain region is rested on after rotation at random to obtain drawing outcomes；Another kind of is the corresponding number of a certain sector acquisition for clicking turntable
According to etc. relevant informations, such as echarts, highcharts.
Summary of the invention
It is an object of the invention to overcome problems of the prior art, provide a kind of based on JavaScript event prison
Listen with canvas draw realize sliding turntable stop method, it may be implemented with lightweight code realize can gesture rotation turn
Disk, and related data information corresponding with pointer position when showing that gesture stops is obtained, which can be placed on fan according to design drawing
Any edge in shape area.
To realize above-mentioned technical purpose and the technique effect, the present invention is achieved by the following technical solutions:
A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops, including is as follows
Step:
Step 1, localized view center: the center of localized view, point passes through canvas technology centered on the position
The sector figure of specified radius is drawn, and records the corresponding start-stop angle value in each sector；
Step 2, angle A=0 for initializing turntable initial rotation；
Starting position when step 3, monitoring gesture touch screen；
Step 4, gesture monitor position when gesture frames out after persistently moving；
Step 5, the angle for calculating gesture sliding: it is sliding that gesture is calculated according to center, step 2 and the step 3 of view
Dynamic angle B；
Step 6 calculates start-stop angle value: controlling the angle of sector rotation A+B after gesture each time, and passes through B weight
Newly calculate the corresponding start-stop angle value in each sector；
Step 7 determines start-stop angle value: recycle the start-stop angle value of each sector after gesture each time, and and C into
Row compares, if start angle position is less than C and angle at the end position is greater than C, i.e. expression C makes a decision in the sector；
Step 8 obtains data: obtaining in the step 7 after the index value of sector, obtains the corresponding dependency number in the sector
According to.
Further, in the step 5, the angle of the calculated gesture sliding, is positive angle angle value clockwise, inverse
Hour hands are negative angle angle value.
Further, in the step 6, if start-stop angle value recirculates, while again beyond 2 π or when being less than -2 π
Assignment A+=B.
Advantageous effect of the invention: comprehensive JavaScript event monitoring and canvas picture technology realization one can gestures turn
Dynamic turntable, and related data information corresponding with pointer position when showing that gesture stops is obtained, which can be according to design drawing
It is placed on any edge in fan section, shows visualized data in new form, while realizing functional and landscaping effect unification.
Specific embodiment
In order to be easy to understand the technical means, the creative features, the aims and the efficiencies achieved by the present invention, below it is right
Technical solution in the embodiment of the present invention is clearly and completely described, it is clear that described embodiment is only the present invention one
Section Example, instead of all the embodiments.Based on the embodiments of the present invention, those of ordinary skill in the art are not making
All other embodiment obtained under the premise of creative work out, shall fall within the protection scope of the present invention.
A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops, including is as follows
Step:
Step 1, localized view center: the center of localized view, point passes through canvas technology centered on the position
The sector figure of specified radius is drawn, and records the corresponding start-stop angle value in each sector；
Step 2, angle A=0 for initializing turntable initial rotation；
Starting position when step 3, monitoring gesture touch screen；
Step 4, gesture monitor position when gesture frames out after persistently moving；
Step 5, the angle for calculating gesture sliding: it is sliding that gesture is calculated according to center, step 2 and the step 3 of view
Dynamic angle B；
Step 6 calculates start-stop angle value: controlling the angle of sector rotation A+B after gesture each time, and passes through B weight
Newly calculate the corresponding start-stop angle value in each sector；
Step 7 determines start-stop angle value: recycle the start-stop angle value of each sector after gesture each time, and and C into
Row compares, if start angle position is less than C and angle at the end position is greater than C, i.e. expression C makes a decision in the sector；
Step 8 obtains data: obtaining in the step 7 after the index value of sector, obtains the corresponding dependency number in the sector
According to.
In the step 5, the angle of the calculated gesture sliding is positive angle angle value, is counterclockwise clockwise
Negative angle angle value.
In the step 6, if start-stop angle value recirculates, while assignment A+=B again beyond 2 π or when being less than -2 π.
Present invention disclosed above preferred embodiment is only intended to help to illustrate the present invention.There is no detailed for preferred embodiment
All details are described, are not limited the invention to the specific embodiments described.Obviously, according to the content of this specification,
It can make many modifications and variations.These embodiments are chosen and specifically described to this specification, is in order to better explain the present invention
Principle and practical application, so that skilled artisan be enable to better understand and utilize the present invention.The present invention is only
It is limited by claims and its full scope and equivalent.
Claims (3)
1. a kind of method for realizing that sliding turntable stops of being drawn based on JavaScript event monitoring and canvas, feature are existed
In including the following steps:
Step 1, localized view center: the center of localized view, point is drawn by canvas technology centered on the position
The sector figure of specified radius, and record the corresponding start-stop angle value in each sector；
Step 2, angle A=0 for initializing turntable initial rotation；
Starting position when step 3, monitoring gesture touch screen；
Step 4, gesture monitor position when gesture frames out after persistently moving；
Step 5, the angle for calculating gesture sliding: gesture sliding is calculated according to center, step 2 and the step 3 of view
Angle B；
Step 6 calculates start-stop angle value: controlling the angle of sector rotation A+B after gesture each time, and is counted again by B
Calculate the corresponding start-stop angle value in each sector；
Step 7 determines start-stop angle value: recycling the start-stop angle value of each sector after gesture each time, and is compared with C
Compared with if start angle position is less than C and angle at the end position is greater than C, i.e. expression C makes a decision in the sector；
Step 8 obtains data: obtaining in the step 7 after the index value of sector, obtains the corresponding related data in the sector.
2. a kind of drawn based on JavaScript event monitoring and canvas according to claim 1 realizes that sliding turntable stops
The method stayed, which is characterized in that in the step 5, the angle of calculated gesture sliding, as positive-angle clockwise
Value is negative angle angle value counterclockwise.
3. a kind of drawn based on JavaScript event monitoring and canvas according to claim 1 realizes that sliding turntable stops
The method stayed, which is characterized in that in the step 6, if start-stop angle value recirculates, while again beyond 2 π or when being less than -2 π
New assignment A+=B.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811018909.4A CN109284457A (en) | 2018-09-03 | 2018-09-03 | A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811018909.4A CN109284457A (en) | 2018-09-03 | 2018-09-03 | A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109284457A true CN109284457A (en) | 2019-01-29 |
Family
ID=65184059
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811018909.4A Pending CN109284457A (en) | 2018-09-03 | 2018-09-03 | A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109284457A (en) |
Cited By (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110889056A (en) * | 2019-12-06 | 2020-03-17 | 北京百度网讯科技有限公司 | Page marking method and device |
| CN111897469A (en) * | 2020-07-06 | 2020-11-06 | 上海泛微网络科技股份有限公司 | Real-time data processing method, device, equipment and storage medium |
| CN111949119A (en) * | 2019-05-15 | 2020-11-17 | 和硕联合科技股份有限公司 | Data quick browsing method for electronic device |
| CN112685111A (en) * | 2020-12-25 | 2021-04-20 | 百果园技术(新加坡)有限公司 | Control data processing method and related equipment |
Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107562507A (en) * | 2017-08-24 | 2018-01-09 | 成都药王科技股份有限公司 | One kind simulation rotating disk and its generation method |
-
2018
- 2018-09-03 CN CN201811018909.4A patent/CN109284457A/en active Pending
Patent Citations (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107562507A (en) * | 2017-08-24 | 2018-01-09 | 成都药王科技股份有限公司 | One kind simulation rotating disk and its generation method |
Non-Patent Citations (1)
| Title |
|---|
| CYDIACEN: ""利用canvas实现抽奖转盘"", 《HTTPS://WWW.CNBLOGS.COM/CYDIACEN/P/5406811.HTML》 * |
Cited By (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111949119A (en) * | 2019-05-15 | 2020-11-17 | 和硕联合科技股份有限公司 | Data quick browsing method for electronic device |
| TWI728361B (en) * | 2019-05-15 | 2021-05-21 | 和碩聯合科技股份有限公司 | Fast data browsing method for using in an elelctronic device |
| US11209977B2 (en) | 2019-05-15 | 2021-12-28 | Pegatron Corporation | Quick data browsing method for an electronic device |
| CN110889056A (en) * | 2019-12-06 | 2020-03-17 | 北京百度网讯科技有限公司 | Page marking method and device |
| CN110889056B (en) * | 2019-12-06 | 2023-08-22 | 北京百度网讯科技有限公司 | Page marking method and device |
| CN111897469A (en) * | 2020-07-06 | 2020-11-06 | 上海泛微网络科技股份有限公司 | Real-time data processing method, device, equipment and storage medium |
| CN112685111A (en) * | 2020-12-25 | 2021-04-20 | 百果园技术(新加坡)有限公司 | Control data processing method and related equipment |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN109284457A (en) | A method of it is drawn based on JavaScript event monitoring and canvas and realizes that sliding turntable stops | |
| US9158430B2 (en) | Target element zoom | |
| US10203871B2 (en) | Method for touch input and device therefore | |
| US8707174B2 (en) | Multi-screen hold and page-flip gesture | |
| US8539384B2 (en) | Multi-screen pinch and expand gestures | |
| US9128605B2 (en) | Thumbnail-image selection of applications | |
| US9158445B2 (en) | Managing an immersive interface in a multi-application immersive environment | |
| US10001909B2 (en) | Touch optimizations for range slider controls | |
| US9329764B2 (en) | Overscroll visual effects | |
| US9563983B2 (en) | Filtering information within augmented reality overlays | |
| US20120299968A1 (en) | Managing an immersive interface in a multi-application immersive environment | |
| US20110209039A1 (en) | Multi-screen bookmark hold gesture | |
| US20110209102A1 (en) | Multi-screen dual tap gesture | |
| US20110209103A1 (en) | Multi-screen hold and drag gesture | |
| US20110209058A1 (en) | Multi-screen hold and tap gesture | |
| US20140340304A1 (en) | Efficient fetching of a map data during animation | |
| US20160259405A1 (en) | Eye Gaze for Automatic Paging | |
| DE202014004544U1 (en) | Device and graphical user interface for providing navigation and search functionalities | |
| US20160070357A1 (en) | Parametric Inertia and APIs | |
| US8542207B1 (en) | Pencil eraser gesture and gesture recognition method for touch-enabled user interfaces | |
| CN105159574A (en) | Method and apparatus for controlling device operation through gesture on screen of electronic device | |
| CN105094622B (en) | Adjust the method and apparatus of form col width | |
| US20160259608A1 (en) | Filtering information within augmented reality overlays | |
| US11042960B2 (en) | Scaling content on touch-based systems | |
| KR20090102727A (en) | Method and device for controlling screen size of display device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190129 |