CN116841439B - Display method and device for image pixel grid, computer equipment and storage medium - Google Patents
Display method and device for image pixel grid, computer equipment and storage medium Download PDFInfo
- Publication number
- CN116841439B CN116841439B CN202311108363.2A CN202311108363A CN116841439B CN 116841439 B CN116841439 B CN 116841439B CN 202311108363 A CN202311108363 A CN 202311108363A CN 116841439 B CN116841439 B CN 116841439B
- Authority
- CN
- China
- Prior art keywords
- image pixel
- custom
- pixel grid
- canvas element
- grid
- 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.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 105
- 230000002452 interceptive effect Effects 0.000 claims abstract description 126
- 230000003993 interaction Effects 0.000 claims abstract description 58
- 238000010422 painting Methods 0.000 claims abstract description 45
- 238000004590 computer program Methods 0.000 claims description 20
- 238000012544 monitoring process Methods 0.000 claims description 2
- 238000012545 processing Methods 0.000 description 7
- 238000004891 communication Methods 0.000 description 6
- 238000010586 diagram Methods 0.000 description 6
- 230000000694 effects Effects 0.000 description 6
- 238000005516 engineering process Methods 0.000 description 6
- 238000011161 development Methods 0.000 description 3
- 238000009877 rendering Methods 0.000 description 3
- 230000008859 change Effects 0.000 description 2
- 238000013079 data visualisation Methods 0.000 description 2
- 230000008569 process Effects 0.000 description 2
- 230000003068 static effect Effects 0.000 description 2
- 230000000007 visual effect Effects 0.000 description 2
- OKTJSMMVPCPJKN-UHFFFAOYSA-N Carbon Chemical compound [C] OKTJSMMVPCPJKN-UHFFFAOYSA-N 0.000 description 1
- 230000009471 action Effects 0.000 description 1
- 238000004458 analytical method Methods 0.000 description 1
- 230000001413 cellular effect Effects 0.000 description 1
- 238000010425 computer drawing Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 229910021389 graphene Inorganic materials 0.000 description 1
- 238000003384 imaging method Methods 0.000 description 1
- 238000002372 labelling Methods 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
- 230000003287 optical effect Effects 0.000 description 1
- 238000004091 panning Methods 0.000 description 1
- 230000001960 triggered effect Effects 0.000 description 1
- 238000007794 visualization technique Methods 0.000 description 1
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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
- Processing Or Creating Images (AREA)
Abstract
The application relates to a display method, a display device, computer equipment and a storage medium of an image pixel grid. The method comprises the following steps: when the interactive operation performed on the image pixel grid displayed in the interactive interface is monitored, determining a target interactive event matched with the interactive operation from all the interactive events registered in the custom painting class in advance; the image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image; calling a layout control method which is preset in the custom painting class and matched with the target interaction event, and adjusting the layout of the image pixel grid in the interaction interface; and displaying the adjusted image pixel grid to the interactive interface. The application can improve the display performance of the image pixel grid.
Description
Technical Field
The present application relates to the field of computer technologies, and in particular, to a method and apparatus for displaying an image pixel grid, a computer device, and a storage medium.
Background
With the rapid development of computer technology, computer drawing technologies, such as front-end graphics drawing technologies, have also changed greatly. Currently, front-end bitmap grid presentation in front-end graphics rendering technology can be applied to various fields, such as game development, data visualization, image processing, and the like. In game development, front-end bitmap grid presentations may be used to implement game maps, character animations, special effects, etc. In data visualization, front-end bitmap grid presentation may be used to present various data charts, maps, and the like. In image processing, the front-end bitmap grid presentation may be used to implement various image processing algorithms, machine-learned data labeling, and the like.
Currently, an application program interface (Application Programming Interface, API) using canvas elements is mainly used to draw the image pixel grid. However, when the drawn image pixel grid needs to be updated and displayed, the API interface needs to be traversed circularly for multiple times to draw the grid, which results in a complex grid drawing process, thereby affecting the display performance of the image pixel grid.
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 displaying an image pixel grid, which can improve the display performance of the image pixel grid.
In a first aspect, the present application provides a method for displaying an image pixel grid, including:
when the interactive operation performed on the image pixel grid displayed in the interactive interface is monitored, determining a target interactive event matched with the interactive operation from all the interactive events registered in the custom painting class in advance; the image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image;
calling a layout control method which is preset in the custom painting class and matched with the target interaction event, and adjusting the layout of the image pixel grid in the interaction interface;
And displaying the adjusted image pixel grid to the interactive interface.
In a second aspect, the present application provides a display device for an image pixel grid, including:
the interactive event determining module is used for determining a target interactive event matched with the interactive operation from all the interactive events registered in the custom painting class in advance when the interactive operation on the image pixel grid displayed in the interactive interface is monitored; the image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image;
the layout adjustment module is used for calling a layout control method which is preset in the custom painting class and matched with the target interaction event, and adjusting the layout of the image pixel grid in the interaction interface;
and the grid display module is used for displaying the adjusted image pixel grids into the interactive interface.
In a third aspect, the application provides a computer device comprising a memory storing a computer program and a processor implementing the steps of the method described above when the processor executes the computer program.
In a fourth aspect, the present application provides a computer readable storage medium having stored thereon a computer program which when executed by a processor performs the steps of the method described above.
In a fifth aspect, the application provides a computer program product comprising a computer program which, when executed by a processor, implements the steps of the method described above.
The method, the device, the computer equipment, the computer readable storage medium and the computer program product for displaying the image pixel grid, when the interactive operation performed on the image pixel grid displayed in the interactive interface is monitored, determining a target interactive event matched with the interactive operation from all interactive events registered in the custom painting class in advance; the image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image; calling a layout control method which is preset in the custom painting class and matched with the target interaction event, and adjusting the layout of the image pixel grid in the interaction interface; and displaying the adjusted image pixel grid to the interactive interface. Because the application registers the layout control method for carrying out layout adjustment in the custom painting class in advance. Therefore, when the corresponding interactive operation is monitored, the automatic adjustment of the layout of the image pixel grid in the interactive interface can be realized only by calling the corresponding layout control method, such as moving the image pixel grid, enlarging or reducing the image pixel grid and the like, so that the redrawing and the redrawing of the image pixel grid are realized, and compared with the traditional mode of carrying out grid drawing and displaying through circularly traversing the interface for a plurality of times, the performance is better.
Drawings
Fig. 1 is a flow chart of a method for displaying an image pixel grid according to an embodiment of the present application;
FIG. 2 is a schematic diagram of an image pixel grid according to an embodiment of the present application;
fig. 3 is a block diagram of a display device for an image pixel grid according to an embodiment of the present application;
FIG. 4 is a diagram illustrating an internal architecture of a computer device according to an embodiment of the present application;
fig. 5 is an internal structural diagram of a computer readable storage medium according to an embodiment of the present application.
Detailed Description
The present application will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present application more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the application.
In some embodiments, as shown in fig. 1, a method for displaying an image pixel grid is provided, where this embodiment is applied to a computer device for illustration, and it is understood that the computer device may be a terminal, and the method may be implemented by the terminal alone or through interaction between a server and the terminal. In this embodiment, the method includes, but is not limited to, the steps of:
S102, when the interactive operation performed on the image pixel grid displayed in the interactive interface is monitored, determining a target interactive event matched with the interactive operation from all the interactive events registered in the custom painting class in advance.
The interactive interface refers to an interface for communication and interaction between a user and a system. An interactive operation refers to an action or operation that a user interacts with the system through an interactive interface.
In some embodiments, the interactive operation may be triggered by a user through an input device, such as through a mouse, keyboard, touch screen, or the like. In other embodiments, the interactive operation may also be an operation performed by the user on an interface element provided by the system, such as an image, a button, a menu, or a slider.
In some embodiments, the interactive operation includes at least one of a click operation, a drag operation, an input operation, a selection operation, a scroll operation, or the like. The clicking operation refers to an operation of clicking an interface element by a user through a mouse or a touch screen. The drag operation refers to an operation in which a user changes the position or size of an interface element by clicking and dragging the interface element. The input operation refers to an operation in which a user inputs contents such as letters, numbers, or commands through a keyboard for recognition and processing by the system. The selection operation refers to that a user operates interface elements such as check boxes, radio buttons, drop-down menus and the like through a mouse click or a touch screen to select options. The scroll operation refers to an operation in which a user browses contents on an interactive interface, such as images, web pages, documents, etc., by scrolling a mouse wheel or a touch screen swipe.
Canvas (Canvas) class refers to the class used to draw and display images, graphics, and animations. The canvas class provides the basic drawing function in which images can be created, edited, and rendered.
The custom canvas class refers to a canvas class created according to preset requirements and designs. In the embodiment of the application, the custom canvas class can be obtained by registering specific interaction events and layout control methods in the canvas class, so that the custom canvas class meets specific requirements, such as requirements of automatically adjusting image layout and redisplaying images.
Interactive events refer to events that are interacted with to effect control of interface elements.
The target image refers to an image that needs to be grid-drawn. Wherein grid drawing refers to a visualization method of dividing an image into regular grid grids. Grid drawing typically uses lines or rectangles to identify the boundaries of the grid, creating a grid paper-like effect as shown in fig. 2.
The image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image.
Specifically, the computer device listens for user interaction in the interactive interface. When the computer equipment monitors the interactive operation performed on the image pixel grid displayed in the interactive interface, determining a target interactive event matched with the interactive operation from all the interactive events registered in the custom painting class in advance.
In some embodiments, if the computer device listens to a scrolling operation performed on the image pixel grid, then determining that the target interaction event that matches the scrolling operation is to enlarge the image pixel grid or to reduce the image pixel grid. And if the computer equipment monitors the drag operation on the image pixel grid, determining that the target interaction event matched with the drag operation is moving the image pixel grid.
S104, calling a layout control method which is preset in the custom painting class and matched with the target interaction event, and adjusting the layout of the image pixel grid in the interaction interface.
The layout control method is a method which is preset in a user-defined canvas class and used for adjusting the layout of the image pixel grids in the interactive interface.
In some embodiments, at least one of a display position, a display size, a display ratio, an alignment manner, a layout manner, a grid pattern, or the like of the image pixel grid in the interactive interface may be adjusted by a layout control method. The step of adjusting the layout mode of the image pixel grid in the interactive interface refers to controlling the layout mode of the image pixel grid and other interface elements in the interactive interface. Adjusting the grid pattern of the image pixel grid in the interactive interface refers to adjusting at least one of the visibility, line width, color, grid spacing, transparency, or the like of the grid lines in the image pixel grid. Wherein the visibility is used to select whether to display the grid lines.
Specifically, the computer device invokes a layout control method which is preset in the custom painting class and matched with the target interaction event, so as to adjust the layout of the image pixel grid in the interaction interface by executing the matched control method, and obtain the adjusted image pixel grid.
For example, assuming that the target interaction event is a moving image pixel grid, the corresponding layout control method may be to adjust the display position of the image pixel grid in the interaction interface. Assuming that the target interaction event is scaling of the moving image pixel grid, the corresponding layout control method may be to adjust the display size, display scale or grid pattern of the image pixel grid in the interaction interface.
And S106, displaying the adjusted image pixel grids into an interactive interface.
Specifically, after the computer device adjusts the layout of the image pixel grid in the interactive interface, the adjusted image pixel grid may be re-rendered into the interactive interface. For example, if the user drags the image pixel grid in the interactive interface, after determining the target interaction event for the interaction operation and invoking the corresponding layout control method, the computer device adjusts the display position of the image pixel grid in the interactive interface, and displays the adjusted image pixel grid in the interactive interface again, thereby realizing the effect of moving the image pixel grid in the interactive interface.
According to the display method of the image pixel grid, when the interactive operation performed on the image pixel grid displayed in the interactive interface is monitored, a target interactive event matched with the interactive operation is determined from all interactive events registered in the custom painting class in advance; the image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image; calling a layout control method which is preset in the custom painting class and matched with the target interaction event, and adjusting the layout of the image pixel grid in the interaction interface; and displaying the adjusted image pixel grid to the interactive interface. Because the application registers the layout control method for carrying out layout adjustment in the custom painting class in advance. Therefore, when the corresponding interactive operation is monitored, the automatic adjustment of the layout of the image pixel grid in the interactive interface can be realized only by calling the corresponding layout control method, such as moving the image pixel grid, enlarging or reducing the image pixel grid and the like, so that the redrawing and the redrawing of the image pixel grid are realized, and compared with the traditional mode of carrying out grid drawing and displaying through circularly traversing the interface for a plurality of times, the performance is better.
In some embodiments, the image pixel grid displayed in the interactive interface is a first image pixel grid corresponding to a first custom canvas class in which the interactive event is registered. The display method of the image pixel grid in the embodiment of the application specifically further comprises the following steps: and covering the first image pixel grid with a second image pixel grid corresponding to the second custom canvas class. S104 specifically comprises: and calling a layout control method which is preset in the second custom painting class and matched with the target interaction event, and adjusting the layout of the second image pixel grid in the interaction interface.
The custom canvas class comprises at least one of a first custom canvas class and a second custom canvas class. The grid drawn for the target image in the first custom canvas class is a first image pixel grid, and the grid drawn for the target image in the second custom canvas class is a second image pixel grid.
In some embodiments, image resources may be obtained in a custom canvas class, i.e., resources for obtaining images that require grid drawing, initializing some interaction events, obtaining document object model (Document Object Model, DOM) objects and related containers for drawing a first image pixel grid, etc., facilitating subsequent grid drawing, event listening, and invocation.
In some embodiments, the interaction event registered in the first custom canvas class includes at least one of an event of dragging an image pixel grid, an event of panning an image pixel grid, an event of zooming in an image pixel grid by a scroll wheel, or an event of zooming out an image pixel grid by a scroll wheel, etc.
In some embodiments, the layout control method set in the second custom canvas class includes adjusting at least one of a display size and a display position of the image pixel grid in the interactive interface, a control grid size, a control grid position, a display style of the control grid, and the like.
Specifically, the computer equipment covers the first image pixel grid with the second image pixel grid corresponding to the second custom painting class, and invokes a layout control method which is preset in the second custom painting class and matched with the target interaction event, so as to realize the adjustment of the layout of the first image pixel grid covered with the second image pixel grid in the interaction interface.
In the embodiment of the application, two custom painting classes are set, grid drawing is performed on the target image in the two custom painting classes, the first image pixel grid is taken as a reference, the drawn second image pixel grid is subjected to layout adjustment according to a layout control mode under the condition that the first image pixel grid needs to be adjusted, and the second image pixel grid subjected to layout adjustment is directly displayed on an interactive interface, so that compared with the mode that the first image pixel grid is directly subjected to layout adjustment, re-rendered and loaded on the interactive interface according to the layout control method, the display efficiency is higher,
In some embodiments, the first image pixel grid is drawn in a first custom canvas element of a first custom canvas class; the second image pixel grid is drawn in a second custom canvas element of a second custom canvas class. The step of covering the second image pixel grid corresponding to the second custom canvas class with the first image pixel grid specifically comprises the following steps: the second custom canvas element is overlaid over the first custom canvas element. The step of calling a layout control method which is preset in the second custom painting class and matched with the target interaction event to adjust the layout of the second image pixel grid in the interaction interface specifically comprises the following steps: and calling a target layout control method, and adjusting the layout of the second image pixel grid in the second user-defined canvas element in the interactive interface.
The target layout control method is a layout control method which is preset in the second custom painting class and matched with the target interaction event.
A custom canvas element refers to an element custom in a canvas class for drawing an image.
The first custom canvas element refers to an element defined in the first custom canvas class for drawing an image. The second custom canvas element refers to an element defined in the second custom canvas class for drawing an image.
In some embodiments, the target image grid may be drawn into a second custom Canvas element through a Canvas interface (Canvas API) for use as an off-screen Canvas that is not exposed into the interactive interface. The canvas interface provides a set of methods and attributes for drawing graphics on the interactive interface, and drawing, rendering images, animation effects, and the like can be achieved on custom canvas elements through the methods and attributes.
It should be noted that the size of the second image pixel grid drawn in the second custom canvas element is the same as the size of the target image.
In some embodiments, the target image may be loaded in the second custom canvas class to draw the target image grid into the second custom canvas element.
Specifically, the computer device overlays the second custom canvas element over the first custom canvas element, invokes a target layout control method preset in the second custom canvas class, and adjusts the layout of the second image pixel grid in the second custom canvas element in the interactive interface.
Therefore, in the embodiment of the application, the layout control method preset in the second custom canvas class is controlled through the interaction event registered in the first custom canvas class, so that the layout of the second image pixel grid in the second custom canvas element in the interaction interface is controlled, redrawing of the first image pixel grid is not needed, and the efficiency of displaying the image pixel grid can be improved.
In some embodiments, the second image pixel grid is drawn in a document object model element created in a second custom canvas element; the document object model element is mounted in a first custom canvas element. The step of calling the target layout control method to adjust the layout of the second image pixel grid in the second user-defined canvas element in the interactive interface specifically comprises the following steps: and calling a target layout control method, and adjusting the layout of the second custom canvas element relative to the first custom canvas element based on the relative position relation between the document object model element and the first custom canvas element.
In mesh rendering, document object model elements, DOM elements, refer to hypertext markup language (Hyper Text Markup Language, HTML) elements on a page, including elements such as layers (DIVision, DIV) for representing cells of a mesh.
It should be noted that, grid drawing refers to a process of visually displaying a grid structure and data therein, which includes a plurality of cells. Each cell can be represented by a DOM element, and the drawing and the displaying of the grid can be realized by carrying out style setting and layout on the DOM element.
In particular, the computer device may obtain a location of the second custom canvas element relative to the first custom canvas element based on a relative positional relationship between the document object model element and the first custom canvas element. The target layout control method is invoked, and the layout of the second custom canvas element relative to the first custom canvas element is controlled based on the positioning of the second custom canvas element relative to the first custom canvas element, so that the control mode is simpler and the use is convenient.
In some embodiments, the step of "invoking the target layout control method, adjusting the layout of the second custom canvas element with respect to the first custom canvas element based on the relative positional relationship between the document object model element and the first custom canvas element" specifically includes: and calling a target layout control method, adjusting the position and the proportion of the second custom canvas element relative to the first custom canvas element based on the relative position relation, and performing style adjustment on the pixel grid of the second image pixel grid in the second custom canvas element.
Specifically, the computer device invokes the target layout control method, adjusts the position and the proportion, that is, the size, of the second custom canvas element in the first custom canvas element based on the positioning of the second custom canvas element relative to the first custom canvas element, indicated by the relative positional relationship, and style adjustment is performed on the pixel grid of the second image pixel grid in the second custom canvas element. For example, the computer device adjusts the size, position, style, and whether to display the pixel grid by controlling the size, position, style, whether to display, etc. of the DOM elements in the second custom canvas element, thereby adjusting the visual effect of the pixel grid.
It can be seen that, in the embodiment of the present application, the layout control method preset in the second custom canvas class is controlled by the interaction event registered in the first custom canvas class, so as to control the position, size, style, display or not of the second image pixel grid in the second custom canvas element in the first custom canvas element, without redrawing the first image pixel grid, and thus, the efficiency of displaying the image pixel grid can be improved.
In some embodiments, the target layout control method includes three parameters to be adjusted, namely a first coordinate, a second coordinate, and a scaling. Wherein the first coordinate refers to an abscissa of the upper left corner relative to the first custom canvas element by drawing a second grid of image pixels in the second custom canvas element onto the first custom canvas element. The second coordinate refers to the ordinate of the upper left corner relative to the first custom canvas element drawing a second grid of image pixels in the second custom canvas element onto the first custom canvas element. Scaling refers to the scaling of drawing the second image pixel grid in the second custom canvas element onto the first custom canvas and compared to the target image.
In some embodiments, S106 specifically includes: and canceling the first image pixel grid in the first user-defined canvas element, and displaying the second image pixel grid in the second user-defined canvas element into the interactive interface.
Specifically, a first image pixel grid in a first custom canvas element is exposed by default and a second image pixel grid in a second custom canvas element is not exposed by default. After the computer device performs grid layout adjustment by using the second image pixel grid in the second user-defined canvas element, the adjusted second image pixel grid needs to be re-displayed in the interactive interface, and the display of the first image pixel grid in the first user-defined canvas element is canceled, so that the interactive effect of the image pixel grid layout adjustment is effectively realized.
In some embodiments, the method for displaying an image pixel grid of the present application specifically further includes, but is not limited to, the following steps:
(1) And monitoring the interactive operation performed on the first image pixel grid displayed in the interactive interface.
In some embodiments, the first image pixel grid is drawn in a first custom canvas element and the second image pixel grid is drawn in a document object model element created in a second custom canvas element.
(2) When the interactive operation performed on the image pixel grid displayed in the interactive interface is monitored, determining a target interactive event matched with the monitored interactive operation from all the interactive events registered in the second custom painting class in advance.
(3) The second custom canvas element is overlaid over the first custom canvas element.
(4) And calling a target layout control method, adjusting the position and the proportion of the second custom canvas element relative to the first custom canvas element based on the relative position relation between the document object model element and the first custom canvas element, and performing style adjustment on the pixel grid of the second image pixel grid in the second custom canvas element.
(5) And canceling the first image pixel grid in the first user-defined canvas element, and displaying the second image pixel grid in the second user-defined canvas element into the interactive interface.
By the display method of the image pixel grid, the display effect of the image pixel grid at the front end can be quickly realized, and when the image pixel grid is translated or scaled, a canvas interface is not required to be called for many times, so that the display method is moderate in performance.
It should be understood that, although the steps in the flowcharts related to the embodiments described above are sequentially shown as indicated by arrows, these steps are not necessarily sequentially performed in the order indicated by the arrows. The steps are not strictly limited to the order of execution unless explicitly recited herein, and the steps may be executed in other orders. Moreover, at least some of the steps in the flowcharts described in the above embodiments may include a plurality of steps or a plurality of stages, which are not necessarily performed at the same time, but may be performed at different times, and the order of the steps or stages is not necessarily performed sequentially, but may be performed alternately or alternately with at least some of the other steps or stages.
Based on the same inventive concept, the embodiment of the application also provides a display device of the image pixel grid. The implementation of the solution provided by the device is similar to the implementation described in the above method, so the specific limitation in the embodiment of the display device for one or more image pixel grids provided below may refer to the limitation of the display method for an image pixel grid hereinabove, and will not be repeated herein.
As shown in fig. 3, an embodiment of the present application provides a display device for an image pixel grid, including:
the interaction event determining module 302 is configured to determine, when an interaction operation performed on an image pixel grid displayed in the interaction interface is monitored, a target interaction event matched with the interaction operation from interaction events registered in a custom painting class in advance; the image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image;
the layout adjustment module 304 is configured to invoke a layout control method preset in the custom painting class and matched with the target interaction event, and adjust the layout of the image pixel grid in the interaction interface;
and the grid display module 306 is configured to display the adjusted image pixel grid into the interactive interface.
According to the display device of the image pixel grid, when the interactive operation performed on the image pixel grid displayed in the interactive interface is monitored, a target interactive event matched with the interactive operation is determined from all interactive events registered in the custom painting class in advance; the image pixel grid is obtained by conducting grid drawing in a custom painting class according to the target image; calling a layout control method which is preset in the custom painting class and matched with the target interaction event, and adjusting the layout of the image pixel grid in the interaction interface; and displaying the adjusted image pixel grid to the interactive interface. Because the application registers the layout control method for carrying out layout adjustment in the custom painting class in advance. Therefore, when the corresponding interactive operation is monitored, the automatic adjustment of the layout of the image pixel grid in the interactive interface can be realized only by calling the corresponding layout control method, such as moving the image pixel grid, enlarging or reducing the image pixel grid and the like, so that the redrawing and the redrawing of the image pixel grid are realized, and compared with the traditional mode of carrying out grid drawing and displaying through circularly traversing the interface for a plurality of times, the performance is better.
In some embodiments, the image pixel grid displayed in the interactive interface is a first image pixel grid corresponding to a first custom canvas class; the interaction event is registered in a first custom canvas class. The display device of the image pixel grid further comprises a grid covering module, which is specifically used for:
covering a first image pixel grid with a second image pixel grid corresponding to a second custom painting class;
in the aspect of calling a layout control method which is preset in the custom painting class and matched with the target interaction event to adjust the layout of the image pixel grid in the interaction interface, the layout adjustment module 304 is specifically configured to:
and calling a layout control method which is preset in the second custom painting class and matched with the target interaction event, and adjusting the layout of the second image pixel grid in the interaction interface.
In some embodiments, the first image pixel grid is drawn in a first custom canvas element of a first custom canvas class; the second image pixel grid is drawn in a second custom canvas element of a second custom canvas class. In the aspect of covering the first image pixel grid with a second image pixel grid corresponding to the second custom canvas class, the grid covering module is specifically configured to:
Overlaying the second custom canvas element over the first custom canvas element;
in the aspect of calling a layout control method which is preset in the second custom canvas class and matched with the target interaction event to adjust the layout of the second image pixel grid in the interaction interface, the layout adjustment module 304 is specifically configured to:
calling a target layout control method, and adjusting the layout of a second image pixel grid in the second user-defined canvas element in the interactive interface;
the target layout control method is a layout control method which is preset in the second custom painting class and matched with the target interaction event.
In some embodiments, the second image pixel grid is drawn in a document object model element created in a second custom canvas element; the document object model element is mounted in a first custom canvas element. In terms of invoking the target layout control method to adjust the layout of the second image pixel grid in the second custom canvas element in the interactive interface, the layout adjustment module 304 is specifically configured to:
and calling a target layout control method, and adjusting the layout of the second custom canvas element relative to the first custom canvas element based on the relative position relation between the document object model element and the first custom canvas element.
In some embodiments, upon invoking the target layout control method, the layout adjustment module 304 is specifically configured to adjust a layout aspect of the second custom canvas element relative to the first custom canvas element based on a relative positional relationship between the document object model element and the first custom canvas element:
and calling a target layout control method, adjusting the position and the proportion of the second custom canvas element relative to the first custom canvas element based on the relative position relation, and performing style adjustment on the pixel grid of the second image pixel grid in the second custom canvas element.
In some embodiments, in terms of exposing the adjusted grid of image pixels into the interactive interface, grid exposure module 306 is specifically configured to:
and canceling the first image pixel grid in the first user-defined canvas element, and displaying the second image pixel grid in the second user-defined canvas element into the interactive interface.
The various modules in the display device of the image pixel grid can be realized in whole or in part by software, hardware and a combination thereof. The above modules may be embedded in hardware or independent of a processor in the computer device, or may be stored in software in a memory in the computer device, so that the processor may call and execute operations corresponding to the above modules.
In some embodiments, a computer device is provided, which may be a terminal, and the internal structure of which may be as shown in fig. 4. The computer device includes a processor, a memory, an input/output interface, a communication interface, a display unit, and an input device. The processor, the memory and the input/output interface are connected through a system bus, and the communication interface, the display unit and the input device are connected to the system bus through the input/output interface. Wherein the processor of the computer device is configured to provide computing and control capabilities. The memory of the computer device includes a non-volatile 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 the operating system and computer programs in the non-volatile storage media. The input/output interface of the computer device is used to exchange information between the processor and the external device. The communication interface of the computer device is used for carrying out wired or wireless communication with an external terminal, and the wireless mode can be realized through WIFI, a mobile cellular network, NFC (near field communication) or other technologies. The computer program is executed by the processor to implement the steps in the method for displaying an image pixel grid as described above. The display unit of the computer device is used for forming a visual picture, and can be a display screen, a projection device or a virtual reality imaging device. The display screen can be a liquid crystal display screen or an electronic ink display screen; the input device of the computer equipment can be a touch layer covered on a display screen, can also be keys, a track ball or a touch pad arranged on the shell of the computer equipment, and can also be an external keyboard, a touch pad or a mouse and the like.
It will be appreciated by persons skilled in the art that the architecture shown in fig. 4 is merely a block diagram of some of the architecture relevant to the present inventive arrangements and is not limiting as to the computer device to which the present inventive arrangements are applicable, and that a particular computer device may include more or fewer components than shown, or may combine some of the components, or have a different arrangement of components.
In some embodiments, a computer device is provided, comprising a memory storing a computer program and a processor implementing the steps of the method embodiments described above when the computer program is executed.
In some embodiments, as shown in fig. 5, there is provided an internal structural diagram of a computer-readable storage medium storing a computer program which, when executed by a processor, implements the steps of the method embodiments described above.
In some embodiments, a computer program product is provided, comprising a computer program which, when executed by a processor, implements the steps of the method embodiments described above.
It should be noted that, the user information (including but not limited to user equipment information, user personal information, etc.) and the data (including but not limited to data for analysis, stored data, presented data, etc.) related to the present application are information and data authorized by the user or sufficiently authorized by each party, and the collection, use and processing of the related data need to comply with the related laws and regulations and standards of the related country and region.
Those skilled in the art will appreciate that implementing all or part of the above described embodiment methods may be accomplished by way of a computer program stored on a non-transitory computer readable storage medium, which when executed, may comprise the steps of the embodiments of the methods described above. Any reference to memory, database, or other medium used in 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 (Magnetoresistive Random Access Memory, MRAM), ferroelectric Memory (Ferroelectric Random Access Memory, FRAM), phase change Memory (Phase Change Memory, PCM), graphene Memory, and the like. Volatile memory can include random access memory (Random Access Memory, RAM) or external cache memory, and the like. By way of illustration, and not limitation, RAM can be in the form of a variety of forms, such as Static Random access memory (Static Random access memory AccessMemory, SRAM) or dynamic Random access memory (Dynamic Random Access Memory, DRAM), and the like. The databases referred to in the embodiments provided herein may include at least one of a relational database and a non-relational database. The non-relational database may include, but is not limited to, a blockchain-based distributed database, and the like. The processor referred to in the embodiments provided in the present application may be a general-purpose processor, a central processing unit, a graphics processor, a digital signal processor, a programmable logic unit, a data processing logic unit based on quantum computing, or the like, but is not limited thereto.
The technical features of the above embodiments may be arbitrarily combined, and all possible combinations of the technical features in the above embodiments are not described for brevity of description, however, as long as there is no contradiction between the combinations of the technical features, they should be considered as the scope of the description.
The foregoing examples illustrate only a few embodiments of the application and are described in detail herein without thereby limiting the scope of the application. It should be noted that it will be apparent to those skilled in the art that several variations and modifications can be made without departing from the spirit of the application, which are all within the scope of the application. Accordingly, the scope of the application should be assessed as that of the appended claims.
Claims (10)
1. A method for displaying an image pixel grid, comprising:
when monitoring the interactive operation performed on a first image pixel grid displayed in an interactive interface, determining a target interactive event matched with the interactive operation from all interactive events registered in a first custom painting class in advance; the first image pixel grid is obtained by conducting grid drawing in a first user-defined canvas element of the first user-defined canvas class according to a target image; the interactive operation comprises at least one of a click operation, a drag operation or a scroll operation;
Overlaying a second custom canvas element of a second custom canvas class on the first custom canvas element; the second custom canvas element is an off-screen canvas which is not shown in the interactive interface; the second custom canvas element comprises a second grid of image pixels drawn for the target image; the size of the second image pixel grid is the same as the size of the target image;
invoking a target layout control method to adjust the layout of the second image pixel grid in the second user-defined canvas element in the interactive interface; the target layout control method is a layout control method which is preset in the second custom painting class and matched with the target interaction event;
and displaying the adjusted second image pixel grid to the interactive interface.
2. The method of claim 1, wherein the second image pixel grid is drawn in a document object model element created in a second custom canvas element; the document object model element is mounted in the first user-defined canvas element;
the method for calling the target layout control method for adjusting the layout of the second image pixel grid in the second user-defined canvas element in the interactive interface comprises the following steps:
And calling a target layout control method, and adjusting the layout of the second custom canvas element relative to the first custom canvas element based on the relative position relation between the document object model element and the first custom canvas element.
3. The method of claim 2, wherein the invoking the target layout control method to adjust the layout of the second custom canvas element relative to the first custom canvas element based on the relative positional relationship between the document object model element and the first custom canvas element comprises:
and calling a target layout control method, adjusting the position and the proportion of the second custom canvas element relative to the first custom canvas element based on the relative position relation, and performing style adjustment on the pixel grid of the second image pixel grid in the second custom canvas element.
4. The method of claim 1, wherein the exposing the adjusted second grid of image pixels into the interactive interface comprises:
and canceling the display of the first image pixel grid in the first user-defined canvas element, and displaying the second image pixel grid in the second user-defined canvas element into the interactive interface.
5. A display device for an image pixel grid, comprising:
the interactive event determining module is used for determining a target interactive event matched with the interactive operation from all the interactive events registered in the first custom painting class in advance when the interactive operation performed on the first image pixel grid displayed in the interactive interface is monitored; the first image pixel grid is obtained by conducting grid drawing in a first user-defined canvas element of the first user-defined canvas class according to a target image; the interactive operation comprises at least one of a click operation, a drag operation or a scroll operation;
the grid covering module is used for covering the first user-defined canvas element with a second user-defined canvas element of a second user-defined canvas class; the second custom canvas element is an off-screen canvas which is not shown in the interactive interface; the second custom canvas element comprises a second grid of image pixels drawn for the target image; the size of the second image pixel grid is the same as the size of the target image;
the layout adjustment module is used for calling a target layout control method and adjusting the layout of the second image pixel grid in the second user-defined canvas element in the interactive interface; the target layout control method is a layout control method which is preset in the second custom painting class and matched with the target interaction event;
And the grid display module is used for displaying the adjusted second image pixel grid into the interactive interface.
6. The apparatus of claim 5, wherein the second image pixel grid is drawn in a document object model element created in a second custom canvas element; the document object model element is mounted in the first user-defined canvas element; in the aspect of calling a target layout control method and adjusting the layout of the second image pixel grid in the second custom canvas element in the interactive interface, the layout adjustment module is specifically configured to:
and calling a target layout control method, and adjusting the layout of the second custom canvas element relative to the first custom canvas element based on the relative position relation between the document object model element and the first custom canvas element.
7. The apparatus of claim 6, wherein upon invoking a target layout control method, adjusting a layout aspect of the second custom canvas element relative to the first custom canvas element based on a relative positional relationship between the document object model element and the first custom canvas element, the layout adjustment module is specifically to:
And calling a target layout control method, adjusting the position and the proportion of the second custom canvas element relative to the first custom canvas element based on the relative position relation, and performing style adjustment on the pixel grid of the second image pixel grid in the second custom canvas element.
8. The apparatus of claim 5, wherein in exposing the adjusted second grid of image pixels to the interactive interface, the grid exposing module is specifically configured to:
and canceling the display of the first image pixel grid in the first user-defined canvas element, and displaying the second image pixel grid in the second user-defined canvas element into the interactive interface.
9. A computer device comprising a memory and a processor, the memory storing a computer program, characterized in that the processor implements the steps of the method of any of claims 1 to 4 when the computer program is executed.
10. A computer readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, implements the steps of the method of any of claims 1 to 4.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311108363.2A CN116841439B (en) | 2023-08-31 | 2023-08-31 | Display method and device for image pixel grid, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311108363.2A CN116841439B (en) | 2023-08-31 | 2023-08-31 | Display method and device for image pixel grid, computer equipment and storage medium |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN116841439A CN116841439A (en) | 2023-10-03 |
| CN116841439B true CN116841439B (en) | 2023-12-15 |
Family
ID=88172770
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311108363.2A Active CN116841439B (en) | 2023-08-31 | 2023-08-31 | Display method and device for image pixel grid, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN116841439B (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102937896A (en) * | 2012-11-05 | 2013-02-20 | 清华大学 | Method for dynamically presenting two-dimensional spatial data by using color mapping technology in scalable vector graphics (SVG) |
| CN112381909A (en) * | 2020-12-07 | 2021-02-19 | 四川长虹电器股份有限公司 | Lightweight flow chart drawing system based on Canvas |
| CN113391748A (en) * | 2021-08-17 | 2021-09-14 | 中国科学院自动化研究所 | Abnormal field of vision data acquisition system |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9454835B2 (en) * | 2012-02-29 | 2016-09-27 | Milliken & Company | System and method for displaying and manipulating a floor layout display on a computer |
-
2023
- 2023-08-31 CN CN202311108363.2A patent/CN116841439B/en active Active
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102937896A (en) * | 2012-11-05 | 2013-02-20 | 清华大学 | Method for dynamically presenting two-dimensional spatial data by using color mapping technology in scalable vector graphics (SVG) |
| CN112381909A (en) * | 2020-12-07 | 2021-02-19 | 四川长虹电器股份有限公司 | Lightweight flow chart drawing system based on Canvas |
| CN113391748A (en) * | 2021-08-17 | 2021-09-14 | 中国科学院自动化研究所 | Abnormal field of vision data acquisition system |
Also Published As
| Publication number | Publication date |
|---|---|
| CN116841439A (en) | 2023-10-03 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10540744B2 (en) | Flexible control in resizing of visual displays | |
| US11048484B2 (en) | Automated responsive grid-based layout design system | |
| US20150378555A1 (en) | Maintaining context for maximize interactions on grid-based visualizations | |
| US20140143652A1 (en) | Dynamic zooming of content with overlays | |
| JP2012038336A (en) | System and method for viewing digital visual content on a device | |
| US20180059919A1 (en) | Responsive Design Controls | |
| CN103955469B (en) | A kind of method and apparatus that page zoom-in and zoom-out is carried out in browser | |
| CN113536173B (en) | Page processing method and device, electronic equipment and readable storage medium | |
| US9548042B2 (en) | Responsive document breakpoints systems and methods | |
| US7701471B1 (en) | Methods and apparatus to display a viewing region | |
| CN114357345A (en) | Picture processing method and device, electronic equipment and computer readable storage medium | |
| CN116841439B (en) | Display method and device for image pixel grid, computer equipment and storage medium | |
| CN114741016B (en) | Operation method, device, electronic equipment and computer readable storage medium | |
| WO2023221041A1 (en) | Operation method and apparatus, electronic device, and computer-readable storage medium | |
| CN116302282A (en) | Matrix data visual graph generation and data processing method based on D3 | |
| CN117557677A (en) | Chart drawing method, device and computer equipment | |
| US9691131B1 (en) | System and method for image resizing | |
| CN115774510A (en) | Resolution adaptation method, resolution adaptation device, computer equipment and storage medium | |
| US11908050B2 (en) | Graphical user interface | |
| CN113377262B (en) | Method and device for adjusting size proportion of pictures in electronic document | |
| CN111523288B (en) | Display method and device for aerial view of PDF document | |
| CN118377406A (en) | Content-based tabular method, apparatus, computer device, and storage medium | |
| CN118276733A (en) | Page display method and device and medical system page display method | |
| CN115167963A (en) | H5-based multi-level window fast response method and storage medium | |
| CN117608445A (en) | Rendering method and rendering device of application page, electronic 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 | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |