A method and apparatus for drawing a pixel picture

Abstract

The application relates to a method and device for drawing a pixel picture. The method comprises: in response to a user's request for drawing a pixel picture, obtaining canvas data of the pixel picture; rendering the canvas according to the canvas data, including: generating a picture sprite as a first layer of the canvas according to the canvas data; drawing lines as a pixel picture grid as a second layer of the canvas; drawing a transparent canvas as a third layer of the canvas; in response to a user's drawing operation in the canvas, re-rendering the third layer of the canvas to display the pixel picture after the drawing operation; in response to a user's geometric transformation operation in the canvas, performing corresponding geometric transformation processing on the picture sprite of the first layer of the canvas, and re-rendering the second layer and the third layer of the canvas to display the pixel picture after the geometric transformation operation. The application separates the canvas into layers, separates the canvas data that needs to be re-rendered from the canvas data that does not need to be re-rendered, and avoids repeated rendering as much as possible.

Description

Technical Field

[0001] This invention relates to the field of digital images, and more particularly to a method and apparatus for creating pixel art. Background Technology

[0002] Pixel art is becoming increasingly popular. In pixel art, pixels are presented on the canvas in clearly visible, individual squares. Users can create pixel art online. Typically, 10,000 squares are drawn on a canvas. Each time the user performs an action on the canvas—such as dragging, scaling, or coloring—the canvas is re-rendered to update the pixel art display.

[0003] However, in scenarios with a large number of canvas grids, such as a pixel art image with 1000*1000 grids, the sheer number of points to be rendered on the canvas can cause severe lag for users if the processing performance is poor. Therefore, providing a better method for creating pixel art is a pressing issue that needs to be addressed. Summary of the Invention

[0004] To overcome the problems existing in related technologies, embodiments of the present invention provide a method and apparatus for drawing pixel art. The technical solution is as follows:

[0005] According to a first aspect of an embodiment of the present invention, a method for drawing pixel art is provided, comprising:

[0006] In response to a user's request to draw a pixel art image, obtain the canvas data for the pixel art image;

[0007] Rendering a canvas based on the canvas data includes: generating an image sprite as the first layer of the canvas based on the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas.

[0008] In response to a user's drawing operation on the canvas, the third layer of the canvas is re-rendered to display the pixel art after the drawing operation.

[0009] In response to the user's geometric transformation operation on the canvas, the image sprite of the first layer of the canvas is subjected to the corresponding geometric transformation processing, and the second and third layers of the canvas are re-rendered to display the pixel art after the geometric transformation operation.

[0010] Optionally, the canvas data includes background texture data and historical drawing data;

[0011] The process of acquiring the canvas data for pixel art includes:

[0012] Send a command to the server to retrieve the canvas data of the pixel art;

[0013] Receive the background image link and historical drawing data of the pixel drawing returned by the server;

[0014] Obtain the background image from the provided image link;

[0015] Place the background image onto the canvas and use the canvas's pixel data as the background image data.

[0016] Optionally, the method further includes:

[0017] Real-time acquisition of other people's drawing data for the pixel art;

[0018] The third layer of the canvas is re-rendered based on data drawn by others.

[0019] Optionally, the real-time acquisition of other people's drawing data of the pixel painting includes:

[0020] A long connection is established with a server that stores other users' drawing data for the pixel art uploaded by other users;

[0021] Receive in real time drawing data from others sent by the server through the long connection.

[0022] Optionally, the method further includes:

[0023] The real-time acquisition of other people's drawing data of the pixel art includes:

[0024] A long connection is established with a server that stores other users' drawing data for the pixel art uploaded by other users;

[0025] Receive in real time drawing data from others sent by the server through the long connection.

[0026] Optionally, the method further includes:

[0027] In response to the user's drawing actions on the canvas, generate drawing data;

[0028] The drawing data is sent to the server so that the server stores the drawing data in correspondence with the pixel drawing.

[0029] According to a second aspect of the present invention, an apparatus for drawing pixel art is provided, comprising:

[0030] The first acquisition module is used to acquire the canvas data of the pixel art in response to the user's request to draw pixel art;

[0031] The rendering module is used to render the canvas according to the canvas data, including: generating an image sprite as the first layer of the canvas according to the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas.

[0032] The first processing module is used to respond to the user's drawing operation on the canvas by re-rendering the third layer of the canvas to display the pixel art after the drawing operation.

[0033] The second processing module is used to respond to the user's geometric transformation operation on the canvas, perform corresponding geometric transformation processing on the image sprite of the first layer of the canvas, and re-render the second and third layers of the canvas to display the pixel art after the geometric transformation operation.

[0034] Optionally, the canvas data includes background texture data and historical drawing data; the first acquisition module is used for:

[0035] Send a command to the server to retrieve canvas data;

[0036] Receive the background texture image link and historical drawing data returned by the server;

[0037] Obtain the background image from the provided image link;

[0038] Place the background image onto the canvas and use the canvas's pixel data as the background image data.

[0039] Optionally, the device further includes:

[0040] The second acquisition module is used to acquire the pixel art's drawing data from other people in real time.

[0041] The third processing module is used to re-render the third layer of the canvas based on data drawn by others.

[0042] Optionally, the second acquisition module is used for:

[0043] A long connection is established with a server that stores other users' drawing data for the pixel art uploaded by other users;

[0044] Receive in real time drawing data from others sent by the server through the long connection.

[0045] Optionally, the device further includes:

[0046] The generation module is used to generate drawing data in response to user drawing operations on the canvas;

[0047] The sending module is used to send the drawing data to the server so that the server stores the drawing data in correspondence with the pixel drawing.

[0048] According to a third aspect of the present invention, an apparatus for drawing pixel art is provided, comprising:

[0049] processor;

[0050] Memory used to store processor-executable instructions;

[0051] The processor is configured as follows:

[0052] In response to a user's request to draw a pixel art image, obtain the canvas data for the pixel art image;

[0053] Rendering a canvas based on the canvas data includes: generating an image sprite as the first layer of the canvas based on the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas.

[0054] In response to the user's drawing operation on the canvas, the third layer of the canvas is re-rendered to display the pixel art after the drawing operation.

[0055] In response to the user's geometric transformation operation on the canvas, the image sprite of the first layer of the canvas is subjected to the corresponding geometric transformation processing, and the second and third layers of the canvas are re-rendered to display the pixel art after the geometric transformation operation.

[0056] According to a fourth aspect of an embodiment of the present invention, a computer-readable storage medium is provided having computer instructions stored thereon, characterized in that, when executed by a processor, the instructions implement the steps of any of the methods in the first aspect of the embodiments of the present invention.

[0057] The technical solution provided by the embodiments of the present invention, by adopting a canvas layering strategy, separates the areas that need to be re-rendered from those that do not, greatly reducing the number of rendering points during canvas operations and avoiding repeated rendering as much as possible. This is especially effective for scenarios with a large number of canvas grids and multiple people painting at the same time, resulting in a significant performance improvement.

[0058] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit the invention. Attached Figure Description

[0059] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with the invention and, together with the description, serve to explain the principles of the invention.

[0060] Figure 1 This is a flowchart illustrating a method for drawing pixel art according to an exemplary embodiment;

[0061] Figure 2This is a flowchart illustrating a method for drawing pixel art according to an exemplary embodiment;

[0062] Figure 3 This is a flowchart illustrating a method for drawing pixel art according to an exemplary embodiment;

[0063] Figure 4 This is a flowchart illustrating a method for drawing pixel art according to an exemplary embodiment;

[0064] Figure 5 This is a schematic diagram illustrating a method for drawing pixel art according to an exemplary embodiment;

[0065] Figure 6 This is a block diagram illustrating an apparatus for drawing pixel art according to an exemplary embodiment;

[0066] Figure 7 This is a block diagram illustrating an apparatus for drawing pixel art according to an exemplary embodiment;

[0067] Figure 8 This is a block diagram illustrating an apparatus for drawing pixel art according to an exemplary embodiment. Detailed Implementation

[0068] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present invention. Rather, they are merely examples of apparatuses and methods consistent with some aspects of the invention as detailed in the appended claims.

[0069] Currently, when users draw pixel art online, in scenarios with a large number of canvas grids, such as a pixel art image with 1000*1000 grids, the entire canvas needs to be re-rendered after each drawing. Since there are too many points to render on the canvas, if the processing performance is poor, it will cause severe lag for the user's operation on the canvas.

[0070] Embodiments of the present invention provide a method for drawing pixel art. This method can be applied to terminals such as mobile phones and computers. Specifically, it can be implemented as a client (e.g., an App application) installed on the terminal, or as a web application, to provide users with the function of drawing pixel art online. Figure 1 As shown, the method includes the following steps 101 to 104:

[0071] In step 101, in response to the user's request to draw a pixel art, the canvas data of the pixel art is obtained.

[0072] The client can be an app installed on the user's terminal or a web application. After entering the app, the user can request to draw pixel art online. For example, the user can choose from multiple pixel art materials provided by the app. These pixel art materials can be blank pixel art, pixel art with background textures, or pixel art that has already been partially drawn. At this point, the user issues a request to draw pixel art, and in response to the user's request, the client obtains the canvas data corresponding to the pixel art. In one embodiment of this application, the client can request the canvas data corresponding to the pixel art from the server.

[0073] In step 102, rendering the canvas according to the canvas data includes: generating an image sprite as the first layer of the canvas based on the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas.

[0074] After the client obtains the canvas data, it begins rendering the canvas. In this embodiment, instead of simply rendering directly based on the canvas data, a layered strategy is implemented during rendering: an image sprite is generated as the first layer of the canvas based on the canvas data; lines representing pixel grids are drawn as the second layer of the canvas; and a transparent canvas is drawn as the third layer of the canvas. The first layer image sprite is a single image, not individual canvas elements, so operations such as translation, scaling, or rotation of the canvas manipulate the image, eliminating the need for rendering the first layer. The second layer only contains lines, minimizing the cost of re-rendering during translation, scaling, or rotation. The third layer is a transparent canvas; when the user colors a pixel grid, they are essentially drawing a color block at the corresponding position on this transparent third layer. Therefore, only the third layer of the canvas needs to be rendered based on the user-drawn color block, resulting in low rendering costs.

[0075] In step 103, in response to the user's drawing operation on the canvas, the third layer of the canvas is re-rendered to display the pixel art after the drawing operation.

[0076] As mentioned earlier, when a user colors a cell drawn by a pixel, they are actually drawing a color block at the corresponding position on the third transparent canvas layer. The first and second layers remain unchanged. Therefore, it is only necessary to render the third layer of the canvas based on the color block drawn by the user.

[0077] In step 104, in response to the user's geometric transformation operation on the canvas, the image sprite of the first layer of the canvas is subjected to the corresponding geometric transformation processing, and the second and third layers of the canvas are re-rendered to display the pixel art after the geometric transformation operation.

[0078] When a user performs geometric transformations such as translation, scaling, or rotation on the canvas, the first layer can directly perform these operations on the image sprites without rendering. What needs to be re-rendered are the lines in the second layer and the color blocks drawn by the user in the third layer.

[0079] In this embodiment of the application, when drawing a pixel art rendering canvas, a canvas layering strategy is adopted to separate the parts that need to be re-rendered from those that do not, thereby avoiding repeated rendering as much as possible, thus improving performance and enhancing the user experience.

[0080] In one embodiment, the canvas data may include background texture data and historical drawing data. The background texture data is the background color of the pixel art when the user has not colored it; the historical drawing data is the drawing data generated after the user (including the local user and other users who have colored the pixel art) has colored it.

[0081] The steps to obtain the canvas data for pixel art may include: steps A1 to A4:

[0082] Step A1: Send a command to the server to obtain the canvas data for the number of pixels.

[0083] For example, the command to retrieve canvas data can include a unique identifier for the pixel art image selected by the user. The server stores the canvas data corresponding to the pixel art image.

[0084] Step A2: Receive the image link of the pixel art background and historical drawing data returned by the server;

[0085] Step A3: Obtain the background image based on the image link;

[0086] Step A4: Place the background image into the canvas and obtain the canvas's pixel data as the background image data.

[0087] In one embodiment of this application, the backend returns a link to a background image, the frontend obtains the image through the link, and then uses the drawImage method (an HTML5 function for drawing images in a Canvas, which can draw an image onto a canvas) to put the image onto the canvas, and then uses the getImageData method (an HTML5 function for obtaining pixel data in a Canvas) to obtain the pixel data of the canvas image as background image data.

[0088] In one embodiment of this application, sometimes the obtained background image is blurry. For example, if the background image obtained from a link is a bitmap, it will become increasingly blurry as the canvas is enlarged. In this case, when generating the image sprite, the following steps can be taken: first, obtain the color value data of the background image; then, use the color value data of the background image to generate a texture; and finally, generate an image using the texture. This results in a vector image, solving the problem of blurry background images. The specific steps are as follows:

[0089] B1. Create an empty canvas using document.createElement('canvas');

[0090] B2. Create an Image object and set its src to the original bitmap URL (Uniform Resource Locator). Note: Since cross-domain images cannot be placed in the canvas, you need to first send an AJAX (Asynchronous JavaScript and XML) request to obtain the image's blob (Binary Large Objects) binary data, then convert it to a URL, and then load it.

[0091] B3. After the image is loaded, call the canvas's drawImage method to place the Image object from step B2 into the canvas, specifying the image's width, height, and position on the canvas.

[0092] B4, call the canvas's getImageData method to get the image data at a specified position on the canvas, and you can get the r, g, b, a color value array corresponding to each pixel of the image;

[0093] B5. Convert the array obtained above into Uint8Array format, call the PIXI.Texture.fromBuffer method provided by pixi.js to pass in the values, and the texture will be generated.

[0094] B6 calls the `new PIXI.Sprite(texture)` function provided by pixi.js to create a sprite image using a texture and place it on the canvas. The resulting sprite image is a vector graphic and will not become blurry as the canvas is enlarged.

[0095] In one embodiment of this application, historical drawing data can be obtained by using paginated concurrent requests to retrieve all historical drawing data at once. Historical drawing data can be drawing data previously drawn by a local user for the same pixel, or drawing data previously drawn by other users for the same pixel and uploaded to the server for storage.

[0096] In one embodiment, such as Figure 2 As shown, the method further includes steps 105 to 106:

[0097] In step 105, the pixel art drawing data drawn by others is acquired in real time;

[0098] In step 106, the third layer of the canvas is re-rendered based on the data drawn by others.

[0099] In this embodiment, the coloring done by other users in the same pixel art can also be rendered in real time, enabling collaborative pixel art creation. That is, multiple users using different terminals can select the same pixel art on their terminals to display the canvas. The canvas has, for example, 100*100=10,000 squares. Each user can select a square on the canvas and color it arbitrarily. Multiple users using different terminals coloring the canvas together ultimately generate a single pixel art. In this embodiment, the users' drawing data is uploaded to the server for storage, and the drawing data of others is also retrieved to re-render the canvas, thereby updating and displaying the pixel art created by multiple users.

[0100] In one embodiment, the data drawn by others includes information such as the position of the drawn color blocks in the pixel art and the color of the color blocks. When re-rendering the canvas, the third layer of the canvas is re-rendered based on the position and color of the color blocks drawn by others in the pixel art, so that the canvas displays the pixel art after being colored by others and by the local user.

[0101] In one embodiment, a preset dataset can be established for the third layer of the canvas. Data to be rendered is added to or updated in the preset dataset based on the drawing operations of the local user and the drawing data obtained from others. The rendered data includes data on the color blocks painted by the local user and data on the color blocks painted by others. Each time the third layer of the canvas is rendered, rendering is performed based on this preset dataset.

[0102] Steps 105 and 106 above can be implemented after the canvas is rendered in step 102, that is, they can be performed synchronously with the user's local drawing and are not restricted by the order of the flowchart.

[0103] In one embodiment, the step of acquiring the pixel art drawing data of others in real time includes steps B1 to B2:

[0104] In step B1, a long connection is established with a server that stores other users' drawing data for the pixel art uploaded by other users.

[0105] In step B2, the server receives drawing data from others in real time via the long connection.

[0106] For example, a long connection can be established with the server using WebSocket (a network technology provided by HTML5 for full-duplex communication between browsers and servers) to obtain real-time updated drawing data from others.

[0107] In one embodiment, such as Figure 3 As shown, the method further includes steps 107 to 108:

[0108] In step 107, drawing data is generated in response to the user's drawing operation on the canvas.

[0109] Drawing data includes, for example, the position of the color block painted by the user in the pixel art, the color of the color block, etc.

[0110] In step 108, the drawing data is sent to the server so that the server stores the drawing data in correspondence with the pixel drawing.

[0111] When sending drawing data to the server, the identifier of the pixel art can be included at the same time. The server can use the stored drawing data as the historical drawing data of the pixel art, or push the received new drawing data to other users who are drawing in the same pixel art in real time. The latest multi-user collaborative pixel art can then be rendered on the other users' clients in real time.

[0112] Steps 107 and 108 above can be executed after the user performs the drawing operation, and are not restricted by the order of the flowchart.

[0113] The implementation process will be described in detail below through examples.

[0114] Figure 4 This is a schematic flowchart illustrating a method for drawing pixel art according to an exemplary embodiment. Figure 4 As shown, it includes the following steps:

[0115] Step 401: The client receives a request from the user to draw a pixel art image.

[0116] Step 402: The client establishes a long connection (websocket) with the server and sends a command to the server to retrieve the canvas data of the pixel art.

[0117] Step 403: The server returns the image link of the pixel art background and historical drawing data.

[0118] Step 404: The client obtains the background image data based on the background image link.

[0119] Step 405: The client uses a layered strategy to render the canvas.

[0120] For example, the client-side rendering technology is as follows: The underlying layer uses the pixi.js rendering engine (pixi.js is an open-source HTML5 2D rendering engine implemented using WebGL (which provides hardware rendering acceleration)). First, a new canvas application (APP) is created using pixi.js. Then, a viewport that can be panned and scaled is generated using pixi-viewport (a plugin provided by pixi that provides a dynamic view area, enabling movement, scaling, etc.) and placed into the entire canvas application. Next, content is added to the canvas, divided into three layers from bottom to top: The first layer: the initial state of the canvas when entering the page. Based on the obtained background texture data and historical drawing data, the `new` function provided by pixi.js is called. PIXI.Sprite generates a single image sprite from the PIXI framework based on background texture data and historical rendering data, placing it on the canvas. This is a single image, not individual canvas elements, so panning and scaling manipulate the image itself, eliminating the need to render the entire canvas. Otherwise, thousands of cells on the canvas would need to be re-rendered with each pan or scale, significantly impacting performance. The second layer draws the borders of all cells. Since this layer only contains lines, the cost of re-rendering during panning and scaling is relatively low. The third layer draws a transparent canvas. When the user colors a cell, they are essentially drawing a color block at the corresponding position on this transparent canvas. Panning and scaling only require rendering the cells that the user has modified, avoiding the need to re-render all cells.

[0121] Step 406: In response to the user's drawing operation on the canvas, the client re-renders the third layer of the canvas to display the pixel art after the drawing operation.

[0122] Step 407: In response to the user's geometric transformation operation on the canvas, the client performs the corresponding geometric transformation on the image sprite of the first layer of the canvas, and re-renders the second and third layers of the canvas to display the pixel art after the geometric transformation operation.

[0123] Step 408: The server pushes the pixel art data drawn by others to the client in real time via a long connection.

[0124] Step 409: The client re-renders the third layer of the canvas based on the received drawing data from others, so that the canvas displays the pixel art after being colored by others and by the local user.

[0125] Step 410: The client responds to the user's drawing operation on the canvas and generates drawing data.

[0126] Step 411: The client sends the generated drawing data to the server so that the server stores the drawing data in correspondence with the pixel drawing.

[0127] like Figure 5 As shown Figure 4 A schematic diagram of the principle of the embodiment:

[0128] The data in this application includes: canvas data comprising two layers, background texture data and historical data; that is, when the user has not filled in any color, the background texture color is rendered, and after the user fills in any color, the color filled in by the user is rendered. The data also includes persistent connection messages. Because multiple people are collaborating on a single canvas, a persistent connection is established using WebSocket to refresh the canvas data in real time; therefore, only the third layer of the canvas is updated.

[0129] Three-layer canvas: After all data is obtained, the canvas can be rendered. The underlying layer uses the pixi.js rendering engine. First, pixi.js is used to initially draw a canvas application. Then, pixi-viewport is used to generate a container that can be panned and scaled and placed into the entire canvas application. Next, content is added to the canvas, which is divided into three layers from bottom to top. The first layer: The initial state of the canvas when entering the page. Based on the above data, a pixi image sprite is generated and placed on the canvas. It is a whole image, not individual canvas elements. This way, panning and scaling operate on the image without rendering the canvas. Otherwise, every panning and scaling would require re-rendering thousands of cells on the canvas, which would greatly affect performance. The second layer: Draws the borders of all cells, which are only lines. The cost of re-rendering during panning and scaling is small. The third layer: Draws a transparent canvas. When the user colors a cell, a color block is drawn at the corresponding position on this transparent canvas. Figure 5 When the canvas is panned or scaled, only the cells that the user has changed need to be rendered; there is no need to render all cells repeatedly.

[0130] The underlying support includes technologies such as pixi.js, pixi-viewport, and websocket.

[0131] The following are embodiments of the apparatus of the present invention, which can be used to execute embodiments of the method of the present invention.

[0132] Figure 6 This is a block diagram illustrating an apparatus for drawing pixel art according to an exemplary embodiment. The apparatus for drawing pixel art can be a server or part of a server, or a terminal or part of a terminal. The apparatus for drawing pixel art can be implemented as part or all of an electronic device through software, hardware, or a combination of both. Figure 6 As shown, the apparatus for drawing pixel art includes:

[0133] The first acquisition module 601 is used to acquire the canvas data of the pixel art in response to the user's request to draw pixel art.

[0134] The rendering module 602 is used to render the canvas according to the canvas data, including: generating an image sprite as the first layer of the canvas according to the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas.

[0135] The first processing module 603 is used to re-render the third layer of the canvas in response to the user's drawing operation on the canvas to display the pixel art after the drawing operation.

[0136] The second processing module 604 is used to respond to the user's geometric transformation operation on the canvas, perform corresponding geometric transformation processing on the image sprite of the first layer of the canvas, and re-render the second and third layers of the canvas to display the pixel art after the geometric transformation operation.

[0137] In one embodiment, the canvas data includes background texture data and historical drawing data; the first acquisition module 601 is used for:

[0138] Send a command to the server to retrieve canvas data;

[0139] Receive the background texture image link and historical drawing data returned by the server;

[0140] Obtain the background image from the provided image link;

[0141] Place the background image onto the canvas and use the canvas's pixel data as the background image data.

[0142] In one embodiment, the device further includes:

[0143] The second acquisition module is used to acquire the pixel art's drawing data from other people in real time.

[0144] The third processing module is used to re-render the third layer of the canvas based on data drawn by others.

[0145] In one embodiment, the second acquisition module is used to:

[0146] A long connection is established with a server that stores other users' drawing data for the pixel art uploaded by other users;

[0147] Receive in real time drawing data from others sent by the server through the long connection.

[0148] In one embodiment, the device further includes:

[0149] The generation module is used to generate drawing data in response to user drawing operations on the canvas;

[0150] The sending module is used to send the drawing data to the server so that the server stores the drawing data in correspondence with the pixel drawing.

[0151] Figure 7 This is a block diagram illustrating an apparatus 70 for drawing pixel art according to an exemplary embodiment. The apparatus may be a server or part of a server, or a terminal or part of a terminal. The apparatus includes:

[0152] Processor 701;

[0153] Memory 702 is used to store executable instructions of processor 701;

[0154] The processor 701 is configured as follows:

[0155] In response to a user's request to draw a pixel art image, obtain the canvas data for the pixel art image;

[0156] Rendering a canvas based on the canvas data includes: generating an image sprite as the first layer of the canvas based on the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas.

[0157] In response to the user's drawing operation on the canvas, the third layer of the canvas is re-rendered to display the pixel art after the drawing operation.

[0158] In response to the user's geometric transformation operation on the canvas, the image sprite of the first layer of the canvas is subjected to the corresponding geometric transformation processing, and the second and third layers of the canvas are re-rendered to display the pixel art after the geometric transformation operation.

[0159] Figure 8 This is a block diagram illustrating an apparatus 800 for drawing pixel art according to an exemplary embodiment. The apparatus may be a computer, server, etc.

[0160] The device may include one or more of the following components: processing component 802, memory 804, power supply component 806, multimedia component 808, audio component 810, input / output (I / O) interface 812, sensor component 814, and communication component 816.

[0161] Processing component 802 typically controls the overall operation of device 800, such as operations associated with display, telephone calls, data communication, camera operation, and recording operations. Processing component 802 may include one or more processors 820 to execute instructions to perform all or part of the steps of the methods described above. Furthermore, processing component 802 may include one or more modules to facilitate interaction between processing component 802 and other components. For example, processing component 802 may include a multimedia module to facilitate interaction between multimedia component 808 and processing component 802.

[0162] Memory 804 is configured to store various types of data to support the operation of device 800. Examples of such data include instructions for any application or method operating on device 800, contact data, phonebook data, messages, pictures, videos, etc. Memory 804 can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as static random access memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0163] Power supply component 806 provides power to various components of device 800. Power supply component 806 may include a power management system, one or more power sources, and other components associated with generating, managing, and distributing power to device 800.

[0164] Multimedia component 808 includes a screen that provides an output interface between device 800 and the user. In some embodiments, the screen may include a liquid crystal display (LCD) and a touch panel (TP). If the screen includes a touch panel, the screen may be implemented as a touchscreen to receive input signals from the user. The touch panel includes one or more touch sensors to sense touches, swipes, and gestures on the touch panel. The touch sensors may sense not only the boundaries of the touch or swipe action but also the duration and pressure associated with the touch or swipe operation. In some embodiments, multimedia component 808 includes a front-facing camera and / or a rear-facing camera. When device 800 is in an operating mode, such as a shooting mode or a video mode, the front-facing camera and / or the rear-facing camera may receive external multimedia data. Each front-facing camera and rear-facing camera may be a fixed optical lens system or have focal length and optical zoom capabilities.

[0165] Audio component 810 is configured to output and / or input audio signals. For example, audio component 810 includes a microphone (MIC) configured to receive external audio signals when device 800 is in an operating mode, such as call mode, recording mode, and voice recognition mode. The received audio signals may be further stored in memory 804 or transmitted via communication component 816. In some embodiments, audio component 810 also includes a speaker for outputting audio signals.

[0166] I / O interface 812 provides an interface between processing component 802 and peripheral interface modules, such as keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to, home buttons, volume buttons, power buttons, and lock buttons.

