CN114968041A - Event response method, device, equipment and medium based on graph - Google Patents
Event response method, device, equipment and medium based on graph Download PDFInfo
- Publication number
- CN114968041A CN114968041A CN202210573583.1A CN202210573583A CN114968041A CN 114968041 A CN114968041 A CN 114968041A CN 202210573583 A CN202210573583 A CN 202210573583A CN 114968041 A CN114968041 A CN 114968041A
- Authority
- CN
- China
- Prior art keywords
- vector graphics
- graphics
- data
- scalable vector
- triangles
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
- 230000004044 response Effects 0.000 title claims abstract description 70
- 238000000034 method Methods 0.000 title claims abstract description 49
- 230000001960 triggered effect Effects 0.000 claims abstract description 37
- 238000009877 rendering Methods 0.000 claims abstract description 32
- 230000003993 interaction Effects 0.000 claims abstract description 27
- 238000012545 processing Methods 0.000 claims description 16
- 238000004590 computer program Methods 0.000 claims description 10
- 238000004422 calculation algorithm Methods 0.000 claims description 5
- 238000005266 casting Methods 0.000 claims 1
- 230000002452 interceptive effect Effects 0.000 abstract description 21
- 238000010586 diagram Methods 0.000 description 12
- 230000006870 function Effects 0.000 description 11
- 238000004891 communication Methods 0.000 description 6
- 230000003287 optical effect Effects 0.000 description 6
- 238000013507 mapping Methods 0.000 description 5
- 230000008569 process Effects 0.000 description 4
- 230000008901 benefit Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 239000013307 optical fiber Substances 0.000 description 2
- 230000000644 propagated effect Effects 0.000 description 2
- 238000013515 script Methods 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000003491 array Methods 0.000 description 1
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 239000003086 colorant Substances 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 230000010365 information processing Effects 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/04845—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range for image manipulation, e.g. dragging, rotation, expansion or change of colour
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Image Generation (AREA)
Abstract
The present disclosure relates to a graph-based event response method, apparatus, device, and medium. The method comprises the following steps: rendering and displaying scalable vector graphics; wherein the scalable vector graphics bind target interactivity events and the scalable vector graphics are composed of a plurality of triangles; determining a trigger position in response to a trigger operation on the scalable vector graphics; executing the target interaction event if it is determined that at least one of the triangles in the scalable vector graphics is triggered based on the trigger position. According to the embodiment of the disclosure, the scalable vector graphics are drawn by finer triangles, and whether the scalable vector graphics are triggered or not is detected by the triangles, so as to respond to the target interactive event, thereby avoiding the problem that the event is responded when the blank area of the scalable vector graphics is triggered, and improving the response precision of the interactive event based on the SVG graphics.
Description
Technical Field
The present disclosure relates to the field of computer technologies, and in particular, to a method, an apparatus, a device, and a medium for graph-based event response.
Background
At present, Scalable Vector Graphics (SVG) is used as a Graphics format with high extensibility and is increasingly widely applied in the fields of internet, visual display and the like. SVG has the outstanding advantage of supporting script codes and DOM (a standard programming interface for processing XML), so that a user can access various graphic elements in an SVG document according to the DOM interface standard and add interactive events such as move-in, move-out, click and the like. And after the user carries out interaction triggering operation on the SVG graph, the electronic equipment responds to the interaction triggering operation and executes an interaction event.
However, the response area of the interactive event corresponding to the current DOM node is determined by a rectangle formed by the width and the height of the SVG graph, so that the response area of the interactive event is expanded to a certain extent, and the response accuracy of the interactive event is reduced.
Disclosure of Invention
In order to solve the technical problem, the present disclosure provides a graph-based event response method, apparatus, device, and medium.
In a first aspect, the present disclosure provides a graph-based event response method, including:
rendering and displaying scalable vector graphics; wherein the scalable vector graphics bind to a target interactive event, and the scalable vector graphics are composed of a plurality of triangles;
determining a trigger position in response to a trigger operation on the scalable vector graphics;
executing the target interaction event if it is determined that at least one of the triangles in the scalable vector graphics is triggered based on the trigger position.
In a second aspect, the present disclosure provides a graph-based event response apparatus, comprising:
a vector graphics display module for rendering and displaying scalable vector graphics; wherein the scalable vector graphics bind target interactivity events and the scalable vector graphics are composed of a plurality of triangles;
a trigger position determination module for determining a trigger position in response to a trigger operation on the scalable vector graphics;
an event execution module to execute the target interaction event if it is determined based on the trigger position that at least one of the triangles in the scalable vector graphics is triggered.
In a third aspect, the present disclosure provides an electronic device comprising:
a processor;
a memory for storing executable instructions;
wherein the processor is configured to read the executable instructions from the memory and execute the executable instructions to implement the graph-based event response method described in any embodiment of the present disclosure.
In a fourth aspect, the present disclosure provides a computer-readable storage medium storing a computer program which, when executed by a processor, causes the processor to implement a graph-based event response method as illustrated in any of the embodiments of the present disclosure.
The graph-based event response method, device, equipment and medium of the embodiments of the present disclosure can render and display a scalable vector graph composed of a plurality of triangles, to which a target interaction event is bound; and is capable of determining a trigger position in response to a trigger operation on the scalable vector graphics; and in the event that it is determined based on the trigger position that at least one triangle in the scalable vector graphics is triggered, executing a target interaction event; the scalable vector graphics are drawn by finer triangles, whether the scalable vector graphics are triggered or not is detected through the triangles, and then the response of the target interactive event is carried out, so that the problem that the event is responded when a blank area of the scalable vector graphics is triggered is solved, and the response precision of the interactive event based on the SVG graphics is improved.
Drawings
The above and other features, advantages and aspects of various embodiments of the present disclosure will become more apparent by referring to the following detailed description when taken in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numbers refer to the same or similar elements. It should be understood that the drawings are schematic and that elements and features are not necessarily drawn to scale.
Fig. 1 is a schematic flow chart of a graph-based event response method according to an embodiment of the present disclosure;
FIG. 2 is a schematic diagram illustrating the principle of triangularization of a vector graph according to an embodiment of the present disclosure;
FIG. 3 is a schematic diagram of another exemplary embodiment of the present disclosure for triangularization of vector graphics;
FIG. 4 is a schematic flow chart diagram illustrating another graph-based event response method according to an embodiment of the present disclosure;
FIG. 5 is a schematic structural diagram of a graph-based event response device according to an embodiment of the present disclosure;
fig. 6 is a schematic structural diagram of an electronic device according to an embodiment of the present disclosure.
Detailed Description
Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. While certain embodiments of the present disclosure are shown in the drawings, it is to be understood that the present disclosure may be embodied in various forms and should not be construed as limited to the embodiments set forth herein, but rather are provided for a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and the embodiments of the disclosure are for illustration purposes only and are not intended to limit the scope of the disclosure.
It should be understood that the various steps recited in the method embodiments of the present disclosure may be performed in a different order, and/or performed in parallel. Moreover, method embodiments may include additional steps and/or omit performing the illustrated steps. The scope of the present disclosure is not limited in this respect.
The term "include" and variations thereof as used herein are open-ended, i.e., "including but not limited to". The term "based on" is "based, at least in part, on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one additional embodiment"; the term "some embodiments" means "at least some embodiments". Relevant definitions for other terms will be given in the following description.
It should be noted that the terms "first", "second", and the like in the present disclosure are only used for distinguishing different devices, modules or units, and are not used for limiting the order or interdependence relationship of the functions performed by the devices, modules or units.
It is noted that references to "a", "an", and "the" modifications in this disclosure are intended to be illustrative rather than limiting, and that those skilled in the art will recognize that "one or more" may be used unless the context clearly dictates otherwise.
The names of messages or information exchanged between devices in the embodiments of the present disclosure are for illustrative purposes only, and are not intended to limit the scope of the messages or information.
The event response method based on graphics provided by the embodiment of the disclosure can be applied to a scene of interactive event response processing through Scalable Vector Graphics (SVG). The method may be performed by a graphics-based event response means, which may be implemented in software and/or hardware, which may be integrated in an electronic device having a display function. Among them, the electronic devices may include, but are not limited to, mobile terminals such as smart phones, notebook computers, Personal Digital Assistants (PDAs), Tablet PCs, in-vehicle terminals (e.g., car navigation terminals), wearable devices, and the like, and fixed terminals such as Digital televisions, desktop computers, smart home devices, and the like.
Fig. 1 shows a flowchart of a graph-based event response method according to an embodiment of the present disclosure. As shown in fig. 1, the graph-based event response method may include the steps of:
and S110, rendering and displaying the scalable vector graphics, wherein the scalable vector graphics are bound with the target interaction event and are composed of a plurality of triangles.
Wherein the scalable vector graphics are SVG graphics. The target interactive event is an event that needs to be triggered to be executed through an interactive operation.
Particularly, because the SVG graphics support scripts and programming control, a graphic combination is easily generated in the SVG through a DOM interface function to display data and add an interaction event, so that the electronic device can define the SVG graphics through vector graphics data at least containing information such as graphic shapes and colors and bind a target interaction event for the SVG graphics. Then, the electronic device can draw the SVG graphics according to the vector graphics data and render and display the SVG graphics.
However, the target interactive event is bound on the whole SVG graph, and the response area of the SVG graph to the target interactive event is a circumscribed rectangle defined by the width and height of the SVG graph, so that a blank area except the graph is contained in the response area, thereby causing that the interactive trigger of the user to the blank area can also respond to the target interactive event, and reducing the event response precision. Therefore, in the present disclosure, when drawing an SVG graphic, a vector graphic included in the vector graphic data is converted into a graphic composed of triangles, and the SVG graphic is drawn, rendered, and displayed in units of triangles. Therefore, under the condition of not changing the vectorization characteristic of the vector graphics, the processing of the whole SVG graphics is reduced to the processing of each triangle, for example, the response area of the target interaction event is reduced to each triangle forming the SVG graphics from the external rectangle of the SVG graphics, so that the triggering of the target interaction event can be detected through the triangle in the following process, the problem that the event response is caused by triggering the blank area contained in the external rectangle of the SVG graphics is avoided, and the response precision of the SVG graphics to the target interaction event is improved.
In some embodiments, S110 comprises: acquiring vector graphics data, triangulating the vector graphics data, and generating triangle vertex data and an initial graphics color corresponding to each triangle vertex data; and drawing and rendering the graph by using a drawing rendering engine based on the triangle vertex data and the initial graph color, and generating and displaying a scalable vector graph.
Wherein the initial graphic color is a color of a vector graphic defined in the vector graphic data. The drawing and rendering engine is a rendering engine capable of drawing and rendering vector graphics in units of triangles. In the disclosed embodiment, the drawing rendering engine may be a Web Graphics Library (WebGL).
Specifically, the electronic device first parses the vector graphics data to obtain at least the graphics contained therein and the initial graphics color. Then, the graph is triangulated, that is, the graph is decomposed into a plurality of triangles, and the coordinates of each vertex of the triangles are obtained from the coordinates of the graph as triangle vertex data. Meanwhile, the initial figure color may be set to the figure color of each triangle. And then, the electronic equipment can call a drawing rendering engine, draw the scalable vector graphics in the color buffer according to the triangle vertex data and the corresponding initial graphics color, and display the scalable vector graphics.
In some embodiments, the triangulating the vector graphics data, generating triangle vertex data, comprises: converting the vector graphics data into a target information body in a universal data format; discretizing the graph contained in the vector graphics data based on the target information body to generate dot data corresponding to the vector graphics data; and performing triangulation processing on the point data to generate triangular vertex data.
Specifically, in order to more conveniently parse the vector graphics data, the electronic device may convert the vector graphics data into a target information body in a generic data format, for example, may convert the vector graphics data into a target information body in a JS Object Notation (JSON) data format. Then, the vector graphics in the target information volume are read, and the curves constituting the vector graphics are discretized. Because the graphics types drawn by the SVG are limited (such as line segments, rectangles, circles, Bezier curves and the like), the curves can be discretized into one point according to different graphics types to obtain point-like data. Thereafter, a triangle is constructed from these point data, and the generated triangle vertex data is determined from the point data constituting the triangle.
And under the condition that the drawing rendering engine is WebGL, the electronic equipment further needs to process the triangle vertex data according to the size of canvas which can be set by WebGL. For example, when WebGL requires that the input data is in the range of [0,1], the triangle vertex data may be normalized to convert each triangle vertex data into a corresponding value between [0,1] to fit the canvas size of WebGL.
In some embodiments, when the above-mentioned triangularization processing is performed on the dot-shaped data to generate triangle vertex data, the following processing may be performed for each two adjacent dot-shaped data in the same graphics path: generating linear data based on each linear data, and generating a rectangle corresponding to each linear data based on the line width corresponding to the linear data; the rectangle is decomposed into two triangles and triangle vertex data is determined based on the vertex data of the rectangle.
The graphics path refers to a graphics drawing path in the SVG graphics, and is used for dividing each sub-graphic in the SVG graphics.
Specifically, referring to fig. 2, the electronic device arbitrarily takes the adjacent dot data P1 and P2 from the same graphic path, and acquires the line width L between the two dot data. Then, connecting two dot data constitutes linear data P1-P2. Then, the line data P1 to P2 are expanded to both sides by the line width L, respectively, to generate the rectangle 200. Then, the coordinates of the four vertices of the rectangle 200 are calculated from the coordinates and line width L of the dot data P1 and P2. The rectangle 200 is then broken down into two triangles filled with horizontal and vertical lines, respectively, in fig. 2. The vertex coordinates of the rectangle 200 are determined as vertex data of two triangles, respectively.
For the case of an overlapping area between triangles constructed from two adjacent line data, see fig. 3. As shown in FIG. 3, the overlapping area of the two triangles is divided according to the intersection connecting line Q1-Q2 to form a quadrangle Q1Q2Q4Q3 and a quadrangle Q1Q2Q5Q 6. Then, according to a triangle construction method such as an ear-cut algorithm, the quadrangle Q1Q2Q4Q3 and the quadrangle Q1Q2Q5Q6 are respectively split into corresponding triangles, and a triangle Q1Q2Q4, a triangle Q1Q4Q3, a triangle Q1Q2Q5 and a triangle Q1Q5Q6 are obtained. Then, the vertex data of each triangle in the triangles can be calculated according to the point data.
By adopting the scheme for splitting the triangle according to the embodiments, the determination speed of triangle vertex data can be increased by adopting a simpler triangle splitting method according to the characteristic that the graphic type of the SVG graphic is limited, so that the drawing speed of the SVG graphic can be increased.
And S120, in response to the trigger operation of the scalable vector graphics, determining a trigger position.
Specifically, the electronic device monitors a trigger operation of the user. And if the triggering operation of the SVG graph by the user is monitored, determining the triggering position of the triggering operation on the screen.
And S130, if at least one triangle in the scalable vector graphics is determined to be triggered based on the trigger position, executing a target interaction event.
Specifically, the electronic device judges whether the triggering operation of the user triggers any triangle in the SVG graph according to the triggering position. If any triangle is triggered, which indicates that the trigger operation of the user does not hit the SVG graph, the electronic device does not need to perform response processing of the target interaction event. If at least one triangle is triggered, the SVG graphics hit by the trigger operation of the user is indicated, and the electronic device can respond to the trigger operation of the user and execute the target interaction event bound by the SVG graphics.
In some embodiments, determining that at least one triangle in the scalable vector graphics is triggered based on the trigger position in S130 comprises: determining whether the extension ray corresponding to the trigger position intersects any triangle in the scalable vector graphics by utilizing a ray projection algorithm based on the trigger position; if so, it is determined that at least one triangle in the scalable vector graphics is triggered.
Specifically, in this embodiment, a ray projection algorithm may be used to determine whether the triggering operation of the user triggers any triangle in the SVG graph. Namely: the electronic equipment projects an extension ray from the triggering position to the direction opposite to the direction of the user, and judges whether the extension ray intersects any triangle. If the SVG graphics are not crossed, the SVG graphics are not triggered; and if the two are intersected, determining that the SVG graph is hit by the trigger position.
The event response method based on the graph provided by the embodiment of the disclosure can render and display the scalable vector graph which is bound with the target interaction event and is formed by a plurality of triangles; and is capable of determining a trigger position in response to a trigger operation on the scalable vector graphics; and in the event that it is determined based on the trigger position that at least one triangle in the scalable vector graphics is triggered, performing a target interaction event; the scalable vector graphics are drawn by finer triangles, whether the scalable vector graphics are triggered or not is detected through the triangles, and then the response of the target interactive event is carried out, so that the problem that the event is responded when a blank area of the scalable vector graphics is triggered is solved, and the response precision of the interactive event based on the SVG graphics is improved.
Fig. 4 is a flowchart of another graph-based event response method provided by the embodiments of the present disclosure. The graph-based event response method optimizes "determining at least one triangle in a scalable vector graph is triggered based on a trigger position". Referring to fig. 4, the graph-based event response method specifically includes the following steps:
and S410, rendering and displaying the scalable vector graphics.
And S420, in response to the trigger operation of the scalable vector graphics, determining a trigger position.
And S430, determining a texture position corresponding to the trigger operation in the target texture based on the trigger position, wherein the texture graph in the target texture corresponds to the scalable vector graph, the graph color of the texture graph is a first preset color, and the background color of the target texture is a second preset color.
Wherein the target texture is a texture object generated in advance from the SVG graphics, and contains at least a background color of the texture, the texture graphics, and a color of the graphics. The first preset color is a preset color, which may be, for example, white as a graphic color. The second preset color is another preset color different from the first preset color, and may be black, for example, as a background color of the texture. The texture location is a location in the target texture.
Specifically, in order to quickly and efficiently determine whether the trigger position hits any triangle in the SVG graphics, i.e., the target texture, is backed up in advance in this embodiment, and a specific color is set for the backed-up SVG graphics.
In specific implementation, the electronic device may generate the target texture according to the vector graphics data, or the electronic device stores the target texture after the target texture is generated for the first time, and reads the target texture from the storage location each time the SVG graphics needs to be processed. And then, the electronic equipment determines the position mapping proportion according to the size relation of the canvas between the SVG graph and the target texture. And then, the electronic equipment maps the trigger position to the target texture according to the position mapping proportion to obtain the texture position.
In some embodiments, the size of the canvas of the SVG graphics is consistent with the size of the canvas of the target texture, and the position mapping ratio at this time is 1, i.e., there is correspondence between the position in the target texture and the position in the SVG graphics. Therefore, the position error caused by the calculation between the trigger position and the position mapping proportion which is not 1 can be avoided, the determination precision of the texture position can be improved, and the determination speed of the texture position can be improved.
In some embodiments, the target texture is generated by: determining the background color of the frame buffer area as a second preset color by using a drawing rendering engine; and drawing the scalable vector graphics in a frame buffer based on the triangle vertex data and the first preset color corresponding to the vector graphics data by using a drawing and rendering engine, and exporting the frame buffer as the target texture.
Specifically, the electronic device invokes the draw rendering engine to set a frame buffer. If a frame buffer already exists, the color of the frame buffer is cleared, and then a second preset color is set for the frame buffer. If no frame buffer exists, the drawing rendering engine creates a frame buffer and sets a second preset color for the frame buffer. And then, the electronic equipment calls a drawing rendering engine again, and draws the SVG graph with the graph color as the first preset color in the frame buffer area according to the triangle vertex data corresponding to the vector graph data and the first preset color. Finally, the electronic device exports the frame buffer as the target texture. Therefore, the target texture which is not required to be displayed and has the background color of the second preset color and the graphic color of the first preset color can be obtained, and the texture graphics in the target texture are consistent with the SVG graphics.
S440, if the texture color at the texture position is determined to be the first preset color, determining that at least one triangle in the scalable vector graphics is triggered.
Specifically, because the texture graphics of the target texture and the SVG graphics are consistent and the texture position and the trigger position have a proportional mapping relationship, the determination result of whether the texture position hits the texture graphics in the target texture can be used as the determination result of whether any triangle in the SVG graphics is hit. Based on the above, after the texture position is determined, the electronic device obtains the color corresponding to the texture position from the target texture. If the obtained color is a first predetermined color, indicating that the texture graphics belong to at the texture location, then it may be determined that at least one triangle in the SVG is triggered. If the obtained color is a second preset color, which indicates that the texture position belongs to the background area, it can be determined that any triangle in the SVG graph is triggered.
And S450, executing the target interaction event.
The event response method based on the graph provided by the embodiment of the disclosure determines the texture position corresponding to the trigger operation in the target texture based on the trigger position; the texture graphics in the target texture correspond to the scalable vector graphics, the graphic color of the texture graphics is a first preset color, and the background color of the target texture is a second preset color; determining that at least one triangle in the scalable vector graphics is triggered if the texture color at the texture position is determined to be a first preset color; the method and the device realize the judgment of whether any triangle in the SVG graph is triggered or not by using the texture position and the texture color in the backup target texture of the SVG graph, improve the triggering judgment efficiency of the SVG graph, and further improve the event triggering precision of the target interaction event of the SVG graph.
The following is an embodiment of the graph-based event response device provided in the embodiments of the present disclosure, which belongs to the same inventive concept as the graph-based event response method of the above embodiments, and reference may be made to the embodiment of the graph-based event response method for details that are not described in detail in the embodiment of the graph-based event response device.
Fig. 5 is a schematic structural diagram illustrating a graph-based event response device according to an embodiment of the present disclosure. As shown in fig. 5, the graphic-based event response apparatus 500 may include:
a vector graphics display module 510 for rendering and displaying scalable vector graphics; the scalable vector graphics bind the target interactive event, and the scalable vector graphics are composed of a plurality of triangles;
a trigger position determination module 520 for determining a trigger position in response to a trigger operation on the scalable vector graphics;
an event execution module 530 for executing the target interaction event if it is determined that at least one triangle in the scalable vector graphics is triggered based on the trigger position.
The event response device based on the graph provided by the embodiment of the disclosure can render and display the scalable vector graph which is bound with the target interaction event and is formed by a plurality of triangles; and is capable of determining a trigger position in response to a trigger operation on the scalable vector graphics; and in the event that it is determined based on the trigger position that at least one triangle in the scalable vector graphics is triggered, executing a target interaction event; the scalable vector graphics are drawn by finer triangles, whether the scalable vector graphics are triggered or not is detected through the triangles, and then the response of the target interactive event is carried out, so that the problem that the event is responded when a blank area of the scalable vector graphics is triggered is solved, and the response precision of the interactive event based on the SVG graphics is improved.
In some embodiments, the event execution module 530 includes:
a trigger judgment sub-module for:
determining a texture position corresponding to the trigger operation in the target texture based on the trigger position; the texture graphics in the target texture correspond to the scalable vector graphics, the graphic color of the texture graphics is a first preset color, and the background color of the target texture is a second preset color;
determining that at least one triangle in the scalable vector graphics is triggered if the texture color at the texture position is determined to be a first preset color;
and the event execution sub-module is used for executing the target interaction event under the condition that at least one triangle in the scalable vector graphics is determined to be triggered.
In some embodiments, the graphics-based event response apparatus 500 further comprises a target texture generation module for generating the target texture by:
determining the background color of the frame buffer area as a second preset color by using a drawing rendering engine;
and drawing the scalable vector graphics in a frame buffer based on the triangle vertex data and the first preset color corresponding to the vector graphics data by using a drawing and rendering engine, and exporting the frame buffer as the target texture.
In some embodiments, the trigger determination sub-module is further configured to:
determining whether the extension ray corresponding to the trigger position intersects any triangle in the scalable vector graphics by utilizing a ray projection algorithm based on the trigger position;
if so, it is determined that at least one triangle in the scalable vector graphics is triggered.
In some embodiments, vector graphics display module 510 includes:
the triangle vertex data generating submodule is used for acquiring vector graphics data, carrying out triangularization processing on the vector graphics data and generating triangle vertex data and an initial graphics color corresponding to each triangle vertex data;
and the vector graphic display submodule is used for drawing and rendering graphics by using a drawing rendering engine based on the triangle vertex data and the initial graphic color, and generating and displaying a scalable vector graphic.
Further, the triangle vertex data generating submodule is specifically configured to:
converting the vector graphics data into a target information body in a universal data format;
discretizing the graph contained in the vector graphics data based on the target information body to generate dot data corresponding to the vector graphics data;
and performing triangulation processing on the point data to generate triangular vertex data.
Further, the triangle vertex data generating submodule is specifically configured to:
for each two adjacent dot-like data in the same graphics path:
generating linear data based on each linear data, and generating a rectangle corresponding to each linear data based on the line width corresponding to the linear data;
the rectangle is decomposed into two triangles and triangle vertex data is determined based on the vertex data of the rectangle.
In some embodiments, the drawing rendering engine is a web graphics library.
The graph-based event response device provided by the embodiment of the disclosure can execute the graph-based event response method provided by any embodiment of the disclosure, and has corresponding functional modules and beneficial effects of the execution method.
It should be noted that, in the embodiment of the graph-based event response device, the modules and the sub-modules included in the embodiment are only divided according to functional logic, but are not limited to the above division as long as the corresponding functions can be implemented; in addition, the specific names of the functional modules/sub-modules are only for convenience of distinguishing from each other, and are not used for limiting the protection scope of the present disclosure.
Embodiments of the present disclosure also provide an electronic device that may include a processor and a memory that may be used to store executable instructions. The processor may be configured to read the executable instructions from the memory and execute the executable instructions to implement the graph-based event response method in the above embodiments.
Fig. 6 shows a schematic structural diagram of an electronic device provided in an embodiment of the present disclosure.
As shown in fig. 6, the electronic device 600 may include a processing means (e.g., a central processing unit, a graphics processor, etc.) 601 that may perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)602 or a program loaded from a storage means 608 into a Random Access Memory (RAM) 603. In the RAM 603, various programs and data necessary for the operation of the information processing apparatus 600 are also stored. The processing device 601, the ROM 602, and the RAM 603 are connected to each other via a bus 604. An input/output interface (I/O interface) 605 is also connected to bus 604.
Generally, the following devices may be connected to the I/O interface 605: input devices 606 including, for example, a touch screen, touch pad, keyboard, mouse, camera, microphone, accelerometer, gyroscope, etc.; output devices 607 including, for example, a Liquid Crystal Display (LCD), a speaker, a vibrator, and the like; storage 608 including, for example, tape, hard disk, etc.; and a communication device 609. The communication means 609 may allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data.
It should be noted that the electronic device 600 shown in fig. 6 is only an example, and should not bring any limitation to the functions and the application scope of the embodiments of the present disclosure. That is, while fig. 6 illustrates an electronic device 600 having various means, it is to be understood that not all illustrated means are required to be implemented or provided. More or fewer devices may alternatively be implemented or provided.
In particular, the processes described above with reference to the flow diagrams may be implemented as computer software programs, according to embodiments of the present disclosure. For example, embodiments of the present disclosure include a computer program product comprising a computer program carried on a non-transitory computer readable medium, the computer program containing program code for performing the method illustrated by the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network via the communication means 609, or installed from the storage means 608, or installed from the ROM 602. The computer program, when executed by the processing device 601, performs the above-described functions defined in the graph-based event response method of any of the embodiments of the present disclosure.
Embodiments of the present disclosure also provide a computer-readable storage medium storing a computer program, which, when executed by a processor, causes the processor to implement a graph-based event response method in any of the embodiments of the present disclosure.
It should be noted that the computer readable medium in the present disclosure can be a computer readable signal medium or a computer readable storage medium or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer readable signal medium may comprise a propagated data signal with computer readable program code embodied therein, either in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to: electrical wires, optical cables, RF (radio frequency), etc., or any suitable combination of the foregoing.
In some embodiments, the clients, servers may communicate using any currently known or future developed network protocol, such as HTTP, and may be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), the Internet (e.g., the Internet), and peer-to-peer networks (e.g., ad hoc peer-to-peer networks), as well as any currently known or future developed network.
The computer readable medium may be embodied in the electronic device; or may be separate and not incorporated into the electronic device.
The computer readable medium carries one or more programs which, when executed by the electronic device, cause the electronic device to perform the steps of the graph-based event response method described in any embodiment of the present disclosure.
In embodiments of the present disclosure, computer program code for carrying out operations of the present disclosure may be written in any combination of one or more programming languages, including but not limited to an object oriented programming language such as Java, Smalltalk, C + +, and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The program code may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the latter scenario, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider).
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of apparatus, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The functions described herein above may be performed, at least in part, by one or more hardware logic components. For example, without limitation, exemplary types of hardware logic components that may be used include: field Programmable Gate Arrays (FPGAs), Application Specific Integrated Circuits (ASICs), Application Specific Standard Products (ASSPs), systems on a chip (SOCs), Complex Programmable Logic Devices (CPLDs), and the like.
In the context of this disclosure, a machine-readable medium may be a tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. The machine-readable medium may be a machine-readable signal medium or a machine-readable storage medium. A machine-readable medium may include, but is not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any suitable combination of the foregoing. More specific examples of a machine-readable storage medium would include an electrical connection based on one or more wires, a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing.
The foregoing description is only exemplary of the preferred embodiments of the disclosure and is illustrative of the principles of the technology employed. It will be appreciated by those skilled in the art that the scope of the disclosure herein is not limited to the particular combination of features described above, but also encompasses other combinations of features described above or equivalents thereof without departing from the spirit of the disclosure. For example, the above features and (but not limited to) the features disclosed in this disclosure having similar functions are replaced with each other to form the technical solution.
Further, while operations are depicted in a particular order, this should not be understood as requiring that such operations be performed in the particular order shown or in sequential order. Under certain circumstances, multitasking and parallel processing may be advantageous. Likewise, while several specific implementation details are included in the above discussion, these should not be construed as limitations on the scope of the disclosure. Certain features that are described in the context of separate embodiments can also be implemented in combination in a single embodiment. Conversely, various features that are described in the context of a single embodiment can also be implemented in multiple embodiments separately or in any suitable subcombination.
Although the subject matter has been described in language specific to structural features and/or methodological acts, it is to be understood that the subject matter defined in the appended claims is not necessarily limited to the specific features or acts described above. Rather, the specific features and acts described above are disclosed as example forms of implementing the claims.
Claims (11)
1. A graph-based event response method, comprising:
rendering and displaying scalable vector graphics; wherein the scalable vector graphics bind target interactivity events and the scalable vector graphics are composed of a plurality of triangles;
determining a trigger position in response to a trigger operation on the scalable vector graphics;
executing the target interaction event if it is determined that at least one of the triangles in the scalable vector graphics is triggered based on the trigger position.
2. The method of claim 1, wherein said determining that at least one of the triangles in the scalable vector graphics is triggered based on the trigger position comprises:
determining a texture position corresponding to the trigger operation in the target texture based on the trigger position; the texture graphics in the target texture correspond to the scalable vector graphics, the graphics color of the texture graphics is a first preset color, and the background color of the target texture is a second preset color;
determining that at least one of the triangles in the scalable vector graphics is triggered if the texture color at the texture location is determined to be the first predetermined color.
3. The method of claim 2, wherein the target texture is generated by:
determining the background color of the frame buffer area as the second preset color by utilizing a drawing rendering engine;
and drawing the scalable vector graphics in the frame buffer based on the triangle vertex data corresponding to the vector graphics data and the first preset color by using the drawing and rendering engine, and exporting the frame buffer as the target texture.
4. The method of claim 1, wherein said determining that at least one of the triangles in the scalable vector graphics is triggered based on the trigger position comprises:
determining whether an extended ray corresponding to the trigger position intersects any of the triangles in the scalable vector graphics by using a ray-casting algorithm based on the trigger position;
if so, determining that at least one of the triangles in the scalable vector graphics is triggered.
5. The method of claim 1, wherein the rendering and displaying the scalable vector graphics comprises:
acquiring vector graphics data, triangulating the vector graphics data, and generating triangle vertex data and an initial graphics color corresponding to each triangle vertex data;
and drawing and rendering graphics by using a drawing and rendering engine based on the triangle vertex data and the initial graphics color, and generating and displaying the scalable vector graphics.
6. The method of claim 5 wherein triangulating the vector graphics data to generate triangle vertex data comprises:
converting the vector graphics data into a target information body in a universal data format;
discretizing the graph contained in the vector graphics data based on the target information body to generate dot data corresponding to the vector graphics data;
and performing triangulation processing on the point data to generate triangular vertex data.
7. The method of claim 6, wherein triangulating the point-like data, generating the triangle vertex data comprises:
for each two adjacent said dotted data in the same graphics path:
generating linear data based on each point data, and generating a rectangle corresponding to each point data based on the line width corresponding to the linear data;
and decomposing the rectangle into two triangles, and determining the triangle vertex data based on the vertex data of the rectangle.
8. The method of claim 3 or 5, wherein the drawing rendering engine is a web graphics library.
9. A graph-based event response device, comprising:
a vector graphics display module for rendering and displaying scalable vector graphics; wherein the scalable vector graphics bind target interactivity events and the scalable vector graphics are composed of a plurality of triangles;
a trigger position determination module for determining a trigger position in response to a trigger operation on the scalable vector graphics;
an event execution module to execute the target interaction event if it is determined based on the trigger position that at least one of the triangles in the scalable vector graphics is triggered.
10. An electronic device, comprising:
a processor;
a memory for storing executable instructions;
wherein the processor is configured to read the executable instructions from the memory and execute the executable instructions to implement the graph-based event response method of any of claims 1-8.
11. A computer-readable storage medium, characterized in that the storage medium stores a computer program which, when executed by a processor, causes the processor to implement the graph-based event response method of any of the preceding claims 1-8.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210573583.1A CN114968041B (en) | 2022-05-24 | 2022-05-24 | Event response method, device, equipment and medium based on graph |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210573583.1A CN114968041B (en) | 2022-05-24 | 2022-05-24 | Event response method, device, equipment and medium based on graph |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN114968041A true CN114968041A (en) | 2022-08-30 |
| CN114968041B CN114968041B (en) | 2024-08-06 |
Family
ID=82956203
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210573583.1A Active CN114968041B (en) | 2022-05-24 | 2022-05-24 | Event response method, device, equipment and medium based on graph |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114968041B (en) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116644701A (en) * | 2023-05-09 | 2023-08-25 | 三峡高科信息技术有限责任公司 | SVG-based configurable circuit diagram generation method and system |
Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101211462A (en) * | 2007-12-21 | 2008-07-02 | 炬力集成电路设计有限公司 | Vector graph acceleration method and multimedia player |
| CA2714228A1 (en) * | 2010-09-16 | 2010-11-23 | Ibm Canada Limited - Ibm Canada Limitee | Complex input to image transformation for distribution |
| CN103631474A (en) * | 2012-08-28 | 2014-03-12 | 鸿富锦精密工业（深圳）有限公司 | System and method for controlling graph moving |
| CN104851133A (en) * | 2015-05-25 | 2015-08-19 | 厦门大学 | Image self-adaptive grid generation variational method |
| CN106371780A (en) * | 2015-07-22 | 2017-02-01 | 龙芯中科技术有限公司 | Vector graph processing method and apparatus |
| CN107292339A (en) * | 2017-06-16 | 2017-10-24 | 重庆大学 | The unmanned plane low altitude remote sensing image high score Geomorphological Classification method of feature based fusion |
| CN107610236A (en) * | 2017-08-21 | 2018-01-19 | 武汉秀宝软件有限公司 | A kind of exchange method and system based on figure identification |
| CN109343924A (en) * | 2018-09-20 | 2019-02-15 | 北京锐安科技有限公司 | Activiti flow chart redraws method, apparatus, computer equipment and storage medium processed |
| CN111199512A (en) * | 2019-12-24 | 2020-05-26 | 远光软件股份有限公司 | SVG vector graphics adjusting method, SVG vector graphics adjusting device, storage medium and terminal |
| CN111260750A (en) * | 2020-01-08 | 2020-06-09 | 广东三维家信息科技有限公司 | Method and device for processing openFL drawn vector graphics and electronic equipment |
| CN113742432A (en) * | 2021-08-20 | 2021-12-03 | 广州市易工品科技有限公司 | Editable ER graph generation method and device |
-
2022
- 2022-05-24 CN CN202210573583.1A patent/CN114968041B/en active Active
Patent Citations (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101211462A (en) * | 2007-12-21 | 2008-07-02 | 炬力集成电路设计有限公司 | Vector graph acceleration method and multimedia player |
| CA2714228A1 (en) * | 2010-09-16 | 2010-11-23 | Ibm Canada Limited - Ibm Canada Limitee | Complex input to image transformation for distribution |
| CN103631474A (en) * | 2012-08-28 | 2014-03-12 | 鸿富锦精密工业（深圳）有限公司 | System and method for controlling graph moving |
| CN104851133A (en) * | 2015-05-25 | 2015-08-19 | 厦门大学 | Image self-adaptive grid generation variational method |
| CN106371780A (en) * | 2015-07-22 | 2017-02-01 | 龙芯中科技术有限公司 | Vector graph processing method and apparatus |
| CN107292339A (en) * | 2017-06-16 | 2017-10-24 | 重庆大学 | The unmanned plane low altitude remote sensing image high score Geomorphological Classification method of feature based fusion |
| CN107610236A (en) * | 2017-08-21 | 2018-01-19 | 武汉秀宝软件有限公司 | A kind of exchange method and system based on figure identification |
| CN109343924A (en) * | 2018-09-20 | 2019-02-15 | 北京锐安科技有限公司 | Activiti flow chart redraws method, apparatus, computer equipment and storage medium processed |
| CN111199512A (en) * | 2019-12-24 | 2020-05-26 | 远光软件股份有限公司 | SVG vector graphics adjusting method, SVG vector graphics adjusting device, storage medium and terminal |
| CN111260750A (en) * | 2020-01-08 | 2020-06-09 | 广东三维家信息科技有限公司 | Method and device for processing openFL drawn vector graphics and electronic equipment |
| CN113742432A (en) * | 2021-08-20 | 2021-12-03 | 广州市易工品科技有限公司 | Editable ER graph generation method and device |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN116644701A (en) * | 2023-05-09 | 2023-08-25 | 三峡高科信息技术有限责任公司 | SVG-based configurable circuit diagram generation method and system |
| CN116644701B (en) * | 2023-05-09 | 2024-01-16 | 三峡高科信息技术有限责任公司 | SVG-based configurable circuit diagram generation method and system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN114968041B (en) | 2024-08-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111580924B (en) | Page display method and device, electronic equipment and readable storage medium | |
| CN113377366B (en) | Control editing method, device, equipment, readable storage medium and product | |
| CN111291244B (en) | House source information display method, device, terminal and storage medium | |
| CN110807161A (en) | Page framework rendering method, device, equipment and medium | |
| WO2023193642A1 (en) | Video processing method and apparatus, device and storage medium | |
| CN111796825B (en) | Bullet screen drawing method, bullet screen drawing device, bullet screen drawing equipment and storage medium | |
| CN114742931A (en) | Method and device for rendering image, electronic equipment and storage medium | |
| CN114968041B (en) | Event response method, device, equipment and medium based on graph | |
| CN113986426B (en) | Image detection method and device, readable medium and electronic equipment | |
| US20230298265A1 (en) | Dynamic fluid effect processing method and apparatus, and electronic device and readable medium | |
| CN110489023A (en) | Implementation method, device, equipment, medium and the system of windows display | |
| WO2023231926A1 (en) | Image processing method and apparatus, device, and storage medium | |
| CN113506356B (en) | Method and device for drawing area map, readable medium and electronic equipment | |
| US20240153128A1 (en) | Method of detecting collision of objects, device, and storage medium | |
| CN116775174A (en) | Processing method, device, equipment and medium based on user interface frame | |
| CN112116719B (en) | Method and device for determining object in three-dimensional scene, storage medium and electronic equipment | |
| CN112395826B (en) | Text special effect processing method and device | |
| CN114911564B (en) | Page movement processing method, device, equipment and storage medium | |
| CN113835792B (en) | Method and device for drawing page element | |
| CN116309940B (en) | Map information display method, equipment and medium based on animation popup window assembly | |
| CN114510309B (en) | Animation effect setting method, device, equipment and medium | |
| CN111563214B (en) | Reference line processing method and device | |
| CN111753230B (en) | Reference line processing method and device | |
| US20240281919A1 (en) | Effect processing method and device | |
| CN117251235A (en) | Data attribute display method, device, apparatus, storage medium and program product |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |