Document display method and device
By monitoring the user's screen sliding events and using the rotation angle of the turntable image to synchronously rotate the document page content, the problems of poor transition effect and continuity during document page turning are solved, and the consistency of user experience and page design is improved.
Patent Information
- Application Number
- CN202411378691.9
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- Filing Date
- 2024-09-30
- Publication Date
- 2025-09-30
- Estimated Expiration
- 2044-09-30
AI Technical Summary
In the prior art, the transition effect and continuity during document page turning are poor, resulting in a poor user experience, especially when the theme effects of adjacent pages are not coordinated and the abrupt phenomenon is serious under limited screen size.
By monitoring the user's screen sliding events, the rotation angle of the turntable image is determined, and the turntable image and its corresponding document page content are rotated synchronously according to the angle. The turntable is used to control page turning so that all pages are distributed on the turntable, ensuring a unified page design style.
It effectively solves the problems of poor transition effect and continuity during page turning, provides a better user experience, and improves the consistency of page design style.
Smart Images

Figure CN119356577B_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the field of image processing technology and can also be used in the financial field, and in particular to a document display method and device. Background Art
[0002] With the development of the Internet, more and more applications (apps) have launched the function of annual user reports to display statistics on users' main data and usage habits in the past year.
[0003] The most common approach for annual reports is to use a page-flipping solution. Whether flipping left or right or up or down, each page is the same size as the user's phone screen. This results in poor transition quality and continuity, and users need to swipe a long distance to turn the page, resulting in a poor user experience.
[0004] Specifically, the current page-turning solution is limited by screen size, requiring each report page to be displayed one screen at a time. This results in poor page continuity during page turning. If the themes of adjacent pages are not well designed, the display will be abrupt due to the conflicting themes, resulting in a poor user experience.
[0005] This section is intended to provide a background or context to the embodiments of the invention that are recited in the claims. No statement herein is admitted to be prior art by virtue of its inclusion in this section. Summary of the Invention
[0006] Embodiments of the present invention provide a document display method and device to overcome the problems of poor transition effect and continuity during a document page turning process.
[0007] An embodiment of the present invention provides a document display method, including:
[0008] Monitor user screen sliding events, and determine real-time location information of the user's touch point based on the user screen sliding events;
[0009] determining a rotation angle of the turntable image based on real-time position information of the user touch point, wherein the rotation center of the turntable image is located on or outside a boundary line of the screen display area, and the rotation angle of the turntable image is compared to an original rotation angle when the turntable image is not rotated;
[0010] According to the rotation angle of the turntable image, the turntable image is rotated and the document page content corresponding to the turntable image displayed in the screen display area is rotated or displayed, wherein the turntable image is used as the background image of the document, and each time the turntable image rotates a specific angle, a new page content is displayed in the screen display area.
[0011] In some embodiments, monitoring a user sliding screen event and determining real-time location information of a user touch point according to the user sliding screen event includes:
[0012] Monitoring an event in which a user starts touching the screen, and determining, based on the event in which the user starts touching the screen, first position information of a touch point when the user starts touching the screen;
[0013] Monitor the user sliding screen event, and determine the real-time location information of the user's touch point based on the user sliding screen event;
[0014] An event of a user ending touching the screen is monitored, and second position information of the touch point when the user ends touching the screen is determined according to the event of the user ending touching the screen.
[0015] In some embodiments, determining the rotation angle of the turntable image based on the real-time position information of the user's touch point includes:
[0016] Determining a real-time rotation angle of the turntable image according to the real-time position information of the user's touch point and the first position information;
[0017] The final rotation angle of the turntable image is determined according to the second position information of the touch point when the user stops touching the screen and the first position information, so as to realize turning the document to the left or right according to the final rotation angle.
[0018] In some embodiments, rotating the carousel image and rotating or displaying the document page content corresponding to the carousel image displayed in the screen display area according to the rotation angle of the carousel image includes:
[0019] Rotate the turntable image and the page content corresponding to the turntable image in the screen display area according to the real-time rotation angle of the turntable image;
[0020] According to the final rotation angle of the turntable image, the turntable image is rotated and after the rotation, the page content corresponding to the turntable image displayed in the screen display area is displayed.
[0021] In some embodiments, the rotation center of the turntable image is located at the center of the bottom boundary line of the screen display area, the real-time position information includes the horizontal coordinate of the real-time position, and the first position information includes the horizontal coordinate;
[0022] The determining the real-time rotation angle of the turntable image according to the real-time position information of the user touch point and the first position information includes:
[0023] Calculate the difference between the real-time horizontal coordinate of the user's touch point and the horizontal coordinate of the touch point when the user starts touching the screen;
[0024] Calculating a ratio between the difference and the width of the screen display area;
[0025] The real-time rotation angle of the turntable image is determined according to the ratio and the specific angle.
[0026] In some embodiments, the second position information includes a horizontal coordinate; and determining a final rotation angle of the turntable image according to the second position information of the touch point when the user stops touching the screen and the first position information includes:
[0027] Calculate the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen;
[0028] If the absolute value of the difference is greater than one quarter of the width of the screen display area, continue to determine whether the difference is greater than 0;
[0029] If the difference is greater than 0, it is determined that the turntable image is rotated to the right and a final rotation angle of the turntable image is determined according to the specific angle.
[0030] In some embodiments, after calculating the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen, the method further includes:
[0031] If the absolute value of the difference is less than or equal to one quarter of the width of the screen display area, the original rotation angle of the turntable image is used as the final rotation angle of the turntable image;
[0032] If the absolute value of the difference is greater than one quarter of the width of the screen display area and the difference is less than 0, it is determined that the turntable image rotates to the left and a final rotation angle of the turntable image is determined according to the specific angle.
[0033] An embodiment of the present invention further provides a document display device for overcoming the problem of poor transition effect and continuity during document page turning. The device comprises:
[0034] A monitoring module is used to monitor the user's screen sliding event and determine the real-time location information of the user's touch point based on the user's screen sliding event;
[0035] an angle determination module, configured to determine a rotation angle of the turntable image based on real-time position information of a user touch point, wherein the rotation center of the turntable image is located on or outside a boundary line of the screen display area, and the rotation angle of the turntable image is relative to an original rotation angle when the turntable image is not rotating;
[0036] A rotation and display module is used to rotate the turntable image according to the rotation angle of the turntable image and rotate or display the document page content corresponding to the turntable image displayed in the screen display area, wherein the turntable image is used as the background image of the document, and each time the turntable image rotates a specific angle, a new page content is displayed in the screen display area.
[0037] In some embodiments, the monitoring module is specifically configured to:
[0038] Monitoring an event in which a user starts touching the screen, and determining, based on the event in which the user starts touching the screen, first position information of a touch point when the user starts touching the screen;
[0039] Monitor the user sliding screen event, and determine the real-time location information of the user's touch point based on the user sliding screen event;
[0040] An event of a user ending touching the screen is monitored, and second position information of the touch point when the user ends touching the screen is determined according to the event of the user ending touching the screen.
[0041] In some embodiments, the angle determination module is specifically configured to:
[0042] Determining a real-time rotation angle of the turntable image according to the real-time position information of the user's touch point and the first position information;
[0043] The final rotation angle of the turntable image is determined according to the second position information of the touch point when the user stops touching the screen and the first position information, so as to realize turning the document to the left or right according to the final rotation angle.
[0044] In some embodiments, the rotation and display module is specifically used to:
[0045] Rotate the turntable image and the page content corresponding to the turntable image in the screen display area according to the real-time rotation angle of the turntable image;
[0046] According to the final rotation angle of the turntable image, the turntable image is rotated and after the rotation, the page content corresponding to the turntable image displayed in the screen display area is displayed.
[0047] In some embodiments, the rotation center of the turntable image is located at the center of the bottom boundary line of the screen display area, the real-time position information includes the horizontal coordinate of the real-time position, and the first position information includes the horizontal coordinate;
[0048] The angle determination module determines the real-time rotation angle of the turntable image according to the real-time position information of the user touch point and the first position information, including:
[0049] Calculate the difference between the real-time horizontal coordinate of the user's touch point and the horizontal coordinate of the touch point when the user starts touching the screen;
[0050] Calculating a ratio between the difference and the width of the screen display area;
[0051] The real-time rotation angle of the turntable image is determined according to the ratio and the specific angle.
[0052] In some embodiments, the second position information includes a horizontal coordinate; and the angle determination module determines the final rotation angle of the turntable image based on the second position information of the touch point when the user stops touching the screen and the first position information, including:
[0053] Calculate the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen;
[0054] If the absolute value of the difference is greater than one quarter of the width of the screen display area, continue to determine whether the difference is greater than 0;
[0055] If the difference is greater than 0, it is determined that the turntable image is rotated to the right and a final rotation angle of the turntable image is determined according to the specific angle.
[0056] In some embodiments, after calculating the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen, the angle determination module is further configured to:
[0057] If the absolute value of the difference is less than or equal to one quarter of the width of the screen display area, the original rotation angle of the turntable image is used as the final rotation angle of the turntable image;
[0058] If the absolute value of the difference is greater than one quarter of the width of the screen display area and the difference is less than 0, it is determined that the turntable image rotates to the left and a final rotation angle of the turntable image is determined according to the specific angle.
[0059] An embodiment of the present invention further provides a computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the document display method described in any of the above embodiments when executing the computer program.
[0060] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the document display method described in any of the above embodiments is implemented.
[0061] An embodiment of the present invention further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the document display method described in any of the above embodiments is implemented.
[0062] The document display method and device provided by the embodiment of the present invention determine the rotation angle of the turntable image by monitoring the user's screen sliding event, and then synchronously rotate the turntable image and the document page content corresponding to its various parts according to the rotation angle. In this way, the page turning is controlled by the turntable, and all pages of the document are distributed on the turntable, so that the page design style can be easily unified, which effectively solves the problems of poor transition effect and continuity in the page turning process. BRIEF DESCRIPTION OF THE DRAWINGS
[0063] In order to more clearly illustrate the embodiments of the present invention or the technical solutions in the prior art, the following briefly introduces the drawings required for the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:
[0064] Figure 1 A flowchart of a document display method provided by an embodiment of the present invention.
[0065] Figure 2 A partial flow chart of a document display method provided by an embodiment of the present invention.
[0066] Figure 3 A partial flow chart of a document display method provided by an embodiment of the present invention.
[0067] Figure 4 A partial flow chart of a document display method provided by an embodiment of the present invention.
[0068] Figure 5 A partial flow chart of a document display method provided by an embodiment of the present invention.
[0069] Figure 6 A partial flow chart of a document display method provided by an embodiment of the present invention.
[0070] Figure 7 A partial flow chart of a document display method provided by an embodiment of the present invention.
[0071] Figure 8 A schematic diagram of the positional relationship of the turntable image relative to the screen display area provided by an embodiment of the present invention.
[0072] Figure 9A schematic diagram of a carousel image provided by an embodiment of the present invention after being divided according to the number of annual report pages.
[0073] Figure 10 A schematic structural diagram of a document display device provided by an embodiment of the present invention.
[0074] Figure 11 A schematic diagram of the physical structure of an electronic device provided by an embodiment of the present invention. DETAILED DESCRIPTION
[0075] To make the purpose, technical solutions and advantages of the embodiments of the present invention more clear, the embodiments of the present invention are further described in detail below with reference to the accompanying drawings. Here, the exemplary embodiments of the present invention and their descriptions are used to explain the present invention, but are not intended to limit the present invention.
[0076] The information collected in the technical solution of the present invention is information and data authorized by the user or fully authorized by all parties, and the collection, storage, use, processing, transmission, provision, disclosure and application of the relevant data comply with the relevant laws, regulations and standards of the relevant countries and regions, take necessary confidentiality measures, do not violate public order and good morals, and provide corresponding operation entrances for users to choose to authorize or refuse.
[0077] The acquisition, transmission, storage, use, and processing of data in the technical solution of the present invention comply with the relevant provisions of national laws and regulations.
[0078] It should be noted that in the embodiments of the present invention, certain software, components, models and other existing solutions in the industry may be mentioned. They should be regarded as exemplary. Their purpose is only to illustrate the feasibility of implementing the technical solution of the present invention, but it does not mean that the inventor has or will necessarily use the solution.
[0079] The document display method provided by the embodiment of the present invention is executed by a subject including but not limited to a computer.
[0080] In order to solve the above technical problems, the present invention provides a document display method, such as Figure 1 As shown, the document display method provided by the present invention includes:
[0081] S11. Monitor a user screen sliding event, and determine real-time position information of a user touch point according to the user screen sliding event.
[0082] In step S11, an event listener can be set in the application to listen for user screen sliding events. Specifically, an event processing function can be bound to the touch event on the screen; when the user starts to touch the screen, the event listener will capture the coordinates of the touch point, and these coordinates can be expressed in a two-dimensional coordinate system with the upper left corner of the screen as the origin; as the user's finger moves on the screen, the event listener will continue to capture new touch point coordinates and update the position information in real time, thereby capturing the starting point, end point and moving path of the user's finger on the screen.
[0083] Specifically, you can use methods provided by specific application programming interfaces (APIs) or frameworks to register event listeners and handle events. For example, in Android development, you can use the onTouchEvent method to listen for and handle touch events; in iOS (a mobile operating system developed by Apple) development, you can use the UIPanGestureRecognizer method to recognize and respond to slide gestures; and in World Wide Web (Web) development, you can use the addEventListener method to listen for touchstart events, touchmove events, and touchend events.
[0084] S12. Determine the rotation angle of the turntable image based on the real-time position information of the user touch point, wherein the rotation center of the turntable image is located on or outside the boundary line of the screen display area, and the rotation angle of the turntable image is compared to the original rotation angle when the turntable image is not rotated.
[0085] In step S12, the rotation center of the turntable image is located on the boundary line of the screen display area or outside the boundary line of the screen display area. When the turntable image rotates, the turntable image rotates into the image in the screen display area as the background image of the current document display page. In addition, in this step, the rotation angle of the turntable image is calculated in real time based on the real-time position information of the user's touch point, and the real-time calculated rotation angle is provided to the subsequent step S13. The real-time calculated rotation angle is compared to the original rotation angle when the turntable image does not rotate. In other words, the real-time calculated rotation angle is compared to the rotation angle of the turntable before the user sliding screen event is monitored in step S101.
[0086] S13. According to the rotation angle of the turntable image, the turntable image is rotated and the document page content corresponding to the turntable image displayed in the screen display area is rotated or displayed, wherein the turntable image is used as the background image of the document, and each time the turntable image rotates a specific angle, a new page content is displayed in the screen display area.
[0087] In step S13, the turntable image serves as the background image for all pages of the document. Different pages use different areas of the turntable image as the background image. These background images may have overlapping areas or may be completely different, depending on the radius of the turntable image, the position of the rotation center, and the setting of the specific angle. Each time the turntable image rotates by the specific angle, a new page of content is displayed in the screen display area. In other words, each time the turntable image rotates by the specific angle, the document is turned over once, and a new page of content is displayed in the screen display area.
[0088] However, when the rotation angle of the turntable image determined based on the real-time position information of the user's touch point is less than the specific angle, the turntable image can be rotated according to the rotation angle of the turntable image. At the same time, the document page content corresponding to the turntable image displayed in the screen display area is controlled in real time to rotate synchronously, so that the page turning operation can have a good transition effect.
[0089] The document display method provided by an embodiment of the present invention determines the rotation angle of the turntable image by monitoring the user's screen sliding event, and then synchronously rotates the turntable image and the document page content corresponding to its parts according to the rotation angle. In this way, the page turning is controlled by the turntable, and all pages of the document are distributed on the turntable, so that the page design style can be easily unified, which effectively solves the problems of poor transition effect and continuity in the page turning process.
[0090] like Figure 2 As shown, in some embodiments, step S11 includes:
[0091] S111 . Monitoring an event in which a user starts touching the screen, and determining, according to the event in which the user starts touching the screen, first position information of a touch point when the user starts touching the screen.
[0092] S112: Monitor an event that the user is sliding the screen, and determine real-time position information of the user's touch point based on the event.
[0093] S113: Monitor an event in which the user stops touching the screen, and determine, according to the event in which the user stops touching the screen, second position information of the touch point when the user stops touching the screen.
[0094] Specifically, step S111 involves capturing the event when the user first touches the screen. Taking mobile application development as an example, this can be achieved by listening to the touchstart event. When the user places their finger on the screen, the event is triggered, and the initial position information of the touch point can be obtained, including the X and Y coordinates. In step S112, after the user starts touching the screen, if they start moving their finger on the screen, the touchmove event is triggered. The real-time position of the user's finger moving on the screen can be tracked by listening to this event. In step S113, when the user removes his finger from the screen, the touchend event is triggered. The final position information of the user's finger when it leaves the screen is captured. This can be used to determine the end of the touch operation.
[0095] like Figure 3 As shown, in some embodiments, step S12 includes:
[0096] S121 : Determine a real-time rotation angle of the turntable image according to the real-time position information of the user touch point and the first position information.
[0097] S122. Determine a final rotation angle of the turntable image based on the second position information of the touch point when the user stops touching the screen and the first position information, so as to turn the document to the left or right according to the final rotation angle.
[0098] Specifically, in step S121, the system will monitor the position of the user's touch on the screen in real time, and based on this position information and a pre-set reference position (first position information), calculate the real-time rotation angle of the turntable image, and pass the real-time rotation angle to step S13 in real time. In step S122, when the user stops touching the screen, the system will record the final position of the user's touch point (second position information), compare it with the first position information again, and pass this comparison result (rotation angle of the turntable image) to the subsequent step S13 in real time. Step S13 determines the final rotation angle of the turntable image based on this comparison result. This angle will determine whether the document is turned page, turned left or turned right.
[0099] like Figure 4 As shown, in some embodiments, step S13 includes:
[0100] S131 . Rotate the turntable image and the page content corresponding to the turntable image in the screen display area according to the real-time rotation angle of the turntable image.
[0101] S132: Rotate the turntable image according to the final rotation angle of the turntable image and display the page content corresponding to the turntable image displayed in the screen display area after the rotation.
[0102] Specifically, in step S131, after the system calculates the rotation angle of the carousel image in real time based on the user's touch action, it rotates the carousel image itself and the page content corresponding to the carousel image within the screen display area. This means that as the user slides the screen, the carousel image and the page content will rotate accordingly, simulating a page turning action.
[0103] In step S132, after the user completes the page-turning action, the system performs a final rotation of the turntable image based on the final rotation angle of the turntable image. After the rotation is complete, the system displays the page content corresponding to the turntable image in the screen display area. This ensures that the user sees the correct page content after turning the page, and that the display of the page content is consistent with the rotation state of the turntable image. Furthermore, if the user's page-turning action does not meet the page-turning conditions, step S132 will synchronously rotate the turntable image and the corresponding page content back to the initial angle.
[0104] In some embodiments, the rotation center of the turntable image is located at the center of the bottom boundary line of the screen display area, the real-time position information includes the horizontal coordinate of the real-time position, and the first position information includes the horizontal coordinate; in this case, Figure 5 As shown, step S121 includes:
[0105] S1211 : Calculate the difference between the real-time horizontal coordinate of the user's touch point and the horizontal coordinate of the touch point when the user starts touching the screen.
[0106] S1212: Calculate the ratio between the difference and the width of the screen display area.
[0107] S1213: Determine a real-time rotation angle of the turntable image according to the ratio and the specific angle.
[0108] Specifically, the system calculates the difference between the horizontal coordinate of the current touch point and the horizontal coordinate of the initial touch point in real time. This difference represents the horizontal distance the user's finger has moved. The system then compares this difference with the width of the screen display area and calculates the ratio between the difference and the screen width. This ratio is a dimensionless value that represents the ratio of the distance the user's finger has moved relative to the entire screen width. Finally, the system determines the real-time rotation angle of the turntable image based on this ratio and the angle the turntable image needs to rotate each time the document page is turned.
[0109] For example, if the screen width is W, the horizontal coordinate difference of the user's finger movement is X, and the angle the turntable needs to rotate for each page is A, then the real-time rotation angle θ can be calculated using the following formula: θ = (X / W) × A = (W / X) × A. This ensures that the rotation angle of the turntable image is proportional to the user's finger movement, providing an intuitive and responsive interactive experience.
[0110] In some embodiments, the second position information includes a horizontal coordinate; in this case, Figure 6 As shown, step S122 includes:
[0111] S1221. Calculate the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen.
[0112] S1222: If the absolute value of the difference is greater than one-quarter of the width of the screen display area, continue to determine whether the difference is greater than 0.
[0113] S1223: If the difference is greater than 0, determine that the turntable image is rotated to the right and determine a final rotation angle of the turntable image according to the specific angle.
[0114] Specifically, when the user stops touching the screen, the system calculates the difference between the horizontal coordinate at the end and the horizontal coordinate when the user starts touching the screen. This difference reflects the total distance the user's finger has moved in the horizontal direction of the screen. Next, it is determined whether the absolute value of this difference is greater than one-quarter of the width of the screen display area. This threshold is set to one-quarter of the screen width to trigger the page turning operation. If the absolute value of the difference is greater than this threshold, the next judgment is carried out: If the difference is greater than 0, that is, the user is sliding from left to right, the system will determine that the turntable image needs to be rotated to the right. Then, the system will determine the specific rotation angle based on the angle that the turntable image needs to rotate each time the document turns a page.
[0115] This calculation ensures that when the user swipes from left to right, the carousel image rotates to the right, creating the effect of turning the page to the right. If the user swipes from right to left, the corresponding logic will determine that the carousel image rotates to the left, creating the effect of turning the page to the left.
[0116] like Figure 7 As shown, in some embodiments, after step S1221, the document display method provided by the present invention may further include the following steps:
[0117] S1224: If the absolute value of the difference is less than or equal to one-quarter of the width of the screen display area, use the original rotation angle of the turntable image as the final rotation angle of the turntable image.
[0118] S1225. If the absolute value of the difference is greater than one-quarter of the width of the screen display area and the difference is less than 0, determine that the turntable image rotates to the left and determine a final rotation angle of the turntable image according to the specific angle.
[0119] Specifically, this embodiment supplements the page-turning logic of step S122 in the above embodiment. Specifically, if the absolute value of the difference between the horizontal coordinate when the user stops touching the screen and the horizontal coordinate when they start touching the screen is less than or equal to one-quarter of the width of the screen display area, this means that the user's sliding distance is insufficient to trigger a page-turning operation. In this case, the system will restore the original rotation angle of the turntable image and will not turn the page.
[0120] If the absolute value of the difference is greater than one-quarter of the screen's width and the difference itself is less than 0 (i.e., the user is swiping from right to left), the system determines that the carousel image needs to be rotated left. The system then determines the specific rotation angle based on the angle the carousel image needs to rotate each time the document is turned, achieving the effect of turning the page to the left.
[0121] To better understand the present invention, the document display method provided by the present invention is described in detail below through a specific embodiment.
[0122] Given a turntable base map on the page, its radius is the screen height and the center is at the bottom center of the screen. Figure 8 As shown in the figure, the turntable can be controlled to rotate around the center by sliding left and right in the screen display area. Assuming that the annual report has 8 pages, the turntable can be divided into 8 equal parts by the center of the circle, so that the angle of switching each part is 45 degrees, and each page content is placed in each equal part, as shown in the figure. Figure 9 As shown in the figure, when the user swipes the screen left or right, the turntable rotates to follow the gesture. When the user begins to touch the screen, the distance from the touch point to the left edge of the screen is recorded as x1. When the user stops touching the screen, the distance from the touch point to the left edge of the screen is recorded as x2. The absolute value of x2-x1, denoted as x, is the horizontal distance the user swipes on the screen. The difference between x1 and x2 determines whether the user swiped left or right. Next, determine whether x is greater than one-quarter of the screen width. If so, switch pages; if not, remain on the original page.
[0123] Based on the above technical principles, swiping left or right on the screen can rotate the carousel and switch pages accordingly. Because all pages are on the carousel, the continuity and transition effects when switching between pages are very good, and the theme style of each annual report page can be designed to be consistent.
[0124] The following is a detailed introduction to the specific implementation process of this solution.
[0125] Step 1: Define the number of pages to be displayed and calculate the average rotation angle c1 of each page. c represents the current rotation angle of the turntable, which is initialized to 0 degrees, and the screen width is recorded as w.
[0126] Step 2: Listen for the user's touch event. Record the distance from the touch point to the left edge of the screen as x1 when the user starts touching the screen.
[0127] Step 3: Monitor the event that the user is sliding the screen (this event will be continuously triggered after the user touches the screen), and record the distance from the current touch point to the left edge of the screen as x2 in real time. Calculate the result of x2-x1 and record it as x. Then calculate (x / w)*c1 to get the angle c2 that the turntable needs to rotate. Then set the current real-time rotation angle of the turntable to: c+c2.
[0128] Step 4: Listen for the user to end touching the screen event (this event will be triggered when the user's finger leaves the screen), and record the distance from the current touch point to the left edge of the screen as x2. Calculate the result of x2-x1 and record it as x. Determine whether the absolute value of x is greater than w / 4. If it is greater than, then determine whether x is greater than 0. If x is less than 0, it means that the user swiped to the left, then the current turntable rotation angle is set to: c = c-c1, and switch to the next page. If x is greater than 0, it means that the user swiped to the right, then the current turntable rotation angle is set to: c = c+c1, and switch to the previous page. If the absolute value of x is less than or equal to w / 4, then the current turntable rotation angle is set to: c, and remain on the original page.
[0129] The screen display system used to implement the above solution mainly includes the following modules:
[0130] The parameter definition module defines the required constants and variables. Specifically, it first determines the number of pages in the annual report, n, and then calculates the average rotation angle per page, c1 = 360 / n. c represents the current rotation angle of the turntable, which is initialized to 0 degrees, and w represents the screen width. It then listens for the user's initial touch event on the screen and records the distance from the touch point to the left edge of the screen as x1.
[0131] The first monitoring module is used to monitor user screen swipes and control the rotation of the turntable. Specifically, it monitors screen swipe events, records the swipe position x2 in real time, and calculates the swipe distance x using x1 in the parameter definition module. It then calculates (x / w)*c1 to determine the desired turntable rotation angle c2. The turntable's current real-time rotation angle is then set to c+c2. This allows for rotation to follow gestures.
[0132] The second monitoring module is used to monitor when the user ends a swipe and determine the final page displayed. Specifically, it monitors for the user's swipe-end event, records the current swipe position x2, and calculates the total swipe distance x using x1 from module one. It then determines whether the absolute value of x is greater than one-quarter of the screen width w in module one. If so, it then determines whether x is greater than 0. If x is less than 0, it indicates a left swipe. In this case, the current turntable rotation angle is set to c = c - c1, switching to the next page. If x is greater than 0, it indicates a right swipe. In this case, the current turntable rotation angle is set to c = c + c1, switching to the previous page. If the absolute value of x is less than or equal to w / 4, the current turntable rotation angle is set to c, remaining on the previous page. Because the turntable in module two has already rotated a certain angle to follow the gesture, any reset turntable rotation angle in this module will differ significantly from the angle in module two. In this case, a transition animation can be used to transition the turntable from the rotation angle in module two to the rotation angle in this module.
[0133] It can be seen that the document display method provided by the present invention controls page turning by a turntable, distributes all pages of the annual bill on the turntable, makes it easy to unify the page design style, and effectively solves the problems of poor transition effect and continuity in the page turning process.
[0134] Based on the same inventive concept, the present invention also provides a document display device, as described in the following embodiments. Since the principle of the device to solve the problem is similar to that of the document display method, the implementation of the device can refer to the implementation of the document display method, and the repeated parts will not be repeated.
[0135] like Figure 10 As shown, a document display device 002 provided by an embodiment of the present invention includes a monitoring module 21, an angle determination module 22, and a rotation and display module 23, wherein:
[0136] The monitoring module 21 is used to monitor the user sliding screen event and determine the real-time position information of the user touch point according to the user sliding screen event;
[0137] The angle determination module 22 is configured to determine the rotation angle of the turntable image based on the real-time position information of the user's touch point, wherein the rotation center of the turntable image is located on or outside the boundary line of the screen display area, and the rotation angle of the turntable image is compared to the original rotation angle when the turntable image is not rotating;
[0138] The rotation and display module 23 is used to rotate the turntable image and rotate or display the document page content corresponding to the turntable image displayed in the screen display area according to the rotation angle of the turntable image, wherein the turntable image is used as the background image of the document, and each time the turntable image rotates a specific angle, a new page content is displayed in the screen display area.
[0139] The document display device provided by an embodiment of the present invention determines the rotation angle of the turntable image by monitoring the user's screen sliding event, and then synchronously rotates the turntable image and the document page content corresponding to its various parts according to the rotation angle. In this way, the page turning is controlled by the turntable, and all pages of the document are distributed on the turntable, so that the page design style can be easily unified, which effectively solves the problem of poor transition effect and continuity in the page turning process.
[0140] In some embodiments, the monitoring module 21 is specifically used to: monitor the event that the user starts touching the screen, and determine the first position information of the touch point when the user starts touching the screen based on the event that the user starts touching the screen; monitor the event that the user is sliding the screen, and determine the real-time position information of the user's touch point based on the event that the user is sliding the screen; monitor the event that the user ends touching the screen, and determine the second position information of the touch point when the user ends touching the screen based on the event that the user ends touching the screen.
[0141] In some embodiments, the angle determination module 22 is specifically used to: determine the real-time rotation angle of the turntable image based on the real-time position information of the user's touch point and the first position information; determine the final rotation angle of the turntable image based on the second position information of the touch point when the user stops touching the screen and the first position information, so as to realize turning the document to the left or right according to the final rotation angle.
[0142] In some embodiments, the rotation and display module 23 is specifically used to: rotate the turntable image and the page content corresponding to the turntable image in the screen display area according to the real-time rotation angle of the turntable image; rotate the turntable image according to the final rotation angle of the turntable image and display the page content corresponding to the turntable image displayed in the screen display area after the rotation.
[0143] In some embodiments, the rotation center of the turntable image is located at the center position of the bottom boundary line of the screen display area, the real-time position information includes the horizontal coordinate of the real-time position, and the first position information includes the horizontal coordinate; the angle determination module 22 determines the real-time rotation angle of the turntable image based on the real-time position information of the user touch point and the first position information, including the following steps: calculating the difference between the real-time horizontal coordinate of the user touch point and the horizontal coordinate of the touch point when the user starts touching the screen; calculating the ratio between the difference and the width of the screen display area; determining the real-time rotation angle of the turntable image based on the ratio and the specific angle.
[0144] In some embodiments, the second position information includes a horizontal coordinate; the angle determination module 22 determines the final rotation angle of the turntable image based on the second position information of the touch point when the user stops touching the screen and the first position information, including the following steps: calculating the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen; if the absolute value of the difference is greater than one-quarter of the width of the screen display area, continuing to determine whether the difference is greater than 0; if the difference is greater than 0, determining that the turntable image is rotated to the right and determining the final rotation angle of the turntable image according to the specific angle.
[0145] In some embodiments, after calculating the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen, the angle determination module 22 is further used to: if the absolute value of the difference is less than or equal to one-quarter of the width of the screen display area, then the original rotation angle of the turntable image is used as the final rotation angle of the turntable image; if the absolute value of the difference is greater than one-quarter of the width of the screen display area, and the difference is less than 0, then it is determined that the turntable image is rotated to the left and the final rotation angle of the turntable image is determined according to the specific angle.
[0146] It should be noted that the document-based display method provided in the embodiment of the present invention can be used in the financial field, and can also be used in any technical field other than the financial field. The embodiment of the present invention does not limit the application field of the virtual reality-based bank training system and its training method.
[0147] Figure 11 A schematic diagram of the physical structure of an electronic device provided in an embodiment of the present invention, such as Figure 11 As shown, the electronic device 003 includes a processor 301 , a memory 302 and a bus 303 . The processor 301 and the memory 302 communicate with each other via the bus 303 .
[0148] The processor 301 is configured to call program instructions in the memory 302 to execute the methods provided by the above method embodiments.
[0149] An embodiment of the present invention further provides a computer-readable storage medium, wherein the computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the document display method is implemented.
[0150] An embodiment of the present invention further provides a computer program product, which includes a computer program. When the computer program is executed by a processor, the document display method is implemented.
[0151] It will be understood by those skilled in the art that embodiments of the present invention may be provided as methods, systems, or computer program products. Thus, the present invention may take the form of an entirely hardware embodiment, an entirely software embodiment, or an embodiment combining software and hardware. Furthermore, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0152] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems), and computer program products according to embodiments of the present invention. It should be understood that each process and / or block in the flowcharts and / or block diagrams, as well as combinations of processes and / or blocks in the flowcharts and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowcharts and / or block diagrams. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.
[0153] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.
[0154] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1a process or multiple processes and / or boxes Figure 1 A step that specifies a function in one or more boxes.
[0155] The specific embodiments described above further illustrate the objectives, technical solutions and beneficial effects of the present invention in detail. It should be understood that the above description is only a specific embodiment of the present invention and is not intended to limit the scope of protection of the present invention. Any modifications, equivalent substitutions, improvements, etc. made within the spirit and principles of the present invention should be included in the scope of protection of the present invention.
Claims
1. A document display method, characterized in that: include: Monitor user screen sliding events, and determine real-time location information of the user's touch point based on the user screen sliding events; determining a rotation angle of the turntable image based on real-time position information of the user touch point, wherein the rotation center of the turntable image is located on or outside a boundary line of the screen display area, and the rotation angle of the turntable image is compared to an original rotation angle when the turntable image is not rotated; According to the rotation angle of the turntable image, the turntable image is rotated and the document page content corresponding to the turntable image displayed in the screen display area is rotated or displayed, wherein the turntable image is used as the background image of the document, and each time the turntable image rotates a preset angle, a new page content is displayed in the screen display area.
2. The method according to claim 1, characterized in that The monitoring of the user sliding screen event and determining the real-time position information of the user touch point according to the user sliding screen event includes: Monitoring an event in which a user starts touching the screen, and determining, based on the event in which the user starts touching the screen, first position information of a touch point when the user starts touching the screen; Monitor the user sliding screen event, and determine the real-time location information of the user's touch point based on the user sliding screen event; An event of a user ending touching the screen is monitored, and second position information of the touch point when the user ends touching the screen is determined according to the event of the user ending touching the screen.
3. The method according to claim 2, characterized in that Determine the rotation angle of the turntable image based on the real-time position information of the user's touch point, including: Determining a real-time rotation angle of the turntable image according to the real-time position information of the user's touch point and the first position information; The final rotation angle of the turntable image is determined according to the second position information of the touch point when the user stops touching the screen and the first position information, so as to realize turning the document to the left or right according to the final rotation angle.
4. The method according to claim 3, characterized in that According to the rotation angle of the turntable image, the turntable image is rotated and the document page content corresponding to the turntable image displayed in the screen display area is rotated or displayed, including: Rotate the turntable image and the page content corresponding to the turntable image in the screen display area according to the real-time rotation angle of the turntable image; According to the final rotation angle of the turntable image, the turntable image is rotated and after the rotation, the page content corresponding to the turntable image displayed in the screen display area is displayed.
5. The method according to claim 3, characterized in that The rotation center of the turntable image is located at the center of the bottom boundary line of the screen display area, the real-time position information includes the horizontal coordinate of the real-time position, and the first position information includes the horizontal coordinate; The determining the real-time rotation angle of the turntable image according to the real-time position information of the user touch point and the first position information includes: Calculate the difference between the real-time horizontal coordinate of the user's touch point and the horizontal coordinate of the touch point when the user starts touching the screen; Calculating a ratio between the difference and the width of the screen display area; The real-time rotation angle of the turntable image is determined according to the ratio and the preset angle.
6. The method according to claim 5, characterized in that The second position information includes a horizontal coordinate; determining a final rotation angle of the turntable image according to the second position information of the touch point when the user stops touching the screen and the first position information, including: Calculate the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen; If the absolute value of the difference is greater than one quarter of the width of the screen display area, continue to determine whether the difference is greater than 0; If the difference is greater than 0, it is determined that the turntable image is rotated to the right and a final rotation angle of the turntable image is determined according to the preset angle.
7. The method according to claim 6, characterized in that After calculating the difference between the horizontal coordinate of the touch point when the user stops touching the screen and the horizontal coordinate of the touch point when the user starts touching the screen, the method further includes: If the absolute value of the difference is less than or equal to one quarter of the width of the screen display area, the original rotation angle of the turntable image is used as the final rotation angle of the turntable image; If the absolute value of the difference is greater than one-quarter of the width of the screen display area and the difference is less than 0, it is determined that the turntable image rotates left and a final rotation angle of the turntable image is determined according to the preset angle.
8. A document display device, characterized in that: include: A monitoring module is used to monitor a user sliding screen event and determine the real-time position information of the user's touch point according to the user sliding screen event; an angle determination module, configured to determine a rotation angle of the turntable image based on real-time position information of a user touch point, wherein the rotation center of the turntable image is located on or outside a boundary line of the screen display area, and the rotation angle of the turntable image is relative to an original rotation angle when the turntable image is not rotating; A rotation and display module is used to rotate the turntable image according to the rotation angle of the turntable image and rotate or display the document page content corresponding to the turntable image displayed in the screen display area, wherein the turntable image is used as the background image of the document, and each time the turntable image rotates a preset angle, a new page content is displayed in the screen display area.
9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein: When the processor executes the computer program, the method according to any one of claims 1 to 7 is implemented.
10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.
11. A computer program product, characterized in that The computer program product comprises a computer program, and when the computer program is executed by a processor, the method according to any one of claims 1 to 7 is implemented.
Citation Information
Patent Citations
Spin control user interface for selecting options
CN102859482A
Touch screen apparatus and electronic document display method of the touch screen apparatus
KR101174047B1