A Canvas-based intelligent seat selection method
By using Canvas's layered rendering and bitmap compression technology, combined with second-order Bézier curve deformation and Redis Bitmap storage, the rendering latency and server load issues of traditional seat selection systems are solved, achieving efficient seat status synchronization and intelligent recommendation.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- INSPUR SOFTWARE CO LTD
- Filing Date
- 2026-01-20
- Publication Date
- 2026-05-26
AI Technical Summary
Traditional seat selection systems suffer from low rendering frame rates in large venues, impacting user experience. Furthermore, the surge in database load during high-concurrency scenarios can lead to asynchronous seat statuses.
It employs Canvas layered rendering and bitmap compression technology, combined with second-order Bézier curve deformation and Redis Bitmap bitmap storage, uses WebSocket to achieve incremental state synchronization, and uses a collaborative filtering algorithm for seat recommendation.
It improved the rendering frame rate, reduced user operation latency, reduced server load, and enabled real-time synchronization and intelligent recommendation of seat status.
Smart Images
Figure CN122087201A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the fields of graphics rendering and real-time interactive technology, and in particular to a smart seat selection method based on Canvas. Background Technology
[0002] Traditional seat selection systems use DOM rendering to render a large number of seats. Each seat requires a separate DOM node, which forces the browser to perform element nesting and style calculations on a massive number of elements.
[0003] For example, the 80,000 fixed seats in the Bird's Nest Stadium require the generation of over 80,000 DOM nodes, which will frequently trigger browser repaints. Furthermore, when rotating the curved stands, traditional seat selection systems require calculating the coordinates and repainting each node.
[0004] In seat selection at large venues, traditional systems render at frame rates below 20 frames per second, severely impacting the user experience.
[0005] Meanwhile, traditional systems rely on database polling or long polling to update seat status. In high-concurrency scenarios, the database load surges, and the seat status display may become out of sync due to network latency or database locks.
[0006] To address the aforementioned issues, this invention proposes a smart seat selection method based on Canvas. Summary of the Invention
[0007] To overcome the shortcomings of existing technologies, this invention provides a simple and efficient intelligent seat selection method based on Canvas.
[0008] This invention is achieved through the following technical solution: A Canvas-based intelligent seat selection method includes the following steps: Step S1: Initialize the venue base map Load the venue structure in SVG format, and pre-render the repeating elements as bitmaps for caching and reuse using the Canvas rendering engine; In step S1, the Canvas rendering engine includes three parts: a base layer, a seating layer, and an interaction layer. The bottom layer uses SVG to statically draw the venue structure diagram, which is rendered only once when loaded; The seating matrix is dynamically drawn in the seating layer. Bitmap caching technology (Offscreen Canvas) is used to pre-render repeated elements and reuse images to reduce the redraw area. The interaction layer handles gesture events independently, including zooming and dragging, and refreshes synchronously through requestAnimationFrame to avoid blocking the main thread.
[0009] Step S2: Generate the seating matrix A second-order Bézier curve was used to fit the arc-shaped area, and the seat coordinates were calculated based on the curvature of the stands. In step S2, the movement trajectory of each seat is automatically calculated by using second-order Bézier curve deformation, avoiding manual point-by-point adjustments; when performing rotation operations, an overall coordinate transformation is performed, supporting users to adjust the curved grandstand in real time, while greatly reducing latency.
[0010] Step S3: Event binding to implement click highlighting. The Redis Bitmap storage solution is adopted to compress the seat status into a binary bitmap, and incremental status synchronization is achieved through WebSocket; In step S3, the state synchronization mechanism uses Redis Bitmap binary bitmap storage to compress the 100,000 seat statuses of each venue into 12.5KB memory space, achieves millisecond-level query complexity of O(1) through the GETBIT command, and combines WebSocket incremental push mechanism to ensure zero conflict in state synchronization under high-concurrency ticket grabbing scenarios.
[0011] Step S4: User Interaction and Seat Recommendation Based on the collaborative filtering algorithm, seat recommendations are generated by combining user historical behavior. By integrating user preferences, historical seat selection behavior, and current venue heatmaps, the best seats are generated. After the user selects a seat, a BitMap is pushed via WebSocket and updated to the client.
[0012] In step S4, a responsive layout is implemented through the Vue framework, integrating the PointerEvents API to uniformly handle touch / mouse events in user interaction, and supporting seamless switching between mobile and desktop.
[0013] This Canvas-based intelligent seat selection system consists of four parts: a user interaction layer, a Canvas rendering engine, a data management layer, and an intelligent recommendation module. The user interaction layer uses Vue to implement pinch-to-zoom, double-tap to focus, and long-press to select seats. It adopts a responsive layout to achieve intelligent adaptation of device layout and uses the PointerEvents API to uniformly handle touch / mouse events, supporting seamless switching between mobile and desktop. The Canvas rendering engine is divided into three parts: the base layer, the seating layer, and the interaction layer. The bottom layer uses SVG to statically draw the venue structure diagram, which is rendered only once when loaded. The seating matrix is dynamically drawn in the seating layer. Bitmap caching technology (Offscreen Canvas) is used to pre-render repeating elements and reuse images to reduce the redraw area. By using second-order Bézier curve deformation, the movement trajectory of each seat is automatically calculated to avoid manual point-by-point adjustment. The interaction layer handles gesture events independently, including zooming and dragging, and refreshes synchronously through requestAnimationFrame to avoid blocking the main thread; The data management layer adopts the Redis Bitmap storage scheme, which compresses the seat status into binary bits (1 bit represents 1 seat), uses bit operations to achieve O(1) complexity query, and combines WebSocket to push incremental updates to avoid invalid polling and reduce server pressure. The intelligent recommendation module recommends seats based on user preferences, historical seat selection records, and the current venue heat map.
[0014] A Canvas-based intelligent seat selection device includes a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to implement the above-described method steps.
[0015] A readable storage medium storing a computer program that, when executed by a processor, implements the above-described method steps.
[0016] The beneficial effects of this invention are: the intelligent seat selection method based on Canvas uses Canvas's layered rendering and bitmap compression technology to solve the lag problem of traditional seat selection systems when rendering seating charts in large stadiums; By using a temporary Canvas buffer and second-order Bézier curve deformation, the latency of user operations is reduced and the user experience is improved. By using Redis Bitmap storage and WebSocket technology, full polling is avoided, reducing the server load. It innovatively uses a collaborative filtering algorithm to intelligently recommend seats based on users' historical behavior. Attached Figure Description
[0017] To more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0018] Appendix Figure 1This is a schematic diagram of the intelligent seat selection method based on Canvas according to the present invention. Detailed Implementation
[0019] To enable those skilled in the art to better understand the technical solutions of this invention, the technical solutions in the embodiments of this invention will be clearly and completely described below in conjunction with the embodiments of this invention. Obviously, the described embodiments are merely some embodiments of this invention, and not all embodiments. Based on the embodiments of this invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of this invention.
[0020] This Canvas-based intelligent seat selection method includes the following steps: Step S1: Initialize the venue base map By loading the SVG format venue structure and using the Canvas rendering engine to pre-render repeating elements (such as identical seat icons) as bitmap caches for reuse, the smooth rendering of 100,000 seats is maintained at ≥60FPS, completely solving the problem of visualization lag in large venues.
[0021] In step S1, the Canvas rendering engine includes three parts: a base layer, a seating layer, and an interaction layer. The bottom layer uses SVG to statically draw the venue structure diagram, which is rendered only once when loaded; The seating matrix is dynamically drawn in the seating layer. Bitmap caching technology (Offscreen Canvas) is used to pre-render duplicate elements (such as the same seat icon) and reuse images to reduce the redraw area. The interaction layer handles gesture events independently, including zooming and dragging, and refreshes synchronously through requestAnimationFrame to avoid blocking the main thread.
[0022] Step S2: Generate the seating matrix A second-order Bézier curve was used to fit the arc-shaped area, and the seat coordinates were calculated based on the curvature of the stands. In step S2, the movement trajectory of each seat is automatically calculated by using second-order Bézier curve deformation, avoiding manual point-by-point adjustments; when performing rotation operations, an overall coordinate transformation is performed, supporting users to adjust the curved grandstand in real time, while greatly reducing latency.
[0023] Step S3: Event binding to implement click highlighting. The Redis Bitmap storage solution is adopted to compress the seat status into a binary bitmap, and incremental status synchronization is achieved through WebSocket; In step S3, the state synchronization mechanism uses Redis Bitmap binary bitmap storage to compress the 100,000 seat statuses of each venue into 12.5KB memory space, achieves millisecond-level query complexity of O(1) through the GETBIT command, and combines WebSocket incremental push mechanism to ensure zero conflict in state synchronization under high-concurrency ticket grabbing scenarios.
[0024] Step S4: User Interaction and Seat Recommendation Based on the collaborative filtering algorithm, seat recommendations are generated by combining user historical behavior. By integrating user preferences, historical seat selection behavior, and current venue heatmaps, the system generates optimal seats, reducing users' decision-making time for seat selection. After the user selects a seat, a BitMap is pushed via WebSocket and updated to the client.
[0025] In step S4, a responsive layout is implemented through the Vue framework, integrating the PointerEvents API to uniformly handle touch / mouse events in user interaction, and supporting seamless switching between mobile and desktop.
[0026] This Canvas-based intelligent seat selection system consists of four parts: a user interaction layer, a Canvas rendering engine, a data management layer, and an intelligent recommendation module. The user interaction layer uses Vue to implement pinch-to-zoom, double-tap to focus, and long-press to select seats. It adopts a responsive layout to achieve intelligent adaptation of device layout and uses the PointerEvents API to uniformly handle touch / mouse events, supporting seamless switching between mobile and desktop. The Canvas rendering engine is divided into three parts: the base layer, the seating layer, and the interaction layer. The bottom layer uses SVG to statically draw the venue structure diagram, which is rendered only once when loaded. The seating matrix is dynamically drawn in the seating layer. Bitmap caching technology (Offscreen Canvas) is used to pre-render repeating elements (such as the same seat icon) and reuse images to reduce the redraw area. By using second-order Bézier curve deformation, the movement trajectory of each seat is automatically calculated to avoid manual point-by-point adjustment. The interaction layer handles gesture events independently, including zooming and dragging, and refreshes synchronously through requestAnimationFrame to avoid blocking the main thread; The data management layer adopts the Redis Bitmap storage scheme, which compresses the seat status into binary bits (1 bit represents 1 seat), and uses bit operations (such as GETBIT) to achieve O(1) complexity query. At the same time, it combines WebSocket to push incremental updates to avoid invalid polling and reduce server pressure. The intelligent recommendation module recommends seats based on user preferences (window / aisle), historical seat selection records, and the current venue heat map.
[0027] The Canvas-based intelligent seat selection device includes a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to implement the above-described method steps.
[0028] The readable storage medium stores a computer program that, when executed by a processor, implements the above-described method steps.
[0029] Compared with existing technologies, this Canvas-based intelligent seat selection method has the following characteristics: The use of Canvas's layered rendering and bitmap compression technology solved the lag problem of traditional seat selection systems when rendering seating charts in large stadiums.
[0030] Traditional systems require traversing each DOM node to update coordinates when rotating the seating chart, resulting in a response latency of over 200ms. This system reduces user operation latency and improves user experience by using a temporary Canvas buffer and second-order Bézier curve deformation.
[0031] By using Redis Bitmap storage and WebSocket technology, full polling is avoided, reducing the server load.
[0032] This Canvas-based intelligent seat selection method innovatively uses a collaborative filtering algorithm to intelligently recommend seats based on the user's historical behavior.
[0033] The embodiments described above are merely one specific implementation of the present invention. Ordinary changes and substitutions made by those skilled in the art within the scope of the technical solution of the present invention should be included within the protection scope of the present invention.
Claims
1. A smart seat selection method based on Canvas, characterized in that: Includes the following steps: Step S1: Initialize the venue base map Load the venue structure in SVG format, and pre-render the repeating elements as bitmaps for reuse using the Canvas rendering engine; Step S2: Generate the seating matrix A second-order Bézier curve was used to fit the arc-shaped area, and the seat coordinates were calculated based on the curvature of the stands. Step S3: Event binding to implement click highlighting. The Redis Bitmap storage solution is adopted to compress the seat status into a binary bitmap, and incremental status synchronization is achieved through WebSocket; Step S4: User Interaction and Seat Recommendation Based on the collaborative filtering algorithm, seat recommendations are generated by combining user historical behavior. By integrating user preferences, historical seat selection behavior, and current venue heatmaps, the best seats are generated. After the user selects a seat, a BitMap is pushed via WebSocket and updated to the client.
2. The intelligent seat selection method based on Canvas according to claim 1, characterized in that: In step S1, the Canvas rendering engine includes three parts: a base layer, a seating layer, and an interaction layer. The bottom layer uses SVG to statically draw the venue structure diagram, which is rendered only once when loaded; The seating matrix is dynamically drawn in the seating layer, and bitmap caching technology is used to pre-render repeated elements to reuse images and reduce the redraw area. The interaction layer handles gesture events independently, including zooming and dragging, and refreshes synchronously through requestAnimationFrame to avoid blocking the main thread.
3. The intelligent seat selection method based on Canvas according to claim 1, characterized in that: In step S2, the movement trajectory of each seat is automatically calculated by using second-order Bézier curve deformation, avoiding manual point-by-point adjustments; when performing rotation operations, an overall coordinate transformation is performed, supporting users to adjust the curved grandstand in real time, while greatly reducing latency.
4. The intelligent seat selection method based on Canvas according to claim 1, characterized in that: In step S3, the state synchronization mechanism uses Redis Bitmap binary bitmap storage to compress the 100,000 seat statuses of each venue into 12.5KB memory space, achieves millisecond-level query complexity of O(1) through the GETBIT command, and combines WebSocket incremental push mechanism to ensure zero conflict in state synchronization under high-concurrency ticket grabbing scenarios.
5. The intelligent seat selection method based on Canvas according to claim 1, characterized in that: In step S4, a responsive layout is implemented through the Vue framework, integrating the PointerEvents API to uniformly handle touch / mouse events in user interaction, and supporting seamless switching between mobile and desktop.
6. A Canvas-based intelligent seat selection system, characterized in that: The method for implementing any one of claims 1 to 5 comprises four parts: a user interaction layer, a Canvas rendering engine, a data management layer, and an intelligent recommendation module. The user interaction layer uses Vue to implement pinch-to-zoom, double-tap to focus, and long-press to select seats. It adopts a responsive layout to achieve intelligent adaptation of device layout and uses the PointerEvents API to uniformly handle touch / mouse events, supporting seamless switching between mobile and desktop. The Canvas rendering engine is divided into three parts: the base layer, the seating layer, and the interaction layer. The bottom layer uses SVG to statically draw the venue structure diagram, which is rendered only once when loaded. The seating matrix is dynamically drawn in the seating layer. Bitmap caching technology is used to pre-render repeated elements and reuse images to reduce the redraw area. By using second-order Bézier curve deformation, the movement trajectory of each seat is automatically calculated to avoid manual point-by-point adjustment. The interaction layer handles gesture events independently, including zooming and dragging, and refreshes synchronously through requestAnimationFrame to avoid blocking the main thread; The data management layer adopts the Redis Bitmap storage scheme, which compresses the seat status into binary bits, with 1 bit representing 1 seat. Bitwise operations are used to achieve O(1) complexity query. At the same time, WebSocket pushes incremental updates to avoid invalid polling and reduce server pressure. The intelligent recommendation module recommends seats based on user preferences, historical seat selection records, and the current venue heat map.
7. A smart seat selection device based on Canvas, characterized in that: It includes a memory and a processor; the memory is used to store a computer program, and the processor is used to execute the computer program to implement the method as described in any one of claims 1 to 5.
8. A readable storage medium, characterized in that: The readable storage medium stores a computer program that, when executed by a processor, implements the method as described in any one of claims 1 to 5.