[0167] Sensor assembly 814 includes one or more sensors for providing status assessments of various aspects of device 800. For example, sensor assembly 814 may detect the on / off state of device 800, the relative positioning of components such as the display and keypad of device 800, changes in the position of device 800 or a component of device 800, the presence or absence of user contact with device 800, the orientation or acceleration / deceleration of device 800, and temperature changes of device 800. Sensor assembly 814 may include a proximity sensor configured to detect the presence of nearby objects without any physical contact. Sensor assembly 814 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, sensor assembly 814 may also include an accelerometer, a gyroscope, a magnetometer, a pressure sensor, or a temperature sensor.

[0168] Communication component 816 is configured to facilitate wired or wireless communication between device 800 and other devices. Device 800 can access wireless networks based on communication standards, such as walkie-talkie networks, WiFi, 2G, 3G, 4G, or 5G, or combinations thereof. In one exemplary embodiment, communication component 816 receives broadcast signals or broadcast-related information from an external broadcast management system via a broadcast channel. In one exemplary embodiment, communication component 816 also includes a near-field communication (NFC) module to facilitate short-range communication. For example, the NFC module may be implemented based on radio frequency identification (RFID) technology, Infrared Data Association (IrDA) technology, ultra-wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.

[0169] In an exemplary embodiment, the apparatus 800 may be implemented by one or more application-specific integrated circuits (ASICs), digital signal processors (DSPs), digital signal processing devices (DSPDs), programmable logic devices (PLDs), field-programmable gate arrays (FPGAs), controllers, microcontrollers, microprocessors, or other electronic components to perform the methods described above.

[0170] In an exemplary embodiment, a non-transitory computer-readable storage medium including instructions is also provided, such as a memory 804 including instructions, which can be executed by a processor 820 of the device 800 to perform the above-described method. For example, the non-transitory computer-readable storage medium may be a ROM, random access memory (RAM), CD-ROM, magnetic tape, floppy disk, and optical data storage device, etc.

[0171] A non-transitory computer-readable storage medium, when instructions in the storage medium are executed by a processor of a device 800, enables the device 800 to perform the above-described method for drawing pixel art, the method comprising:

[0172] In response to a user's request to draw a pixel art image, obtain the canvas data for the pixel art image;

[0173] Rendering a canvas based on the canvas data includes: generating an image sprite as the first layer of the canvas based on the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas.

[0174] In response to the user's drawing operation on the canvas, the third layer of the canvas is re-rendered to display the pixel art after the drawing operation.

[0175] In response to the user's geometric transformation operation on the canvas, the image sprite of the first layer of the canvas is subjected to the corresponding geometric transformation processing, and the second and third layers of the canvas are re-rendered to display the pixel art after the geometric transformation operation.

[0176] Other embodiments of the invention will readily occur to those skilled in the art upon consideration of the specification and practice of the invention described herein. This application is intended to cover any variations, uses, or adaptations of the invention that follow the general principles of the invention and include common knowledge or customary techniques in the art not invented herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of the invention are indicated by the following claims.

[0177] It should be understood that the present invention is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of the invention is limited only by the appended claims.

Claims

1. A method for drawing pixel art, characterized in that, include: In response to a user's request to draw a pixel art image, obtain the canvas data for the pixel art image; Rendering a canvas based on the canvas data includes: generating an image sprite as the first layer of the canvas based on the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas. In response to a user's drawing operation on the canvas, the third layer of the canvas is re-rendered to display the pixel art after the drawing operation. In response to the user's geometric transformation operation on the canvas, the image sprites of the first layer of the canvas are subjected to corresponding geometric transformation processing, and the first layer of the canvas is not re-rendered; the lines of the second layer of the canvas and the color blocks drawn by the user in the third layer are re-rendered to display the pixel art after the geometric transformation operation. The first layer of the image sprite is a single image. The canvas data includes a background texture image. Generating an image sprite as the first layer of the canvas based on the canvas data includes: if the background texture image is a bitmap, creating a blank canvas and placing the background texture image into the blank canvas; obtaining the image data in the blank canvas to obtain the color value data corresponding to each pixel; converting the array of color value data into Uint8Array format; generating a texture based on the obtained color value data of the background texture image; generating a vector image through the texture; and generating an image sprite as the first layer of the canvas based on the vector image.

2. The method according to claim 1, characterized in that, The canvas data includes background texture data and historical drawing data; the process of obtaining the canvas data for pixel art includes: Send a command to the server to retrieve the canvas data of the pixel art; Receive the background image link and historical drawing data of the pixel drawing returned by the server; Obtain the background image from the provided image link; Place the background image onto the canvas and use the canvas's pixel data as the background image data.

3. The method according to claim 1, characterized in that, The method further includes: Real-time acquisition of other people's drawing data for the pixel art; The third layer of the canvas is re-rendered based on data drawn by others.

4. The method according to claim 3, characterized in that, The real-time acquisition of other people's drawing data of the pixel art includes: A long connection is established with a server that stores other users' drawing data for the pixel art uploaded by other users; Receive in real time drawing data from others sent by the server through the long connection.

5. The method according to claim 1, characterized in that, The method further includes: In response to the user's drawing actions on the canvas, generate drawing data; The drawing data is sent to the server so that the server stores the drawing data in correspondence with the pixel drawing.

6. An apparatus for drawing pixel art, characterized in that, include: The first acquisition module is used to acquire the canvas data of the pixel art in response to the user's request to draw pixel art; The rendering module is used to render the canvas according to the canvas data, including: generating an image sprite as the first layer of the canvas according to the canvas data; drawing lines as pixel grids as the second layer of the canvas; and drawing a transparent canvas as the third layer of the canvas. The first processing module is used to respond to the user's drawing operation on the canvas by re-rendering the third layer of the canvas to display the pixel art after the drawing operation. The second processing module is used to respond to the user's geometric transformation operation on the canvas, perform corresponding geometric transformation processing on the image sprite of the first layer of the canvas, and the first layer of the canvas is not re-rendered; and re-render the lines of the second layer of the canvas and the color blocks drawn by the user in the third layer to display the pixel art after the geometric transformation operation. The first layer of the image sprite is a single image. The canvas data includes a background texture image. Generating an image sprite as the first layer of the canvas based on the canvas data includes: if the background texture image is a bitmap, creating a blank canvas and placing the background texture image into the blank canvas; obtaining the image data in the blank canvas to obtain the color value data corresponding to each pixel; converting the array of color value data into Uint8Array format; generating a texture based on the obtained color value data of the background texture image; generating a vector image through the texture; and generating an image sprite as the first layer of the canvas based on the vector image.

7. The apparatus according to claim 6, characterized in that, The canvas data includes background texture data and historical drawing data; the first acquisition module is used for: Send a command to the server to retrieve canvas data; Receive the background texture image link and historical drawing data returned by the server; Obtain the background image from the provided image link; Place the background image onto the canvas and use the canvas's pixel data as the background image data.

8. The apparatus according to claim 6, characterized in that, The device further includes: The second acquisition module is used to acquire the pixel art's drawing data from other people in real time. The third processing module is used to re-render the third layer of the canvas based on data drawn by others.

9. The apparatus according to claim 8, characterized in that, The second acquisition module is used for: A long connection is established with a server that stores other users' drawing data for the pixel art uploaded by other users; Receive in real time drawing data from others sent by the server through the long connection.

10. The apparatus according to claim 6, characterized in that, The device further includes: The generation module is used to generate drawing data in response to user drawing operations on the canvas; The sending module is used to send the drawing data to the server so that the server stores the drawing data in correspondence with the pixel drawing.

11. An apparatus for drawing pixel art, characterized in that, include: processor; A memory for storing processor-executable instructions; wherein the processor is configured to: in response to a user's request to draw pixel art, acquire canvas data for pixel art; render the canvas according to the canvas data, including: generating an image sprite as the first layer of the canvas based on the canvas data; drawing lines as pixel art grids as the second layer of the canvas; drawing a transparent canvas as the third layer of the canvas; in response to a user's drawing operation on the canvas, re-rendering the third layer of the canvas to display the pixel art after the drawing operation; in response to a user's geometric transformation operation on the canvas, performing corresponding geometric transformation processing on the image sprites of the first layer of the canvas, without re-rendering the first layer of the canvas; and processing the lines of the second layer of the canvas and the user's drawing operation in the third layer of the canvas. The drawn color blocks are re-rendered to display the pixel art after geometric transformation. The first layer of the image sprite is a single, unified image. The canvas data includes a background texture image. Generating an image sprite as the first layer of the canvas based on the canvas data includes: if the background texture image is a bitmap, creating a blank canvas and placing the background texture image into the blank canvas; obtaining the image data from the blank canvas to obtain the color value data corresponding to each pixel; converting the array of color value data into a Uint8Array format; generating a texture based on the obtained color value data of the background texture image; generating a vector image through the texture; and generating an image sprite as the first layer of the canvas based on the vector image.

12. A computer-readable storage medium storing computer instructions thereon, characterized in that, When executed by the processor, this instruction implements the steps of the method according to any one of claims 1-5.

Images