CN114255278A - Graph click detection method and device, computer equipment and storage medium - Google Patents
Graph click detection method and device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN114255278A CN114255278A CN202210183932.9A CN202210183932A CN114255278A CN 114255278 A CN114255278 A CN 114255278A CN 202210183932 A CN202210183932 A CN 202210183932A CN 114255278 A CN114255278 A CN 114255278A
- Authority
- CN
- China
- Prior art keywords
- color
- graphic object
- target
- page
- detected
- 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.)
- Pending
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T7/00—Image analysis
- G06T7/70—Determining position or orientation of objects or cameras
- G06T7/73—Determining position or orientation of objects or cameras using feature-based methods
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/24—Querying
- G06F16/245—Query processing
- G06F16/2455—Query execution
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/20—Information retrieval; Database structures therefor; File system structures therefor of structured data, e.g. relational data
- G06F16/28—Databases characterised by their database models, e.g. relational or object models
- G06F16/284—Relational databases
-
- 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/04842—Selection of displayed objects or displayed text elements
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T7/00—Image analysis
- G06T7/90—Determination of colour characteristics
Abstract
The application relates to a graph click detection method, a graph click detection device, computer equipment, a storage medium and a computer program product, which are applied to the technical field of computers and used for improving the graph click detection efficiency. The method comprises the following steps: responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected; acquiring a target color characteristic of the click position in a target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object; and inquiring the incidence relation between the graphic object and the color characteristic in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color characteristic, and using the target graphic object as the graphic object corresponding to the click operation.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and an apparatus for detecting a click on a graphic, a computer device, a storage medium, and a computer program product.
Background
Canvas graphics technology is often applied to terminal devices such as web pages Html, android devices, iOS devices, and the like, and is used for drawing graphics, making photos, creating animations, processing or rendering real-time videos, and the like. Canvas rendered graphical objects typically require response to user behavior.
In the traditional technology, when the graph click detection is carried out, a detection method based on mathematical polygons is generally adopted, and each graph object in a page is detected in sequence; however, this method needs to detect all the graphic objects in the page, which takes much time, resulting in low efficiency of detecting the graphic click.
Disclosure of Invention
In view of the foregoing, it is desirable to provide a method, an apparatus, a computer device, a computer readable storage medium, and a computer program product for detecting a graphic click, which can improve efficiency of detecting a graphic click.
In a first aspect, the present application provides a method for detecting a graphical click. The method comprises the following steps:
responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected;
acquiring a target color characteristic of the click position in a target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object;
and inquiring the incidence relation between the graphic object and the color characteristic in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color characteristic, and using the target graphic object as the graphic object corresponding to the click operation.
In one embodiment, before determining, in response to a click operation on a page to be detected, a click position in a target presentation layer in a canvas of the page to be detected, the method further includes:
constructing a corresponding display graphic object in an initial display layer in the canvas according to the attribute information of the graphic object in the incidence relation library to obtain the target display layer;
constructing a corresponding detection graphic object in an initial detection layer in the canvas according to the graphic object in the incidence relation library and the color characteristic corresponding to the graphic object;
and according to the color characteristics corresponding to the detection graphic objects, performing color filling on the detection graphic objects in the initial detection layer to obtain the target detection layer.
In one embodiment, before constructing a corresponding detection graphic object in an initial detection layer in the canvas according to the graphic object in the association relation library and the color feature corresponding to the graphic object, the method further includes:
generating color characteristics of the graphic objects in the page to be detected according to a preset color characteristic format;
constructing the association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object;
and storing the color features, the graphic objects in the page to be detected and the incidence relation to the incidence relation library.
In one embodiment, before constructing the association relationship according to the graphic object in the page to be detected and the color feature of the graphic object, the method further includes:
detecting whether the color characteristics of the graphic object are stored in the association relation library or not;
the constructing the association relationship according to the graphic object in the page to be detected and the color feature of the graphic object comprises:
and under the condition that the color characteristics of the graphic object are not stored in the association relation library, constructing the association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object.
In one embodiment, generating the color feature of the graphic object in the page to be detected according to a preset color feature format includes:
and generating color features different from the color features of the graphic objects stored in the association relation library according to a preset color feature format, wherein the color features are used as the color features of the graphic objects in the page to be detected.
In one embodiment, before constructing a corresponding display graphic object in an initial display layer in the canvas according to the attribute information of the graphic object in the association relation library, and obtaining the target display layer, the method further includes:
generating a display layer memory object and a detection layer memory object of the canvas;
configuring the memory object of the display layer to obtain the initial display layer; the initial display layer is used for mounting to the page to be detected;
and configuring the memory object of the detection layer according to the configuration information of the initial display layer to obtain the initial detection layer.
In one embodiment, obtaining the target color feature of the click position in the target detection layer in the canvas comprises:
acquiring pixel information of the click position in a target detection layer in the canvas;
carrying out color extraction processing on the pixel information to obtain color information of the click position;
filtering the transparency of the color information to obtain processed color information;
and according to the preset color feature format, carrying out format conversion on the processed color information to obtain the target color feature.
In a second aspect, the application further provides a graph click detection device. The device comprises:
the click position module is used for responding to click operation aiming at the page to be detected and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected;
the color characteristic module is used for acquiring the target color characteristic of the click position in the target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object;
and the graphic object module is used for inquiring the association relation between the graphic object and the color feature in the page to be detected to obtain a target graphic object corresponding to the target color feature, and the target graphic object is used as the graphic object corresponding to the clicking operation.
In a third aspect, the present application also provides a computer device. The computer device comprises a memory storing a computer program and a processor implementing the following steps when executing the computer program:
responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected;
acquiring a target color characteristic of the click position in a target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object;
and inquiring the incidence relation between the graphic object and the color characteristic in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color characteristic, and using the target graphic object as the graphic object corresponding to the click operation.
In a fourth aspect, the present application further provides a computer-readable storage medium. The computer-readable storage medium having stored thereon a computer program which, when executed by a processor, performs the steps of:
responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected;
acquiring a target color characteristic of the click position in a target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object;
and inquiring the incidence relation between the graphic object and the color characteristic in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color characteristic, and using the target graphic object as the graphic object corresponding to the click operation.
In a fifth aspect, the present application further provides a computer program product. The computer program product comprising a computer program which when executed by a processor performs the steps of:
responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected;
acquiring a target color characteristic of the click position in a target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object;
and inquiring the incidence relation between the graphic object and the color characteristic in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color characteristic, and using the target graphic object as the graphic object corresponding to the click operation.
According to the graph click detection method, the graph click detection device, the computer equipment, the storage medium and the computer program product, in response to the click operation on the page to be detected, the click position in the target display layer in the canvas of the page to be detected is determined, the target color feature of the click position in the target detection layer in the canvas is obtained, the incidence relation between the graph object and the color feature in the page to be detected in the incidence relation library is inquired, and the target graph object corresponding to the target color feature is obtained and serves as the graph object corresponding to the click operation. By adopting the method, mathematical operation is not needed, and the graphic object corresponding to the click operation can be directly determined according to the incidence relation between the graphic object and the color characteristic through the target detection layer, so that the click detection accuracy in the canvas of a large number of graphic objects is improved, and the click detection efficiency of the graphic objects is also improved.
Drawings
FIG. 1 is a flowchart of an embodiment of a graphical click detection method;
FIG. 2 is a flowchart illustrating the steps of obtaining a target color characteristic of a click location in a target detection layer in a canvas in one embodiment;
FIG. 3 is a flowchart illustrating the steps of establishing an association between a feature color and a graphic object in one embodiment;
FIG. 4 is a flowchart illustrating steps of obtaining a target graphical object corresponding to a target color feature according to one embodiment;
FIG. 5 is a schematic flow chart illustrating steps for obtaining a target presentation layer and a target detection layer in one embodiment;
FIG. 6 is a diagram of a canvas presentation layer and a detection layer in one embodiment;
FIG. 7 is a flowchart illustrating a method for detecting a graphical click in another embodiment;
FIG. 8 is a flowchart illustrating a method for detecting a graphical click in another embodiment;
FIG. 9 is a block diagram showing the structure of a graphic click detection apparatus according to an embodiment;
FIG. 10 is a diagram showing an internal structure of a computer device according to an embodiment.
Detailed Description
In order to make the objects, technical solutions and advantages of the present application more apparent, the present application is described in further detail below with reference to the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative of the present application and are not intended to limit the present application.
In an embodiment, as shown in fig. 1, a method for detecting a graphical click is provided, and this embodiment is illustrated by applying the method to a terminal, it is to be understood that the method may also be applied to a server, and may also be applied to a system including the terminal and the server, and is implemented by interaction between the terminal and the server. In this embodiment, the method includes the steps of:
step S101, responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected.
The click operation may be a click operation by a mouse, a click operation by a touch screen, or the like, and is not particularly limited herein.
The canvas layer comprises a target display layer and a target detection layer; the target display layer in the canvas is used for displaying one or more graphic objects; the Canvas comprises a Canvas.
The clicking position refers to information capable of determining the position of clicking operation in a target display layer and target detection of the canvas; such as coordinate information.
Specifically, event monitoring processing is performed on a target display layer of the canvas in advance, for example, a click event is added, a mouse event monitoring function is added, an event monitoring instruction is set, and the like, so that a graphic object drawn by the canvas can respond to a user behavior, for example, mouse click operation; when the clicking operation aiming at the page to be detected is monitored, the terminal responds to the clicking operation aiming at the page to be detected, and obtains the clicking position of the target display layer in the canvas of the page to be detected according to the attribute information returned by the clicking operation according to the event instruction of the page to be detected.
In practical application, registering an event on a target display layer of a Canvas, and setting a monitoring event; when the mouse click is monitored, the terminal obtains the coordinate information of the mouse click event through point attribute information in the event of JavaScript (JS).
Step S102, acquiring a target color characteristic of a click position in a target detection layer in a canvas; the object detection layer is used for describing the color characteristics of the graphic object.
The target detection layer is stored in the memory and is not displayed on the page to be detected, so that the target detection layer cannot be seen on the page to be detected; it can also be understood that the target detection layer is a canvas layer hidden in the memory, and the layer cannot be seen in the HTML (Hyper Text Markup Language) in the Document Object Model (DOM) structure.
Specifically, according to the click position in the target display layer, pixel information of the click position at a corresponding position in the target detection layer is obtained, color information is extracted from the pixel information, and the color information is converted into target color features.
For example, according to a getImageData instruction provided by Canvas, an RGBA pixel color of 1px at a corresponding position of the coordinate information in the target detection layer is obtained, and the RGBA pixel color of 1px is converted into a color feature in a preset format.
In practical application, as shown in fig. 2, the Canvas presentation layer includes a graphic object 1 and a graphic object X, and the Camvas detection layer includes a graphic object 1 filled with a color corresponding to the color feature 1 and a graphic object X filled with a color corresponding to the color feature X. When a mouse clicks a graphic object 1 in the Canvas display layer, coordinate information (x, y) of the graphic object 1 is obtained, and color characteristics 1 of the position where the coordinate information (x, y) in the Canvas detection layer is located are obtained through a getImageData instruction provided by the Canvas.
Step S103, inquiring the incidence relation between the graphic object and the color characteristic in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color characteristic, and using the target graphic object as the graphic object corresponding to the click operation.
The association relation library is a data storage library which stores relevant information of the color features and relevant information of the graphic objects corresponding to the color features according to a preset association relation. Such as the color feature manager shown in fig. 3.
The association between the graphic object and the color feature is bidirectional, that is, the corresponding color feature can be obtained according to the graphic object, and the corresponding graphic object can be obtained according to the color feature.
Specifically, whether a target color feature exists in an association relation library is inquired; when the target color characteristics exist in the association relation library, indicating that an image object exists in the canvas of the page to be detected and is clicked, further obtaining a target graphic object associated with the target color characteristics, and taking the target graphic object as a graphic object corresponding to the clicking operation; and when the target color characteristics do not exist in the correlation relational library, indicating that no graphic object is clicked in the canvas of the page to be detected, and further, the terminal obtains empty content or prompt information.
For example, as shown in fig. 4, when it is determined that the color feature corresponding to the click operation of the page to be detected is the color feature 1, the color feature 1 is used as an index to query whether the color feature 1 exists in the color feature manager, when the color feature 1 exists in the color feature manager, the color feature 1 is continuously used as the index to query the graphic object associated with the color feature 1, so as to obtain the graphic object 1, which is used as the graphic object corresponding to the click operation of the page to be detected, and the graphic object 1 is returned to the terminal for displaying.
In the graph click detection method, in response to a click operation on a page to be detected, a click position in a target display layer in a canvas of the page to be detected is determined, a target color feature of the click position in the target detection layer in the canvas is obtained, an incidence relation between a graph object and the color feature in the page to be detected in an incidence relation library is inquired, and a target graph object corresponding to the target color feature is obtained and serves as a graph object corresponding to the click operation. By adopting the method, mathematical operation is not needed, and the graphic object corresponding to the click operation can be directly determined according to the incidence relation between the graphic object and the color characteristic through the target detection layer, so that the click detection accuracy in the canvas of a large number of graphic objects is improved, and the click detection efficiency of the graphic objects is also improved.
In one embodiment, before determining a click position in a target presentation layer in a canvas of a page to be detected in response to a click operation on the page to be detected, the method further includes:
constructing a corresponding display graph object in an initial display layer in a canvas according to the attribute information of the graph object in the incidence relation library to obtain a target display layer; constructing a corresponding detection graphic object in an initial detection layer in a canvas according to the graphic object in the incidence relation library and the color characteristic corresponding to the graphic object; and according to the color characteristics corresponding to the detection graphic objects, carrying out color filling on the detection graphic objects in the initial detection layer to obtain the target detection layer.
The attribute information of the graphic object includes the length, width, coordinate point, frame thickness, graphic color, etc. of the graphic object.
Specifically, attribute information of all the graphic objects in the association relation library and color features corresponding to the graphic objects are obtained, for example, through data traversal or sequential extraction and other obtaining manners; sequentially drawing graphs in an initial display layer in the canvas according to the attribute information of all the graph objects, and obtaining a target display layer after all the graphs are drawn; and according to the attribute information of all the graphic objects, sequentially drawing the graphics in the initial detection layer in the canvas, and then according to the color features corresponding to the graphic objects, filling the colors corresponding to the color features in the graphic objects to obtain a target detection layer.
In practical application, as shown in fig. 5, the attribute information of the graphics object in the Canvas presentation layer is the same as the attribute information of the graphics object in the Canvas detection layer, but the graphics object in the Canvas detection layer is also filled with the color corresponding to the color feature.
In the embodiment, according to the graphic objects and the color features in the association relation library, the target display layer and the target detection layer are built in the canvas, the graphic objects are displayed through the target display layer so that users can click the displayed graphic objects, the graphic objects corresponding to the click operation can be directly determined according to the association relation between the graphic objects and the color features through the target detection layer, mathematical operation is not needed, the click detection accuracy in the canvas of a large number of graphic objects is improved, and the click detection efficiency of the graphic objects is also improved.
In one embodiment, before constructing a corresponding detection graphic object in an initial detection layer in a canvas according to a graphic object in an association relation library and a color feature corresponding to the graphic object, the method further includes:
generating color characteristics of the graphic objects in the page to be detected according to a preset color characteristic format; constructing an association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object; and storing the color characteristics, the graphic objects in the page to be detected and the incidence relation to an incidence relation library.
Specifically, before generating the color feature, the method further includes: and generating the graphic object corresponding to the attribute information according to the attribute information of the graphic object.
For example, a Javascript memory object is created according to data such as coordinate information, frame thickness, color, and the like of the graphic object, and the attribute information of the graphic object is stored in the association database.
Further, generating an initial color feature of the graphic object, and performing format conversion on the initial color feature according to a preset color feature format to obtain the color feature.
For example, an RGB color feature array with a length of three, for example, [255,255,0], is randomly generated, the generated feature colors are spliced together according to a character string format, for example, [255,255,0] is 2552550 after being spliced, 2552550 is used as a color feature, and after the color feature 2552550 passes the detection, the color feature 2552550 is stored in the association relation library.
In detail, as shown in fig. 3, the association relationship between the characteristic color and the graphic object is established, the color characteristic is used as a key (key), the graphic object is used as a value (value), the color characteristic and the graphic object are stored in the association library according to a key value pair form, so as to establish the association relationship between the color characteristic and the graphic object, and further, the characteristic color is stored in the color attribute of the graphic object, so as to establish the association relationship between the graphic object and the color characteristic, thereby obtaining the bidirectional association between the graphic object and the characteristic color.
In the embodiment, the graphic object corresponding to the click operation can be directly determined according to the incidence relation between the graphic object and the color characteristic without mathematical operation, so that the click detection accuracy in the canvas of a large number of graphic objects is improved, and the click detection efficiency of the graphic objects is also improved.
In one embodiment, before constructing the association relationship according to the graphic object and the color feature of the graphic object in the page to be detected, the method further includes:
detecting whether the color characteristics of the graphic object are stored in the association relation library or not; constructing an association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object, wherein the association relation comprises the following steps: and under the condition that the color characteristics of the graphic objects are not stored in the association relation library, constructing an association relation according to the graphic objects in the page to be detected and the color characteristics of the graphic objects.
Specifically, whether the color features of the graphic objects are stored in the association relation library or not is detected, and the association relation is constructed according to the graphic objects in the page to be detected and the color features of the graphic objects under the condition that the color features of the graphic objects are not stored in the association relation library; and under the condition that the color characteristics of the graphic objects are detected to be stored in the association relation library, skipping to the step of generating the color characteristics of the graphic objects in the page to be detected according to a preset color characteristic format until the color characteristics of the graphic objects are not detected to be stored in the association relation library.
For example, randomly generating an RGB color feature array with a length of three, for example, [255,255,0], splicing generated feature colors according to a string format, for example, [255,255,0] into a color string in the form of 2552550, detecting whether a color feature 2552550 exists in a feature color manager, and if no color feature 2552550 is detected in the color feature manager, using the color string 2552550 as a color feature and storing the color feature 2552550 in the color feature manager; if the same characteristic color is detected in the color characteristic manager, the above process is repeated until it is detected that the color characteristic manager does not contain the generated color characteristic.
In this embodiment, a unique color feature is generated for each graphic object, and an association relationship between the graphic object and the unique color feature is established, so that the terminal can directly determine the graphic object corresponding to the click operation according to the association relationship between the graphic object and the color feature without performing mathematical operation, thereby improving the click detection accuracy in the canvas of a large number of graphic objects and improving the click detection efficiency of the graphic objects.
In one embodiment, the color feature of the graphic object in the page to be detected is generated according to a preset color feature format, which specifically includes the following contents:
and generating color characteristics different from the color characteristics of the graphic objects stored in the association relation library according to a preset color characteristic format, wherein the color characteristics are used as the color characteristics of the graphic objects in the page to be detected.
Specifically, color features different from the color features of the stored graphic objects in the association relation library are generated according to a preset color feature format through a color feature generation algorithm or a color feature generation program instruction, and the different color features are used as the color features of the graphic objects in the page to be detected; that is, a unique color feature is generated directly for each graphic object by a color feature generation algorithm or color feature generation program instructions, thereby eliminating the need to perform a color feature detection step.
In this embodiment, a unique color feature is generated for each graphic object, and an association relationship between the graphic object and the unique color feature is established, so that the terminal can directly determine the graphic object corresponding to the click operation according to the association relationship between the graphic object and the color feature without performing mathematical operation, thereby improving the click detection accuracy in the canvas of a large number of graphic objects and improving the click detection efficiency of the graphic objects.
In an embodiment, before constructing a corresponding display graphic object in an initial display layer in a canvas according to attribute information of a graphic object in an association relation library, and obtaining a target display layer, the method further includes:
generating a display layer memory object and a detection layer memory object of the canvas; configuring a memory object in a display layer to obtain an initial display layer; the initial display layer is used for mounting to a page to be detected; and configuring the memory object in the detection layer according to the configuration information of the initial display layer to obtain the initial detection layer.
The configuration information includes layer information such as width, height, position, and the like.
The page to be detected can be a browser webpage on the computer device, can also be a page to be detected on an android terminal, and can also be a page to be detected on an iOS terminal, where no specific limitation is imposed on the applied terminal device.
Specifically, as shown in fig. 6, a display layer internal memory object is created in a canvas, configuration information such as the width, height, position and the like of the display layer internal memory object is configured according to a graphic object display requirement of an application terminal of a page to be detected, an initial display layer is obtained, and the initial display layer is mounted on the page to be detected; and establishing a memory object in the detection layer, and configuring the memory object in the detection layer according to the configuration information of the memory object in the display layer to obtain an initial detection layer, so that the height and the width of the initial detection layer are the same as those of the initial display layer.
For example, in a browser webpage, creating a Canvas presentation layer memory object through a document of Javascript (Canvas') instruction, configuring the width, height, position and the like of the presentation layer memory object according to the graphic object presentation requirement of HTML, and mounting the Canvas presentation layer memory object into an HTML container node through the apendHild of Javascript; create a detection layer memory object through Javascript's document. For another example, on an android terminal or an iOS terminal, the mounting of the initial display layer of the canvas to the page to be detected of the corresponding terminal can be realized by calling the corresponding interface.
In the embodiment, the target display layer and the target detection layer are built in the canvas, the graphic objects are displayed through the target display layer, so that a user can click the displayed graphic objects, the graphic objects corresponding to the click operation can be directly determined according to the incidence relation between the graphic objects and the color features through the target detection layer, mathematical operation is not needed, the click detection accuracy in the canvas of a large number of graphic objects is improved, and the click detection efficiency of the graphic objects is also improved.
In an embodiment, in step S102, the obtaining of the target color feature of the click position in the target detection layer in the canvas specifically includes the following steps:
acquiring pixel information of a click position in a target detection layer in a canvas; carrying out color extraction processing on the pixel information to obtain color information of a click position; filtering the transparency of the color information to obtain processed color information; and according to a preset color feature format, carrying out format conversion on the processed color information to obtain the target color feature.
Specifically, according to the click position in the target display layer, pixel information of a graph at the position of the click position in the target detection layer is obtained, color information is extracted from the pixel information, the transparency of the color information is filtered to obtain processed color information, and then format conversion is performed on the processed color information according to the format of the color features stored in the association relation library, namely the preset color feature format, to obtain the target color features.
For example, as shown in fig. 2, a getImageData instruction provided by the Canvas is used to obtain an RGBA pixel color of 1px at the position of the coordinate information (x, y) in the Canvas detection layer, and since the color feature stored in the color feature manager is a color string that does not include transparency, the transparency in the RGBA pixel color of 1px is removed, the RGBA pixel color is converted into an RGB color array with a length of three, and then the RGB color array is converted into a target color feature in a preset color feature format.
In the embodiment, the graphic object corresponding to the click operation can be directly determined according to the incidence relation between the graphic object and the color characteristic without mathematical operation, so that the click detection accuracy in the canvas of a large number of graphic objects is improved, and the click detection efficiency of the graphic objects is also improved.
In an embodiment, as shown in fig. 7, another method for detecting a graphic click is provided, which is described by taking an example that the method is applied to a terminal, and includes the following steps:
step S701, generating a display layer memory object and a detection layer memory object of a canvas; configuring a memory object in a display layer to obtain an initial display layer; and configuring the memory object in the detection layer according to the configuration information of the initial display layer to obtain the initial detection layer.
Step S702, according to the attribute information of the graphic objects in the association relation library, constructing corresponding display graphic objects in the initial display layer in the canvas to obtain a target display layer.
Step S703 is to generate color features of the graphic object in the page to be detected according to the preset color feature format.
Step S704, detecting whether the color characteristics of the graphic object are stored in the association relation library; and under the condition that the color characteristics of the graphic objects are not stored in the association relation library, constructing an association relation according to the graphic objects in the page to be detected and the color characteristics of the graphic objects.
Step S705, storing the color characteristics, the graphic objects in the page to be detected and the association relation to an association relation library.
Step S706, according to the graphic objects in the association relation library and the color characteristics corresponding to the graphic objects, constructing corresponding detection graphic objects in the initial detection layer in the canvas; and according to the color characteristics corresponding to the detection graphic objects, carrying out color filling on the detection graphic objects in the initial detection layer to obtain the target detection layer.
Step S707, responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; and acquiring pixel information of the click position in the target detection layer in the canvas.
Step 708, color extraction processing is performed on the pixel information to obtain color information of a click position; filtering the transparency of the color information to obtain processed color information; and according to a preset color feature format, carrying out format conversion on the processed color information to obtain the target color feature.
Step S709, querying an association relationship between the graphic object and the color feature in the page to be detected in the association relationship library to obtain a target graphic object corresponding to the target color feature, and using the target graphic object as a graphic object corresponding to the click operation.
The graph click detection method can achieve the following beneficial effects: the target display layer and the target detection layer are built in the canvas, the graphic objects are displayed through the target display layer, so that a user can click the displayed graphic objects, the graphic objects corresponding to the click operation can be directly determined according to the incidence relation between the graphic objects and the color characteristics through the target detection layer, mathematical operation is not needed, the computing resources of a CPU are saved, the click detection accuracy in the canvas of a large number of graphic objects is improved, and the click detection efficiency of the graphic objects is also improved.
In order to clarify the method for detecting a graphic click provided by the embodiments of the present disclosure more clearly, the following describes the method for detecting a graphic click in a specific embodiment. In an embodiment, as shown in fig. 8, the present disclosure further provides a method for detecting a graphic click, which specifically includes the following steps:
step S801, detection layer creation: simultaneously creating a display layer and a detection layer, wherein the display layer is responsible for UI display of graphic objects, and the detection layer is responsible for detecting the graphs clicked by events;
step S802, binding the graph and the color characteristics: generating unique color characteristics for each graphic object, binding the color characteristics with the graphic objects, and acquiring the corresponding graphic objects through the color characteristics and the corresponding color characteristics through the graphic objects;
step S803, constructing a graph and color characteristic: the method comprises the steps that a graphic object is built in a display layer through drawing, dragging and other modes, the graphic object is built in a detection layer, and then the graphic object is filled according to the color characteristics of the graphic object;
step S804, acquiring color characteristics of the event target: acquiring pixel information of a position where a mouse click operation is located, acquiring an RGBA pixel value at a coordinate position by using getImageData provided by Canvas, and converting the RGBA pixel value into color characteristics;
and step S805, comparing the color features with the target color features, inquiring the corresponding graphic object according to the color features acquired in the step (4), if the color features are inquired, returning the graphic object corresponding to the color features, and if the color features are not inquired, indicating that the clicking operation does not click any graphic object, and obtaining a null value or prompt information.
In this embodiment, a target display layer and a target detection layer are constructed in a canvas, a graphic object is displayed through the target display layer, so that a user can click the displayed graphic object, through the target detection layer, the graphic object corresponding to the click operation can be directly determined according to the incidence relation between the graphic object and the color feature, and mathematical operation is not needed, so that the click detection accuracy in the canvas of a large number of graphic objects is improved, the click detection efficiency of the graphic object is also improved, the consumption of CPU resources is reduced, and the condition that terminal equipment is blocked due to the click detection of the graphic is avoided.
It should be understood that, although the steps in the flowcharts related to the embodiments as described above are sequentially displayed as indicated by arrows, the steps are not necessarily performed sequentially as indicated by the arrows. The steps are not performed in the exact order shown and described, and may be performed in other orders, unless explicitly stated otherwise. Moreover, at least a part of the steps in the flowcharts related to the embodiments described above may include multiple steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, and the execution order of the steps or stages is not necessarily sequential, but may be rotated or alternated with other steps or at least a part of the steps or stages in other steps.
Based on the same inventive concept, the embodiment of the application also provides a graph click detection device for realizing the graph click detection method. The implementation scheme for solving the problem provided by the device is similar to the implementation scheme described in the above method, so specific limitations in one or more embodiments of the image click detection device provided below can be referred to the limitations of the image click detection method in the above, and details are not repeated here.
In one embodiment, as shown in FIG. 9, a graphical click detection device 900 is provided, comprising: click location module 901, color characteristics module 902, and graphical object module 903, wherein:
a click position module 901, configured to determine a click position in a target display layer in a canvas of a page to be detected in response to a click operation for the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected.
A color feature module 902, configured to obtain a target color feature of a click location in a target detection layer in the canvas; the object detection layer is used for describing the color characteristics of the graphic object.
And the graphic object module 903 is configured to query an association relationship between a graphic object and color features in the page to be detected, to obtain a target graphic object corresponding to the target color features, and to use the target graphic object as a graphic object corresponding to the click operation.
In an embodiment, the graph click detection apparatus 900 further includes a second construction module, configured to construct a corresponding display graph object in the initial display layer in the canvas according to the attribute information of the graph object in the association relation library, so as to obtain a target display layer; constructing a corresponding detection graphic object in an initial detection layer in a canvas according to the graphic object in the incidence relation library and the color characteristic corresponding to the graphic object; and according to the color characteristics corresponding to the detection graphic objects, carrying out color filling on the detection graphic objects in the initial detection layer to obtain the target detection layer.
In one embodiment, the graph click detection apparatus 900 further includes an association relation module, configured to generate a color feature of a graph object in the page to be detected according to a preset color feature format; constructing an association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object; and storing the color characteristics, the graphic objects in the page to be detected and the incidence relation to an incidence relation library.
In one embodiment, the graphical click detection apparatus 900 further includes a first generation module for detecting whether the color feature of the graphical object is stored in the association library.
And the association relation module is also used for constructing an association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object under the condition that the color characteristics of the graphic object are not stored in the association relation library.
In an embodiment, the graph click detecting device 900 further includes a second generating module, configured to generate, according to a preset color feature format, a color feature different from a color feature of a graph object already stored in the association library, as the color feature of the graph object in the page to be detected.
In one embodiment, the graphics click detection apparatus 900 further comprises a dual-layer configuration module for generating a presentation layer memory object and a detection layer memory object of the canvas; configuring a memory object in a display layer to obtain an initial display layer; the initial display layer is used for mounting to a page to be detected; and configuring the memory object in the detection layer according to the configuration information of the initial display layer to obtain the initial detection layer.
In one embodiment, the color characterization module 902 is further configured to obtain pixel information of a click location in a target detection layer in the canvas; carrying out color extraction processing on the pixel information to obtain color information of a click position; filtering the transparency of the color information to obtain processed color information; and according to a preset color feature format, carrying out format conversion on the processed color information to obtain the target color feature.
The various modules in the above-described graphical click detection apparatus may be implemented in whole or in part by software, hardware, and combinations thereof. The modules can be embedded in a hardware form or independent from a processor in the computer device, and can also be stored in a memory in the computer device in a software form, so that the processor can call and execute operations corresponding to the modules.
In one embodiment, a computer device is provided, which may be a terminal, and its internal structure diagram may be as shown in fig. 10. The computer device includes a processor, a memory, a communication interface, a display screen, and an input device connected by a system bus. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device comprises a nonvolatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of an operating system and computer programs in the non-volatile storage medium. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless communication can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program is executed by a processor to implement a graphical click detection method. The display screen of the computer equipment can be a liquid crystal display screen or an electronic ink display screen, and the input device of the computer equipment can be a touch layer covered on the display screen, a key, a track ball or a touch pad arranged on the shell of the computer equipment, an external keyboard, a touch pad or a mouse and the like.
Those skilled in the art will appreciate that the architecture shown in fig. 10 is merely a block diagram of some of the structures associated with the disclosed aspects and is not intended to limit the computing devices to which the disclosed aspects apply, as particular computing devices may include more or less components than those shown, or may combine certain components, or have a different arrangement of components.
In one embodiment, a computer device is further provided, which includes a memory and a processor, the memory stores a computer program, and the processor implements the steps of the above method embodiments when executing the computer program.
In an embodiment, a computer-readable storage medium is provided, on which a computer program is stored which, when being executed by a processor, carries out the steps of the above-mentioned method embodiments.
In an embodiment, a computer program product is provided, comprising a computer program which, when being executed by a processor, carries out the steps of the above-mentioned method embodiments.
It should be noted that, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data for analysis, stored data, presented data, etc.) referred to in the present application are information and data authorized by the user or sufficiently authorized by each party.
It will be understood by those skilled in the art that all or part of the processes of the methods of the embodiments described above can be implemented by hardware instructions of a computer program, which can be stored in a non-volatile computer-readable storage medium, and when executed, can include the processes of the embodiments of the methods described above. Any reference to memory, database, or other medium used in the embodiments provided herein may include at least one of non-volatile and volatile memory. The nonvolatile Memory may include Read-Only Memory (ROM), magnetic tape, floppy disk, flash Memory, optical Memory, high-density embedded nonvolatile Memory, resistive Random Access Memory (ReRAM), Magnetic Random Access Memory (MRAM), Ferroelectric Random Access Memory (FRAM), Phase Change Memory (PCM), graphene Memory, and the like. Volatile Memory can include Random Access Memory (RAM), external cache Memory, and the like. By way of illustration and not limitation, RAM can take many forms, such as Static Random Access Memory (SRAM) or Dynamic Random Access Memory (DRAM), among others. The databases referred to in various embodiments provided herein may include at least one of relational and non-relational databases. The non-relational database may include, but is not limited to, a block chain based distributed database, and the like. The processors referred to in the embodiments provided herein may be general purpose processors, central processing units, graphics processors, digital signal processors, programmable logic devices, quantum computing based data processing logic devices, etc., without limitation.
The technical features of the above embodiments can be arbitrarily combined, and for the sake of brevity, all possible combinations of the technical features in the above embodiments are not described, but should be considered as the scope of the present specification as long as there is no contradiction between the combinations of the technical features.
The above-mentioned embodiments only express several embodiments of the present application, and the description thereof is more specific and detailed, but not construed as limiting the scope of the present application. It should be noted that, for a person skilled in the art, several variations and modifications can be made without departing from the concept of the present application, which falls within the scope of protection of the present application. Therefore, the protection scope of the present application shall be subject to the appended claims.
Claims (10)
1. A graphical click detection method, the method comprising:
responding to the click operation aiming at the page to be detected, and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected;
acquiring a target color characteristic of the click position in a target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object;
and inquiring the incidence relation between the graphic object and the color characteristic in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color characteristic, and using the target graphic object as the graphic object corresponding to the click operation.
2. The method according to claim 1, before determining a click position in a target presentation layer in a canvas of the page to be detected in response to a click operation on the page to be detected, further comprising:
constructing a corresponding display graphic object in an initial display layer in the canvas according to the attribute information of the graphic object in the incidence relation library to obtain the target display layer;
constructing a corresponding detection graphic object in an initial detection layer in the canvas according to the graphic object in the incidence relation library and the color characteristic corresponding to the graphic object;
and according to the color characteristics corresponding to the detection graphic objects, performing color filling on the detection graphic objects in the initial detection layer to obtain the target detection layer.
3. The method according to claim 2, further comprising, before constructing a corresponding detection graphic object in an initial detection layer in the canvas according to the graphic object in the association library and the color feature corresponding to the graphic object, further comprising:
generating color characteristics of the graphic objects in the page to be detected according to a preset color characteristic format;
constructing the association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object;
and storing the color features, the graphic objects in the page to be detected and the incidence relation to the incidence relation library.
4. The method according to claim 3, before constructing the association relationship according to the graphic object in the page to be detected and the color feature of the graphic object, further comprising:
detecting whether the color characteristics of the graphic object are stored in the association relation library or not;
the constructing the association relationship according to the graphic object in the page to be detected and the color feature of the graphic object comprises:
and under the condition that the color characteristics of the graphic object are not stored in the association relation library, constructing the association relation according to the graphic object in the page to be detected and the color characteristics of the graphic object.
5. The method according to claim 3, wherein the generating color features of the graphic objects in the page to be detected according to a preset color feature format comprises:
and generating color features different from the color features of the graphic objects stored in the association relation library according to a preset color feature format, wherein the color features are used as the color features of the graphic objects in the page to be detected.
6. The method according to claim 2, before constructing a corresponding display graphic object in an initial display layer in the canvas according to the attribute information of the graphic object in the association relation library, and obtaining the target display layer, further comprising:
generating a display layer memory object and a detection layer memory object of the canvas;
configuring the memory object of the display layer to obtain the initial display layer; the initial display layer is used for mounting to the page to be detected;
and configuring the memory object of the detection layer according to the configuration information of the initial display layer to obtain the initial detection layer.
7. The method of claim 3, wherein obtaining the target color characteristic of the click location in the target detection layer in the canvas comprises:
acquiring pixel information of the click position in a target detection layer in the canvas;
carrying out color extraction processing on the pixel information to obtain color information of the click position;
filtering the transparency of the color information to obtain processed color information;
and according to the preset color feature format, carrying out format conversion on the processed color information to obtain the target color feature.
8. A graphical click detection device, characterized in that the device comprises:
the click position module is used for responding to click operation aiming at the page to be detected and determining the click position in the target display layer in the canvas of the page to be detected; the target display layer is used for displaying the graphic objects in the page to be detected;
the color characteristic module is used for acquiring the target color characteristic of the click position in the target detection layer in the canvas; the target detection layer is used for describing the color characteristics of the graphic object;
and the graphic object module is used for inquiring the incidence relation between the graphic object and the color feature in the page to be detected in the incidence relation library to obtain a target graphic object corresponding to the target color feature, and the target graphic object is used as the graphic object corresponding to the clicking operation.
9. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor, when executing the computer program, implements the steps of the method of any of claims 1 to 7.
10. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the steps of the method of any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210183932.9A CN114255278A (en) | 2022-02-28 | 2022-02-28 | Graph click detection method and device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202210183932.9A CN114255278A (en) | 2022-02-28 | 2022-02-28 | Graph click detection method and device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114255278A true CN114255278A (en) | 2022-03-29 |
Family
ID=80797028
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202210183932.9A Pending CN114255278A (en) | 2022-02-28 | 2022-02-28 | Graph click detection method and device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114255278A (en) |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102087708A (en) * | 2009-12-03 | 2011-06-08 | 深圳市华普电子技术有限公司 | Electronic equipment with figure-recognition function and figure-recognition method thereof |
| CN102855132A (en) * | 2011-06-30 | 2013-01-02 | 深圳市大族激光科技股份有限公司 | Method and system for selection of graphic objects |
| CN102902807A (en) * | 2011-10-18 | 2013-01-30 | 微软公司 | Visual search using a pluraligy of visual input modal |
| CN104657458A (en) * | 2015-02-06 | 2015-05-27 | 腾讯科技（深圳）有限公司 | Method and device for presenting object information of foreground object in scene image |
| US20160234434A1 (en) * | 2015-02-09 | 2016-08-11 | Hisense Mobile Communications Technology Co., Ltd. | Image data processing method and apparatus |
| CN110851050A (en) * | 2019-10-17 | 2020-02-28 | 稿定（厦门）科技有限公司 | Method and device for testing clicking of page elements |
| CN112433651A (en) * | 2020-11-13 | 2021-03-02 | 北京鸿腾智能科技有限公司 | Region identification method, device, storage medium and device |
-
2022
- 2022-02-28 CN CN202210183932.9A patent/CN114255278A/en active Pending
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102087708A (en) * | 2009-12-03 | 2011-06-08 | 深圳市华普电子技术有限公司 | Electronic equipment with figure-recognition function and figure-recognition method thereof |
| CN102855132A (en) * | 2011-06-30 | 2013-01-02 | 深圳市大族激光科技股份有限公司 | Method and system for selection of graphic objects |
| CN102902807A (en) * | 2011-10-18 | 2013-01-30 | 微软公司 | Visual search using a pluraligy of visual input modal |
| CN104657458A (en) * | 2015-02-06 | 2015-05-27 | 腾讯科技（深圳）有限公司 | Method and device for presenting object information of foreground object in scene image |
| US20160234434A1 (en) * | 2015-02-09 | 2016-08-11 | Hisense Mobile Communications Technology Co., Ltd. | Image data processing method and apparatus |
| CN110851050A (en) * | 2019-10-17 | 2020-02-28 | 稿定（厦门）科技有限公司 | Method and device for testing clicking of page elements |
| CN112433651A (en) * | 2020-11-13 | 2021-03-02 | 北京鸿腾智能科技有限公司 | Region identification method, device, storage medium and device |
Non-Patent Citations (1)
| Title |
|---|
| 邢邗等: "移动学习平台的多图层管理技术研究", 《计算机应用与软件》 * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US20220067268A1 (en) | Systems and methods for remote dashboard image generation | |
| CN112965645B (en) | Page dragging method and device, computer equipment and storage medium | |
| CN111596911B (en) | Method, device, computer equipment and storage medium for generating control | |
| CN112667330A (en) | Page display method and computer equipment | |
| CN112433712A (en) | Report display method and device, computer equipment and storage medium | |
| CN115794276A (en) | Display page component adaptation method and device, computer equipment and storage medium | |
| US8230319B2 (en) | Web-based visualization, refresh, and consumption of data-linked diagrams | |
| CN110781427A (en) | Method, device, equipment and storage medium for calculating first screen time | |
| CN114647409A (en) | Large-screen visualization application creation platform, method, computing device and storage medium | |
| CN107688650A (en) | A kind of web page generation method and device | |
| CN108388463B (en) | Icon processing method and device, computer equipment and storage medium | |
| CN114255278A (en) | Graph click detection method and device, computer equipment and storage medium | |
| CN114327395A (en) | Webpage design method, device, computer equipment, storage medium and product | |
| CN115344183A (en) | Page sliding method, live broadcast page sliding method, device, equipment and medium | |
| CN114675925A (en) | Configuration image processing method and device, computer equipment and storage medium | |
| CN114297547A (en) | Page element adjusting method, device, equipment, storage medium and program product | |
| CN114329152A (en) | Application program generation method, device, equipment and medium based on browser engine | |
| US20170177465A1 (en) | Event-driven software testing | |
| CN107636650A (en) | Meet the document based on the condition for rendering assessment to present | |
| CN117251661B (en) | Webpage file generation method, device, computer equipment and storage medium | |
| CN115686706B (en) | Terminal view configuration method, device, computer equipment and storage medium | |
| CN117370695A (en) | Page display method, device, equipment, medium and product | |
| CN114547508A (en) | Data processing method, data processing device, computer equipment and storage medium | |
| CN117612192A (en) | Electronic drawing information identification method, system, electronic equipment and storage medium | |
| CN115840861A (en) | Method and device for updating style layout information, computer equipment and storage medium |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20220329 |
|
| RJ01 | Rejection of invention patent application after publication |