Method and system for online rendering of PCB design drawing

Abstract

The invention provides a method and a system for online rendering of a PCB (printed circuit board) design drawing, and the method is used for performing graphic rendering on a browser based on a graphic engine PIXI.js. The specific rendering process comprises the following steps: firstly, according to the characteristics of the PCB design drawing, adding elements of the same type at the same level into a corresponding unified rendering group; the method comprises the following steps of: firstly, turning off a frame-by-frame rendering mode of a graphic engine PIXI.js, then obtaining a user interaction area in a PCB design drawing according to user interaction operation, and finally, rendering based on all unified rendering groups to obtain a rendering result in the user interaction area. Compared with the prior art, the method has the advantages that a solution of'rendering on demand 'is provided, the PCB design elements which actually need to be interacted by a user can be rendered, the whole PCB design drawing does not need to be rerendered regularly, the working pressure of a CPU (central processing unit) / GPU (graphics processing unit) is greatly reduced, and the PCB design editing efficiency of a user computer on a browser is improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of electronic circuit design, and particularly relates to a method and system for online rendering of PCB design drawings. Background Art

[0002] HTML5 Canvas is a core element in HTML5 specifically for drawing graphics on web pages. It allows developers to draw graphics on web pages using scripts (usually existing JavaScript). In the prior art, there already exists a method for drawing PCB circuit diagrams based on HTML5 Canvas technology, which can draw and render PCB design drawings in real time on web pages. However, due to the underlying logic of HTML5 Canvas, the above method has the following technical problems:

[0003] 1) During the rendering process, the entire PCB design drawing needs to be globally rendered, and as time goes by, regardless of whether the content of the PCB design drawing has changed, the entire PCB design drawing will be re-rendered regularly. This will increase the working pressure on the CPU / GPU and significantly reduce the overall rendering efficiency of the user's computer.

[0004] 2) Based on the HTML5 Canvas kernel, the technical encapsulation and abstraction layout of electronic components or assemblies in the PCB design drawing are insufficient, making it difficult to maintain, update, and expand the PCB design drawing, which will prolong the development cycle in the PCB design process.

[0005] 3) The API (Application Programming Interface) based on the HTML5 Canvas kernel is complex, making it difficult for existing algorithms to optimize graphics rendering. Summary of the Invention

[0006] Aiming at the deficiencies of the prior art, the present invention provides a method and system for online rendering of PCB design drawings, mainly used to solve the problem of low rendering efficiency in the prior art.

[0007] In a first aspect, to achieve the above object, the present invention provides a method for online rendering of PCB design drawings. This method performs graphics rendering on a browser based on the graphics engine PIXI.js, and the method includes:

[0008] S10: According to the characteristics of the PCB design drawing, add the same type of elements at the same level to the corresponding unified rendering group;

[0009] Among them, the same type of elements in the unified rendering group are combined into the same graphic during rendering;

[0010] S20: Turn off the frame-by-frame rendering mode of the graphics engine PIXI.js;

[0011] S30: Obtain the user interaction area in the PCB design diagram according to the user interaction operation;

[0012] S40: Render the rendering result within the user interaction area based on all unified rendering groups.

[0013] Through the above technical solution, the method of the present invention no longer uses HTML5 Canvas to perform graphic rendering on the PCB design diagram in the browser, but instead uses the graphics engine PIXI.js to render the PCB design diagram. The PIXI.js engine is a 2D rendering engine based on WebGL. Compared with HTML5 Canvas, the PIXI.js engine has stronger compatibility and faster rendering speed. Compared with the prior art, the method of the present invention utilizes the characteristics of the PIXI.js engine and adopts the strategy of "rendering on demand" to render the PCB design elements that the user actually needs to interact with, without the need to re-render the entire PCB design diagram regularly, greatly reducing the working pressure of the CPU / GPU, and thus improving the efficiency of the user's computer for PCB design editing in the browser, thereby solving the problem of low rendering efficiency in the prior art.

[0014] Preferably, when rendering the rendering result within the user interaction area based on all unified rendering groups, perform view clipping on all unified rendering groups within the user interaction area and then switch the on / off state of the frame-by-frame rendering mode for rendering to obtain the rendering result.

[0015] Preferably, the user interaction operation includes at least one or more of an operation of scaling an element, an operation of dragging an element, an operation of dragging a window, an operation of scaling a window, an operation of selecting an element, an operation of moving an element out, and an operation of changing the remote display requirement.

[0016] Through the above technical solution, the method of the present invention is no longer limited to the online review in the prior art. Whether it is the "operation of dragging a window" and "operation of scaling a window" for review, or the "operation of scaling an element", "operation of dragging an element", "operation of selecting an element", "operation of moving an element out", and "operation of changing the remote display requirement" for online editing, the method of the present invention can achieve "rendering on demand", rendering the content actually required by the user with the lowest amount of computing power, which not only reduces the working pressure of the CPU / GPU, but also enables the user to obtain or modify key information fastest.

[0017] Preferably, if the user interaction operation is an operation of scaling an element, the user interaction area includes the target scaling area of the PCB design diagram;

[0018] Performing view clipping on all unified rendering groups within the user interaction area and then switching the on / off state of the frame-by-frame rendering mode for rendering, includes:

[0019] S410: When the user performs the zoom element operation, turn on the frame-by-frame rendering mode;

[0020] S411: Calculate the zoom ratio of the first target element after zooming relative to the same element in the original PCB design diagram;

[0021] S412: According to the zoom ratio, redraw the first target element, update the unified rendering group to which the first target element belongs, and render all unified rendering groups within the target zoom area;

[0022] S413: After S412 is completed, turn off the frame-by-frame rendering mode.

[0023] Through the above technical solution, when the method of the present invention is directed to the zoom element operation, it also adopts the execution logic of "rendering on demand", and the frame-by-frame rendering mode will be turned off immediately after rendering is completed, so that the CPU / GPU will not maintain a high-intensity working state, thereby reducing the performance impact of the rendering process on the user's computer.

[0024] Preferably, if the user interaction operation is a drag element operation, the user interaction area includes the target drag area of the PCB design diagram;

[0025] Performing view clipping on all unified rendering groups within the user interaction area and then switching the on / off state of the frame-by-frame rendering mode for rendering, includes:

[0026] S420: When the user performs the drag element operation, turn on the frame-by-frame rendering mode;

[0027] S421: Calculate the relative distance between the second target element after dragging and the same element in the original PCB design diagram;

[0028] S422: According to the relative distance, redraw the second target element, update the unified rendering group to which the second target element belongs, and render all unified rendering groups within the target drag area;

[0029] S423: After S422 is completed, turn off the frame-by-frame rendering mode.

[0030] Through the above technical solution, when the method of the present invention operates on a dragged element, it also adopts the execution logic of "rendering on demand". Different from the operation of scaling an element, during the redrawing and rendering process, it is necessary to calculate the relative distance between the element after the position change and the initial position to accurately record the change information to assist the redrawing process. Similarly, when the operation of dragging an element is completed, the frame-by-frame rendering mode is turned off immediately, so that the CPU / GPU does not maintain a high-intensity working state, thereby reducing the performance impact of the rendering process on the user's computer.

[0031] Preferably, if the user interaction operation is a selected element operation, the user interaction area includes the highlighted area of the PCB design diagram;

[0032] The rendering by cropping the views of all unified rendering groups in the user interaction area and then switching the on / off state of the frame-by-frame rendering mode includes:

[0033] S430: When the user selects the third target element, turn on the frame-by-frame rendering mode;

[0034] S431: Redraw the highlighted graphics of the third target element, update the unified rendering group to which the third target element belongs, and render all unified rendering groups in the highlighted area;

[0035] S432: After S431 is completed, turn off the frame-by-frame rendering mode.

[0036] Preferably, if the user interaction operation is converted to a move-out element operation in any step of S430 - S431, the user interaction area is the non-highlighted area including the PCB design diagram. The rendering step in S40 by cropping the views of all unified rendering groups in the user interaction area and then switching the on / off state of the frame-by-frame rendering mode includes:

[0037] S440: When the user moves the third target element away, turn on the frame-by-frame rendering mode;

[0038] S442: Redraw the original initial graphics of the third target element, update the unified rendering group to which the third target element belongs, and render all unified rendering groups in the non-highlighted area;

[0039] S443: After S442 is completed, turn off the frame-by-frame rendering mode.

[0040] Preferably, if the user interaction operation is a remote display requirement change operation, the rendering by cropping the views of all unified rendering groups in the user interaction area and then switching the on / off state of the frame-by-frame rendering mode includes:

[0041] S450: When obtaining remote display change data, enable the frame-by-frame rendering mode;

[0042] S451: After completing the data change of the fourth target element corresponding to the remote display change data, update the unified rendering group to which the fourth target element belongs, and render all unified rendering groups within the user interaction area;

[0043] S452: After S451 is completed, disable the frame-by-frame rendering mode.

[0044] Preferably, the view clipping of all unified rendering groups within the user interaction area includes:

[0045] S401: According to the user interaction operation, obtain the view corner coordinates of the user interaction area and the element corner coordinates of the interaction element;

[0046] S402: Compare the view corner coordinates with the element corner coordinates to determine whether the interaction element is located within the user interaction area; if so, set the rendering attribute of the interaction element to renderable; if not, abandon the rendering of the interaction element.

[0047] Different from the prior art, the method of the present invention does not perform global rendering on the PCB line design diagram (initial display viewport) in the browser page, but only renders the interaction elements located within the user interaction area. This method can focus on rendering key elements and discard the rendering of secondary elements, and can achieve efficient rendering with the least computing power.

[0048] In a second aspect, to achieve the above object, the present invention also provides a system for online rendering of PCB design diagrams, including:

[0049] A unified rendering grouping module, configured to add the same type of elements at the same level to the corresponding unified rendering group according to the characteristics of the PCB design diagram;

[0050] Wherein, the same type of elements within the unified rendering group are combined into the same graphic during rendering;

[0051] A rendering engine shutdown module, configured to disable the frame-by-frame rendering mode of the graphics engine PIXI.js;

[0052] An interaction module, configured to obtain the user interaction area in the PCB design diagram according to the user interaction operation;

[0053] A rendering-on-demand module, configured to render the rendering result within the user interaction area based on all unified rendering groups.

[0054] Through the above technical solutions, the present invention has developed a dedicated system (software) based on the method of the present invention. Compared with the prior art, the system of the present invention has stronger versatility, is more lightweight, occupies less computing power, and can be almost carried on any browser.

[0055] Compared with the prior art, the present invention has at least the following advantages:

[0056] 1) Compared with the prior art, the method of the present invention utilizes the characteristics of the PIXI.js engine and adopts the strategy of "rendering on demand" to render the PCB design elements that the user actually needs to interact with, without the need to re-render the entire PCB design diagram regularly. This greatly reduces the working pressure on the CPU / GPU and significantly improves the running performance of the PCB design diagram in the browser, enabling large PCB design diagrams to be smoothly browsed in the browser.

[0057] 2) Compared with the prior art, the method of the present invention can crop the area where the user actually interacts and render the actually cropped area and the elements located within the cropped area, greatly reducing the workload that the computer needs to render and reducing the time required for actual rendering.

[0058] 3) Compared with the prior art, when the method of the present invention operates on scaling elements, it adopts the execution logic of "rendering on demand", and closes the frame-by-frame rendering mode immediately after the rendering is completed, so that the CPU / GPU will not maintain a high-intensity working state, thereby reducing the impact of the rendering process on the performance of the user's computer. BRIEF DESCRIPTION OF THE DRAWINGS

[0059] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the following will briefly introduce the drawings required for use in the description of the embodiments or the prior art. Obviously, the following drawings are only some embodiments of the present invention. For those of ordinary skill in the art, without creative efforts, other drawings can also be obtained based on these drawings.

[0060] Figure 1 It is a flowchart of the method for online rendering of PCB design diagrams in Embodiment 1 of the present invention;

[0061] Figure 2 It is an algorithm logic diagram of S10 in Embodiment 1 of the present invention;

[0062] Figure 3 It is an animation frame change diagram of the rendering process of S40 in Embodiment 1 of the present invention;

[0063] Figure 4 It is a schematic diagram of the cropping process of S40 in Embodiment 2 of the present invention;

[0064] Figure 5 Schematic diagram of the system for online rendering of PCB design drawings in Embodiment 7 of the present invention. Detailed implementation manners

[0065] The technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

[0066] In the description of the present invention, it should be noted that the terms "center", "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc. indicate the orientation or positional relationship based on the orientation or positional relationship shown in the drawings. It is only for the convenience of describing the present invention and simplifying the description, rather than indicating or implying that the device or element referred to must have a specific orientation, be constructed and operated in a specific orientation, and thus cannot be construed as a limitation of the present invention.

[0067] This embodiment discloses a method and system for online rendering of PCB design drawings, which is used to solve the problem of low rendering efficiency in the prior art.

[0068] Embodiment 1

[0069] As Figure 1 shown, this embodiment discloses a method for online rendering of PCB design drawings, which is based on the graphics engine PIXI.js for graphics rendering on the browser.

[0070] It should be explained that PIXI.js is an open-source lightweight 2D rendering engine that focuses on using WebGL and Canvas technologies in HTML5 to achieve high-performance interactive graphics and animations. It is commonly used in the fields of graphics animation and games. Compared with HTML5 Canvas, it has a faster rendering speed, is more conducive to user interaction, and has an API interface that is easy to expand, which is more conducive to the optimization, expansion, and maintenance of program function blocks.

[0071] In other embodiments, the graphics engine PIXI.js can also use other graphics engines, such as Konva.js, Three.js and other graphics engines.

[0072] The method for online rendering of PCB design drawings disclosed in this embodiment includes:

[0073] S10: According to the characteristics of the PCB design drawing, add the same type of elements at the same level to the corresponding unified rendering group.

[0074] In this embodiment, the same type of elements within the unified rendering group are combined into the same graphic during rendering. The PCB design drawing elements at least include copper foils, pins, text, vias, and component annotations, and these elements are all important components in the PCB design drawing. That is, the unified rendering group includes a copper foil rendering group, a pin rendering group, a text rendering group, a via rendering group, and a component annotation rendering group.

[0075] More specifically, the above S10 includes:

[0076] S11: Add copper foils at the same level to the copper foil rendering group and perform unified rendering using the graphics engine PIXI.js to obtain the copper foil graphics of the copper foil rendering group in the initial animation frame.

[0077] S12: Add pins at the same level to the pin rendering group and perform unified rendering using the graphics engine PIXI.js to obtain the pin graphics of the pin rendering group in the initial animation frame.

[0078] S13: Add text at the same level to the text rendering group and perform unified rendering using the graphics engine PIXI.js to obtain the text graphics of the text rendering group in the initial animation frame.

[0079] S14: Add vias at the same level to the via rendering group and perform unified rendering using the graphics engine PIXI.js to obtain the via graphics of the via rendering group in the initial animation frame.

[0080] S15: Add component annotations at the same level to the component annotation rendering group and perform unified rendering using the graphics engine PIXI.js to obtain the component annotation graphics of the component annotation rendering group in the initial animation frame.

[0081] It should be added that the above S11 - S15 can be implemented using multithreaded synchronization to improve the overall rendering rate. Additionally, as Figure 2 shown, all PCB design drawing elements can be read using JSON - formatted data. After being classified and grouped, they are uniformly rendered in the initial animation frame. After the various graphics in the initial animation frame are obtained, if the user does not perform any interaction actions on the PCB design drawing, the rendering of the PCB design will stagnate in the initial frame. Compared with the prior art, the technical solution of the present invention no longer re - renders the entire PCB design drawing regularly to reduce the working pressure on the CPU / GPU.

[0082] The above S11 - S15 are essentially a combination optimization algorithm. Based on this algorithm, each component or text annotation in the PCB design drawing is managed and rendered in a layered and unified manner, simplifying the processing logic of rendering each element in the prior art, thereby reducing the CPU / GPU data processing volume, and further reducing the working pressure on the CPU / GPU, and improving the rendering efficiency of the user's computer for PCB design editing in the browser.

[0083] S20: Turn off the frame-by-frame rendering mode of the graphics engine PIXI.js.

[0084] It should be noted that the frame-by-frame rendering mode refers to the process of decomposing a dynamic process into a series of static images and rendering them one by one.

[0085] S30: Obtain the user interaction area in the PCB design diagram according to the user interaction operation.

[0086] In this embodiment, the user interaction operation refers to the user's review and editing operations on the PCB design diagram. Such user interaction operations can include one or more of the operations of zooming in on elements, dragging elements, dragging the window, zooming the window, selecting elements, moving out elements, and changing the remote display requirements. According to different types of user operations, the corresponding user interaction area is obtained, and the user interaction area can be used as the area to be rendered. Generally speaking, the user interaction area is located within the visible interaction window of the browser.

[0087] Among them, the above-mentioned dragging window operation refers to dragging the visible window of the browser, and the zooming window operation refers to zooming the visible window of the browser.

[0088] It should be added that the objects for performing the above operations of zooming in on elements, dragging elements, dragging the window, zooming the window, selecting elements, moving out elements, and changing the remote display requirements can be a mouse or a touch device.

[0089] S40: Render the rendering result within the user interaction area based on all unified rendering groups.

[0090] In this embodiment, when rendering the rendering result within the user interaction area based on all unified rendering groups, the switch state of the frame-by-frame rendering mode can be rendered after performing view clipping on all unified rendering groups within the user interaction area to obtain the rendering result.

[0091] Specifically, using the user interaction area as the range to be rendered, perform view clipping on the unified rendering groups, removing the elements of the unified rendering groups that are not within the user interaction area and not using them as rendering objects, while retaining the elements of the unified rendering groups within the user interaction area as the objects to be rendered. Then, turn on the frame-by-frame rendering mode to render the objects to be rendered to obtain the rendering result.

[0092] Furthermore, as Figure 3 shown, when the user interaction operation is executed, the interaction elements within the user interaction area are rendered and refreshed in the animation frame. If the user does not perform any interaction actions, the rendered graphics of the previous animation frame are retained.

[0093] Through the above technical solutions S10 - S40, the method of the present invention utilizes the characteristics of the PIXI.js engine and adopts the strategy of "rendering on demand" to render the PCB design elements that the user actually needs to interact with, without re - rendering the entire PCB design diagram regularly, greatly reducing the working pressure on the CPU / GPU, and thus improving the rendering efficiency of the user's computer for PCB design and editing in the browser.

[0094] Embodiment 2

[0095] As Figure 4 shown, on the basis of Embodiment 1, the method for online rendering of PCB design diagrams in this embodiment incorporates a view clipping algorithm for the clipping process of S40.

[0096] Specifically, when performing view clipping on all unified rendering groups within the user interaction area, the following steps may be included:

[0097] S401: According to the user interaction operation, obtain the viewport corner coordinates of the user interaction area and the element corner coordinates of the interaction elements.

[0098] S402: Compare the viewport corner coordinates with the element corner coordinates to determine whether the interaction element is within the user interaction area; if so, set the rendering attribute of the interaction element to renderable; if not, abandon the rendering of the interaction element.

[0099] It should be noted that the user interaction area is the Figure 4 user - visible area (browser interaction window) in , and the method of this embodiment abandons rendering for other invisible areas.

[0100] Furthermore, before S401, the method of the present invention includes:

[0101] Initialize the view clipping algorithm program and simultaneously obtain the four - corner coordinates (upper - left, upper - right, lower - left, lower - right) of the user - end viewport.

[0102] The specific judgment conditions for determining whether the interaction element is within the user interaction area in S402 are as follows:

[0103] a. If the horizontal coordinates of the four corners of the element are all less than the horizontal coordinates of the four corners of the viewport, it is off - screen on the left.

[0104] b. If the horizontal coordinates of the four corners of the element are all greater than the horizontal coordinates of the four corners of the viewport, it is off - screen on the right.

[0105] c. If the vertical coordinates of the four corners of the element are all greater than the vertical coordinates of the four corners of the viewport, it is off - screen on the lower side.

[0106] d. If the vertical coordinates of the four corners of the element are all less than the vertical coordinates of the four corners of the viewport, it is off - screen on the upper side.

[0107] e. If the above conditions a, b, c, or d are not met, it is an on-screen element; otherwise, it is an off-screen element.

[0108] Set the visible attribute of the off-screen element to False to let the engine abandon rendering the graphic, and set the visible attribute of the on-screen element to True to let the engine resume rendering the element.

[0109] Compared with the prior art, steps S401 - S402 and their supporting judgment conditions can efficiently identify whether an element is off-screen, enabling the method of the present invention to crop the area where the user actually interacts, and render the actually cropped area and the elements located within the cropped area, significantly reducing the workload that the computer needs to render and the time required for actual rendering.

[0110] Embodiment Three

[0111] Based on Embodiment One, the method for online rendering of a PCB design drawing in this embodiment is dedicated to processing online graphic rendering for zooming element operations.

[0112] Specifically, if the user interaction operation is a zooming element operation, the user interaction area includes the target zoom area of the PCB design drawing; when rendering by switching the on-off state of the frame-by-frame rendering mode after cropping the views of all unified rendering groups within the user interaction area, the steps may include:

[0113] S410: When the user performs a zooming element operation, turn on the frame-by-frame rendering mode.

[0114] S411: Calculate the zoom ratio of the first target element after zooming relative to the same element in the original PCB design drawing.

[0115] It should be explained that the above zoom operation includes both reducing the element operation and enlarging the element operation. Therefore, if it is assumed that the zoom ratio can be greater than 1 or less than 1, but not a negative value or 0.

[0116] S412: According to the zoom ratio, redraw the first target element, update the unified rendering group to which the first target element belongs, and render all unified rendering groups within the target zoom area.

[0117] S413: After S412 is completed, turn off the frame-by-frame rendering mode.

[0118] Through the above technical solutions S410 - S413, the method of the present invention can perform "on - demand rendering" on the first target element that performs scaling, and only perform the rendering operation in the animation frame after its scaling and redrawing are completed, and then promptly turn off the frame - by - frame rendering mode, and no longer adopt the logic of re - rendering the entire PCB design drawing regularly. This way is more conducive to reducing the rendering burden on the CPU / GPU.

[0119] Embodiment 4

[0120] Different from Embodiment 3, the method for online rendering of PCB design drawings in this embodiment is dedicated to processing online graphic rendering for the operation of dragging elements.

[0121] Specifically, if the user interaction operation is an operation of dragging an element, the user interaction area includes the target dragging area of the PCB design drawing; when rendering after cropping the view of all unified rendering groups in the user interaction area and switching the on - off state of the frame - by - frame rendering mode, the steps may include:

[0122] S420: When the user performs the operation of dragging an element, turn on the frame - by - frame rendering mode.

[0123] S421: Calculate the relative distance between the second target element after dragging and the same element in the original PCB design drawing.

[0124] S422: According to the relative distance, redraw the second target element, update the unified rendering group to which the second target element belongs, and render all unified rendering groups in the target dragging area.

[0125] S423: After S422 is completed, turn off the frame - by - frame rendering mode.

[0126] It should be explained that the operation of dragging an element refers to the relative displacement of some elements in the PCB design drawing. It can be the dragging of a user clicking on an element with the mouse, or the dragging of a user selecting multiple elements with the mouse. The target dragging area refers to the end area of the dragged element, and this area is within the user interaction area (generally within the browser page of the display window).

[0127] Through the above technical solutions S420 - S413, the method of the present invention can perform "on - demand rendering" on the second target element that performs the operation of dragging an element. Only after its dragging, redraw and update it according to the relative distance, and then turn off the frame - by - frame rendering mode immediately, and no longer adopt the logic of re - rendering the entire PCB design drawing regularly. This way is more conducive to reducing the rendering burden on the CPU / GPU.

[0128] Embodiment 5

[0129] Based on the first embodiment, the method for online rendering of PCB design drawings in this embodiment is dedicated to online rendering of operations for selecting or removing elements.

[0130] Specifically, if the user interaction operation is a selecting element operation, the user interaction area includes the highlighted area of the PCB design drawing; when rendering by switching the on / off state of the frame-by-frame rendering mode after cropping the view of all unified rendering groups within the user interaction area, the steps may include:

[0131] S430: When the user selects the third target element, turn on the frame-by-frame rendering mode.

[0132] S431: Redraw the highlighted graphics of the third target element, update the unified rendering group to which the third target element belongs, and render all unified rendering groups within the highlighted area.

[0133] S432: After S431 is completed, turn off the frame-by-frame rendering mode.

[0134] Furthermore, if the user interaction operation is converted to a removing element operation in any step of S430 - S431, the user interaction area is the non-highlighted area including the PCB design drawing, and the steps for rendering by switching the on / off state of the frame-by-frame rendering mode after cropping the view of all unified rendering groups within the user interaction area in S40 include:

[0135] S440: When the user moves the third target element away, turn on the frame-by-frame rendering mode;

[0136] S442: Redraw the original initial graphics of the third target element, update the unified rendering group to which the third target element belongs, and render all unified rendering groups within the non-highlighted area;

[0137] S443: After S442 is completed, turn off the frame-by-frame rendering mode.

[0138] Through the above technical solutions S430 - S443, when the user selects a certain element of the PCB design drawing with a mouse, a stylus or any other medium that can be used to select elements, the graphic range (highlighted area) to which the element belongs will be in a highlighted state. In order to depict the specific details of the element, only the element and the unified rendering group to which it belongs are rendered through S431, while other non-highlighted areas are discarded from rendering, realizing "rendering on demand" for the selected highlighted area. This rendering logic is beneficial to reducing the rendering pressure and thus alleviating the rendering burden on the CPU / GPU. If the user moves a mouse, a stylus or any other medium that can be used to select elements away from a certain element, the graphic area to which the element belongs changes from "highlighted" to "dark", and the rendering is simplified through S442, that is, the specific details are no longer rendered in detail to reduce the rendering burden on the CPU / GPU.

[0139] Example VI

[0140] Based on Example I, the method for online rendering of PCB design drawings in this example is specifically used for online rendering according to remote scheduling, review, or editing information.

[0141] Specifically, if the user interaction operation is a remote display requirement change operation, when rendering by switching the on / off state of the frame-by-frame rendering mode after cropping the views of all unified rendering groups within the user interaction area, the steps may include:

[0142] S450: When obtaining remote display change data, turn on the frame-by-frame rendering mode.

[0143] S451: After completing the data change of the fourth target element corresponding to the remote display change data, update the unified rendering group to which the fourth target element belongs, and render all unified rendering groups within the user interaction area.

[0144] S452: After S451 is completed, turn off the frame-by-frame rendering mode.

[0145] In this example, the above remote display requirement change operation uses WebSocket technology for two-way communication between the remote end and the on-site end. The remote display requirement change operation refers to, on the premise of communication docking between the remote end and the on-site end, performing interactive operations on the on-site end by the remote end. These specific operation contents can be any one of zooming in / out on an element operation, dragging an element operation, dragging a window operation, zooming in / out on a window operation, selecting an element operation, and moving an element out operation. Its processing logic is similar to or the same as the content described in Examples III to V, and will not be elaborated here.

[0146] It should be noted that in some special engineering environments, there are confidentiality requirements for PCB design projects. Such PCB design projects are often stored in the internal network, and for those who work outside the office, a special encryption program is required to achieve the connection between the external network and the internal network. The technical solution described in this example can be applied to such environments.

[0147] Compared with the prior art, the computing power requirement of the method of the present invention is lower. Therefore, when remotely scheduling, reviewing, or editing information, it can reduce the latency of remote end operations and information acquisition, and effectively improve the efficiency of remote online review and editing.

[0148] Example VII

[0149] As Figure 5 shown, this example discloses a system for online rendering of PCB design drawings, including:

[0150] The unified rendering grouping module is used to add the same type of elements at the same level to the corresponding unified rendering group according to the characteristics of the PCB design drawing;

[0151] Among them, the same type of elements in the unified rendering group are combined into the same graphic during rendering;

[0152] The rendering engine shutdown module is used to turn off the frame-by-frame rendering mode of the graphics engine PIXI.js;

[0153] The interaction module is used to obtain the user interaction area in the PCB design drawing according to the user interaction operation;

[0154] The on-demand rendering module renders the rendering result within the user interaction area based on all the unified rendering groups.

[0155] Through the above technical solution, the present invention has developed a dedicated system (software) based on the method of the present invention. Compared with the prior art, the system of the present invention has stronger versatility, is more lightweight, occupies less computing power, and can be almost carried on any browser.

[0156] Those of ordinary skill in the art can understand that all or part of the steps of implementing the above embodiments can be completed by hardware related to program instructions. The foregoing program can be stored in a computer-readable storage medium. When the program is executed, it executes the steps including the above method embodiments; and the foregoing storage medium includes: various media such as ROM, RAM, magnetic disk or optical disk that can store program codes.

[0157] For those skilled in the art, various corresponding changes and deformations can be made according to the technical solutions and concepts described above, and all such changes and deformations should fall within the protection scope of the claims of the present invention.

Claims

1. A method for online rendering of PCB design drawings, characterized in that, Perform graphic rendering on a browser based on the graphics engine PIXI.js. The method includes: S10: According to the characteristics of the PCB design drawing, add the same type of elements at the same level to the corresponding unified rendering group; Among them, the same type of elements in the unified rendering group are combined into the same graphic during rendering; S20: Turn off the frame-by-frame rendering mode of the graphics engine PIXI.js; S30: Obtain the user interaction area in the PCB design drawing according to the user interaction operation; S40: Based on all unified rendering groups, render the rendering result within the user interaction area.

2. The method for online rendering of PCB design drawings according to claim 1, wherein When rendering the rendering result within the user interaction area based on all unified rendering groups, perform view clipping on all unified rendering groups within the user interaction area and then switch the on / off state of the frame-by-frame rendering mode to perform rendering to obtain the rendering result.

3. The method for online rendering of PCB design drawings according to claim 2, wherein The user interaction operation includes at least one or more of an operation of scaling an element, an operation of dragging an element, an operation of dragging a window, an operation of scaling a window, an operation of selecting an element, an operation of moving an element out, and an operation of changing the remote display requirement.

4. The method for online rendering of PCB design drawings according to claim 3, wherein, If the user interaction operation is an operation of scaling an element, the user interaction area includes the target scaling area of the PCB design drawing; The performing view clipping on all unified rendering groups within the user interaction area and then switching the on / off state of the frame-by-frame rendering mode to perform rendering includes: S410: When the user performs the operation of scaling an element, turn on the frame-by-frame rendering mode; S411: Calculate the scaling factor of the scaled first target element relative to the same element in the original PCB design drawing; S412: According to the scaling factor, redraw the first target element, update the unified rendering group to which the first target element belongs, and render all unified rendering groups within the target scaling area; S413: After S412 is completed, turn off the frame-by-frame rendering mode.

5. The method for online rendering of PCB design drawings according to claim 3, wherein, If the user interaction operation is an operation of dragging an element, the user interaction area includes the target dragging area of the PCB design drawing; The performing view clipping on all unified rendering groups within the user interaction area and then switching the on / off state of the frame-by-frame rendering mode to perform rendering includes: S420: When the user performs the operation of dragging an element, turn on the frame-by-frame rendering mode; S421: Calculate the relative distance between the dragged second target element and the same element in the original PCB design drawing; S422: According to the relative distance, redraw the second target element, update the unified rendering group to which the second target element belongs, and render all unified rendering groups within the target dragging area; S423: After S422 is completed, turn off the frame-by-frame rendering mode.

6. The method for online rendering of PCB design drawings according to claim 3, characterized in that If the user interaction operation is an operation of selecting an element, the user interaction area includes the highlighted area of the PCB design drawing; The performing view clipping on all unified rendering groups within the user interaction area and then switching the on / off state of the frame-by-frame rendering mode to perform rendering includes: S430: When the user selects a third target element, turn on the frame-by-frame rendering mode; S431: Redraw the highlighted graphic of the third target element, update the unified rendering group to which the third target element belongs, and render all the unified rendering groups within the highlighted area; S432: After S431 is completed, turn off the frame-by-frame rendering mode.

7. The method for online rendering of PCB design drawings according to claim 6, characterized in that, If the user interaction operation is converted to an element removal operation in any step of S430 - S431, the user interaction area is the non-highlighted area including the PCB design drawing. The rendering step of cropping the view of all the unified rendering groups within the user interaction area and then switching the on / off state of the frame-by-frame rendering mode includes: S440: When the user moves the third target element away, turn on the frame-by-frame rendering mode; S442: Redraw the original initial graphic of the third target element, update the unified rendering group to which the third target element belongs, and render all the unified rendering groups within the non-highlighted area; S443: After S442 is completed, turn off the frame-by-frame rendering mode.

8. The method for online rendering of PCB design drawings according to claim 3, characterized in that, If the user interaction operation is a remote display requirement change operation, the rendering of cropping the view of all the unified rendering groups within the user interaction area and then switching the on / off state of the frame-by-frame rendering mode includes: S450: When obtaining the remote display change data, turn on the frame-by-frame rendering mode; S451: After completing the data change of the fourth target element corresponding to the remote display change data, update the unified rendering group to which the fourth target element belongs, and render all the unified rendering groups within the user interaction area; S452: After S451 is completed, turn off the frame-by-frame rendering mode.

9. The method for online rendering of PCB design drawings according to claim 2, characterized in that The cropping of the view of all the unified rendering groups within the user interaction area includes: S401: According to the user interaction operation, obtain the view corner point coordinates of the user interaction area and the element corner point coordinates of the interaction element; S402: Compare the view corner point coordinates with the element corner point coordinates to determine whether the interaction element is located within the user interaction area; if so, set the rendering attribute of the interaction element to renderable; if not, abandon the rendering of the interaction element.

10. A system for online rendering of PCB design drawings, characterized in that, Includes: A unified rendering grouping module, configured to add elements of the same type at the same level to the corresponding unified rendering group according to the characteristics of the PCB design drawing; Wherein, the elements of the same type within the unified rendering group are combined into the same graphic during rendering; A rendering engine shutdown module, configured to turn off the frame-by-frame rendering mode of the graphics engine PIXI.js; An interaction module, configured to obtain the user interaction area in the PCB design drawing according to the user interaction operation; A rendering-on-demand module, configured to render the rendering result within the user interaction area based on all the unified rendering groups.

Images