CN-122019031-A - Induced screen graphic editing system and method based on Web technology

CN122019031ACN 122019031 ACN122019031 ACN 122019031ACN-122019031-A

Abstract

The invention discloses an induced screen graphic editing system and method based on Web technology, wherein a front-end component framework comprises a main control component, a canvas component, a toolbar component and an attribute panel component, a graphic engine is integrated in the canvas component and used for managing canvas rendering, a graphic object life cycle and interaction events, a graphic editing module is used for drawing characters, geometric figures, local pictures and preset traffic symbols through the toolbar to generate a graphic object carrying unique ID and storing the graphic object carrying unique ID into a graphic object management array, a dynamic data binding module is used for dynamically binding graphic elements with a real-time traffic data source, and a real-time rendering engine is used for responding to graphic attribute change or data binding operation and updating the canvas in real time through a graphic object event driving mechanism. The invention realizes direct binding of dynamic data, perfects graphic interaction and real-time editing functions, provides refined style control, optimizes multi-resolution self-adaption, and remarkably improves the efficiency and the specialty of content editing of an induction screen.

Inventors

XIA QIUDONG
LV JIANCHENG
WANG XIANFENG
WU JIAN
WANG QIANGSONG

Assignees

安徽科力信息产业有限责任公司

Dates

Publication Date: 20260512
Application Date: 20251219

Claims (10)

1. The system is characterized by comprising a front-end component architecture and a back-end processing module; The front-end component framework comprises a main control component, a canvas component, a toolbar component and an attribute panel component; the main control component is used for being responsible for overall state management, data transfer and coordination of all sub-components; the Canvas component is used for being responsible for Canvas rendering, graphic object management and interaction event processing; the toolbar component is used for providing graphic drawing, picture uploading, traffic sign insertion, withdrawal and duplication and deleting operations; The attribute panel assembly is used for supporting graphic style adjustment, data binding and traffic road section selection; The back-end processing module comprises a graphic engine, a graphic editing module, a dynamic data binding module and a real-time rendering engine; the graphic engine is integrated in the canvas component and is used for managing canvas rendering, graphic object life cycle and interaction events; The graphic editing module is used for supporting drawing of characters, geometric figures, local pictures and preset traffic symbols through the toolbar, generating a graphic object carrying a unique ID and storing the graphic object to the graphic object management array; the dynamic data binding module is used for dynamically binding the graphic elements with a real-time traffic data source through the attribute panel assembly, wherein the traffic data source comprises road network data, OD data and parking lot data; the real-time rendering engine is used for responding to graphic attribute change or data binding operation and updating canvas in real time through an event driving mechanism.
2. The Web technology-based dashboard graphical editing system of claim 1, wherein all operations of the toolbar component trigger a synchronized update of a graphical object management array via an event.
3. The Web technology-based guidance screen graphic editing system according to claim 1, wherein the service data types in the dynamic data binding module are selected by configurable options of an attribute panel, including road segments, OD pairs and parking lot identifications; Wherein the binding operation triggers a map service linkage and prompts the selected road network segment.
4. The Web technology-based guidance screen graphic editing system of claim 1, wherein the preset traffic sign library comprises straight-through, left-turn, turn-around traffic indication icons and supports click insertion into canvas and style editing.
5. The Web technology-based inducement screen graphic editing system of claim 1, further comprising: the multi-screen splicing adapting module is used for automatically generating a split screen line and adjusting the canvas size according to the induction screen hardware parameters; And the canvas zoom controller is used for dynamically adjusting the canvas display scale through the independent zoom component.
6. The system for editing the graphics on the induction screen based on the Web technology according to claim 1, further comprising a structured data export module, configured to traverse the graphics object management array to extract geometric attributes, style attributes and binding service data of the graphics, and generate a standardized JSON structure for persistent storage or issuing to the induction screen terminal.
7. The Web technology-based induced screen graphic editing system according to claim 1, wherein the main control component manages the graphic object management array, the elements business data set and SELECTEDSHAPE currently selected objects by state promotion; The attribute panel assembly is divided into a style editing page and a data editing page, and style changes are acted on the object in real time through a HANDLECHANGESHAPESTYLE method.
8. The Web technology-based induced screen graphic editing system according to claim 1, wherein graphic drag, zoom, and rotate operations are handled by built-in events encapsulated by the graphic engine, and service data in elements is updated synchronously in real time.
9. The Web technology-based induced screen graphic editing system according to claim 1, wherein the local picture is returned to URL through the interface after being uploaded, automatically converted into a picture object to be inserted into canvas and added into graphic object management array.
10. A method for a Web technology based inducement screen graphic editing system as claimed in any of claims 1 to 9 comprising the steps of: step S1, initializing a front-end component architecture, and loading a main control component, a canvas component, a toolbar component and an attribute panel component; S2, responding to a drawing instruction on the canvas through a graphic engine, generating a graphic object carrying a unique ID and storing the graphic object into a graphic object management array; step S3, responding to the operation of the attribute panel, dynamically binding the graphic elements and the traffic service data source, and rendering to the canvas in real time; s4, inserting a preset traffic sign or uploading a local picture through a toolbar component to generate an editable object; step S5, automatically adapting the canvas size and the split screen line according to the induction screen hardware parameters; And S6, deriving geometric attributes, style attributes and binding service data of all graphics in the graphic object management array, and generating standardized JSON output.

Description

Induced screen graphic editing system and method based on Web technology Technical Field The invention relates to the technical field of intelligent traffic information display, in particular to an induction screen graphic editing system and method based on Web technology. Background The current induced screen content editing technology has a plurality of layers of limitations, including technical architecture, interactive experience, data integration and other aspects. From the technical architecture aspect, the traditional scheme mostly adopts static picture uploading or uses professional design software to make offline, and the mode can not meet the dynamic display requirement of real-time data driving, so that the content updating efficiency of the induction screen is low, and the induction screen is difficult to adapt to changeable data environments such as traffic conditions. In addition, the prior art lacks depth optimization for special application scenes of the induction screen, and particularly has poor performance in the aspects of adaptive rendering of processing ultra-wide screens and other unconventional resolutions, real-time editing of complex graphic attributes and the like. In terms of interactive experience, while some developers utilize a generic Canvas library (e.g., fabric. Js) to provide basic graphics operation functions, these editors have not been deeply optimized for the specific needs of the induction screen. For example, in performing interactive operations such as dragging, copying, and deleting, a problem of positioning deviation is often encountered, and particularly, in processing complex resolution adaptation scenes, such a problem is more prominent. In addition, the font style and graphic style control provided by the editors are rough, so that the requirements of refinement of professional induction screen designs are difficult to meet, and secondary editing support for graphic attributes is lacking. On the data integration level, most of the existing solutions rely on hard coding or simple text substitution, which is difficult to support intelligent binding and dynamic updating of structured data (such as real road conditions, OD information, illegal data, etc.). For example, real-time traffic data needs to be associated with the dynamic content of the guidance screen in real time, but existing editing tools are difficult to implement such automated dynamic modification, resulting in frequent manual adjustments required by users, inefficiency and error-prone. In view of the foregoing, the present technical solutions have obvious shortcomings in terms of technical architecture, interactive experience, data integration, and the like, and more advanced and specialized guidance screen graphic editing tools are needed to solve the above problems. Disclosure of Invention The invention aims to overcome the defects in the prior art, and aims to achieve the purposes, and adopts an induction screen graph editing system and method based on the Web technology to solve the problems in the background technology. An induced screen graphic editing system based on Web technology comprises a front-end component architecture and a back-end processing module; The front-end component framework comprises a main control component, a canvas component, a toolbar component and an attribute panel component; the main control component is used for being responsible for overall state management, data transfer and coordination of all sub-components; the Canvas component is used for being responsible for Canvas rendering, graphic object management and interaction event processing; the toolbar component is used for providing graphic drawing, picture uploading, traffic sign insertion, withdrawal and duplication and deleting operations; The attribute panel assembly is used for supporting graphic style adjustment, data binding and traffic road section selection; The back-end processing module comprises a graphic engine, a graphic editing module, a dynamic data binding module and a real-time rendering engine; the graphic engine is integrated in the canvas component and is used for managing canvas rendering, graphic object life cycle and interaction events; The graphic editing module is used for supporting drawing of characters, geometric figures, local pictures and preset traffic symbols through the toolbar, generating a graphic object carrying a unique ID and storing the graphic object to the graphic object management array; the dynamic data binding module is used for dynamically binding the graphic elements with a real-time traffic data source through the attribute panel assembly, wherein the traffic data source comprises road network data, OD data and parking lot data; the real-time rendering engine is used for responding to graphic attribute change or data binding operation and updating canvas in real time through an event driving mechanism. As a further aspect of the invention, all operations of the to