Bitmap font implementation method, device, electronic device and storage medium

Abstract

The embodiments of the present invention provide a method, device, electronic device and storage medium for implementing a bitmap font, and relate to the field of computer technology. The method comprises: obtaining a source image including a plurality of characters, and obtaining a configuration file including source texture area data of each character in the source image; obtaining the scaling ratio and offset of the source bitmap text corresponding to the text to be rendered on the target canvas according to the configuration file; obtaining the source texture area data of each character to be rendered in the text to be rendered according to the configuration file; determining the target texture area data of each character to be rendered according to the scaling ratio and offset and the source texture area data of each character to be rendered; drawing each character to be rendered on the target canvas according to the target texture area data of each character to be rendered, and generating the target bitmap text. The technical solution of the embodiment of the present invention does not need to increase the document object model node of HTML when the length of the displayed character increases, thereby improving the rendering performance.

Description

Technical Field

[0001] The present invention relates to the field of computer technology, and in particular to a bitmap font implementation method, a bitmap font implementation device, an electronic device and a computer-readable storage medium. Background Art

[0002] Bitmap font, also known as bitmap text, is a technology that uses images instead of special effect text. It is widely used in Web (World Wide Web) development and game development.

[0003] In web development and game development, some special fonts or artistic fonts are often used to show cooler effects. If special fonts or artistic fonts are directly built into web pages and game programs, the loading and running speed will be slowed down. Using bitmap fonts can solve this problem well. At present, in a technical solution to implement bitmap fonts, refer to Figure 1 As described above, the bitmap font is exported and named according to a single picture, and the relevant CSS (Cascading Style Sheets) style file and HTML (HyperText Markup Language) code are written. The src attribute of the img tag in HTML is used to load the image address of the corresponding character, such as the character "520", and the corresponding HTML code is run to display the bitmap font. The display effect is as follows. Figure 2 shown.

[0004] However, in this technical solution, as the length of displayed characters increases, the number of DOM (Document Object Model) nodes corresponding to HTML will increase, thereby causing the problem of reduced rendering performance.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present invention, and therefore may include information that does not constitute the prior art known to ordinary technicians in the field. Summary of the invention

[0006] The purpose of the embodiments of the present invention is to provide a bitmap font implementation method, a bitmap font implementation device, an electronic device and a computer-readable storage medium, thereby overcoming one or more problems caused by the limitations and defects of the related art at least to a certain extent.

[0007] According to a first aspect of an embodiment of the present invention, a method for implementing a bitmap font is provided, comprising: obtaining a source image including a plurality of characters, and obtaining a configuration file including source texture area data of each character in the source image, the source texture area data including position and size information of each character in the source image; determining a scaling ratio and an offset of a source bitmap text corresponding to a text to be rendered on a target canvas according to the configuration file, the source bitmap text being a text composed of characters in the source image corresponding to the characters to be rendered in the text to be rendered; obtaining source texture area data of each character to be rendered in the text to be rendered according to the configuration file; determining target texture area data of each character to be rendered according to the scaling ratio and the offset and the source texture area data of each character to be rendered, the target texture area data including position and size information of each character to be rendered on the target canvas; drawing each character to be rendered on the target canvas according to the target texture area data of each character to be rendered to generate a target bitmap text.

[0008] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the bitmap font implementation method also includes: configuring a character template, the character template including the correspondence between each character and the single-character source image of the character; obtaining the mapping relationship between each character and the single-character source image and source texture area data of the character according to the configuration file and the character template.

[0009] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the mapping relationship between each character and the single-character source image and source texture area data of the character is obtained according to the configuration file and the character template, including: traversing each character in the character template to obtain the identification information of the single-character source image of each character; obtaining the source texture area data of each character from the configuration file based on the identification information; obtaining the mapping relationship between each character and the single-character source image and source texture area data of the character.

[0010] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the scaling ratio and offset of the source bitmap text corresponding to the text to be rendered on the target canvas are determined according to the configuration file, including: obtaining the logical size of the source bitmap text corresponding to the text to be rendered according to the text to be rendered and the mapping relationship; obtaining the scaling ratio of the source bitmap text according to the target canvas size and the logical size; obtaining the offset of the source bitmap text on the target canvas according to the logical size and the scaling ratio.

[0011] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the source texture area data of each character to be rendered includes source position information and source size information of each character to be rendered; the target texture area data of each character to be rendered includes target position information and target size information of each character to be rendered.

[0012] In some exemplary embodiments of the present invention, based on the aforementioned solution, the configuration file is a JSON file or a CSS file.

[0013] In some exemplary embodiments of the present invention, based on the above solution, the target canvas is a Canvas canvas.

[0014] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the target texture area data of each character to be rendered is determined according to the scaling ratio, the offset and the source texture area data of each character to be rendered, including: obtaining the position and size information of the corresponding character in the source image from the source texture area data of each selected character to be rendered; determining the position and size information of each character to be rendered on the target canvas based on the scaling ratio, the offset and the position and size information; and using the position and size information of each character to be rendered on the target canvas as the target texture area data of each character to be rendered.

[0015] According to a second aspect of an embodiment of the present invention, a method for implementing a bitmap font is provided, comprising: a source information acquisition unit, configured to acquire a source image including a plurality of characters, and obtain a configuration file including source texture area data of each character in the source image; a scaling ratio and offset determination unit, configured to determine a scaling ratio and an offset of a source bitmap text corresponding to the text to be rendered on a target canvas according to the configuration file; a source texture area acquisition unit, configured to obtain source texture area data of each character to be rendered in the text to be rendered according to the configuration file; a target texture area determination unit, configured to determine target texture area data of each character to be rendered according to the scaling ratio and the offset and the source texture area data of each character to be rendered; and a bitmap text generation unit, configured to draw each character to be rendered on the target canvas according to the target texture area data of each character to be rendered, and generate a target bitmap text.

[0016] According to a third aspect of an embodiment of the present invention, there is provided an electronic device, comprising: a processor; and a memory, wherein the memory stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the bitmap font implementation method as described in any one of the above is implemented.

[0017] According to a fourth aspect of an embodiment of the present invention, there is provided a computer-readable storage medium on which a computer program is stored. When the computer program is executed by a processor, the method for realizing a bitmap font as described in any one of the above is implemented.

[0018] In the technical solutions provided by some embodiments of the present invention, on the one hand, the scaling ratio and offset of the source bitmap text corresponding to the text to be rendered on the target canvas are determined according to a configuration file including source texture area data of each character in the source image, so that the scaling ratio and offset of the source character corresponding to each character to be rendered on the target canvas can be determined; on the other hand, the target texture area data of each character to be rendered is determined according to the scaling ratio and offset and the source texture area, and each character to be rendered is drawn on the target canvas according to the target texture area data. Since the scaling ratio and offset of each character to be rendered are the same, a similar rendering process is performed on the single-character source image corresponding to each character to be rendered. When the displayed character length increases, there is no need to increase the document object model node of HTML, thereby improving the rendering performance.

[0019] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the invention. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The drawings herein are incorporated into and constitute a part of the specification, showing embodiments consistent with the present invention, and together with the specification, are used to explain the principles of the present invention. Obviously, the drawings described below are only some embodiments of the present invention, and for those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative work. In the drawings:

[0021] Figure 1 A schematic diagram showing a single picture of multiple characters in a technical solution is shown;

[0022] Figure 2 Shows Figure 1 A schematic diagram of the implementation effect of the bitmap font implementation method in the technical solution shown;

[0023] Figure 3 A schematic diagram of a source image containing multiple characters in another technical solution is shown;

[0024] Figure 4 Shows Figure 3 The schematic diagram of the configuration file containing the position and size information of each character in the source image in the technical solution shown;

[0025] Figure 5 Shows Figure 3 A schematic diagram of the implementation effect of the bitmap font implementation method in the technical solution shown;

[0026] Figure 6 A schematic flow chart showing a method for implementing a bitmap font according to some embodiments of the present invention is shown;

[0027] Figure 7 A schematic diagram showing a configuration file containing position and size information of each character in a source image according to some embodiments of the present invention;

[0028] Figure 8 A schematic diagram showing a source texture region and a target texture region according to some embodiments of the present invention;

[0029] Fig. 9 A schematic diagram showing a character template according to some embodiments of the present invention;

[0030] Fig.10 A schematic diagram of a process of determining a scaling ratio and an offset of a source bitmap text on a target canvas according to some embodiments of the present invention is shown;

[0031] Fig.11 A schematic diagram of a process for determining a logical size according to some embodiments of the present invention is shown;

[0032] Fig.12 A schematic diagram showing determination of a logical size according to some embodiments of the present invention is shown;

[0033] Fig.13 A schematic flow chart showing a method for implementing a bitmap font according to some other embodiments of the present invention is shown;

[0034] Fig.14 A schematic diagram showing the implementation effect of a bitmap font implementation method according to some embodiments of the present invention;

[0035] Fig.15 A schematic block diagram showing a bitmap font implementation device according to some exemplary embodiments of the present invention is shown;

[0036] Fig.16 A schematic diagram of the structure of a computer system suitable for implementing an electronic device of an embodiment of the present invention is shown. DETAILED DESCRIPTION

[0037] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in many forms and should not be construed as limited to the embodiments set forth herein; rather, these embodiments are provided so that the present invention will be comprehensive and complete and fully convey the concepts of the example embodiments to those skilled in the art. The same reference numerals in the figures represent the same or similar parts, and thus their repeated description will be omitted.

[0038] In addition, the described features, structures or characteristics may be combined in one or more embodiments in any suitable manner. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present invention. However, those skilled in the art will appreciate that the technical solution of the present invention can be practiced without one or more of the specific details, or other methods, components, devices, steps, etc. may be adopted. In other cases, known methods, devices, implementations or operations are not shown or described in detail to avoid blurring various aspects of the present invention.

[0039] The block diagrams shown in the accompanying drawings are merely functional entities and do not necessarily correspond to physically independent entities. That is, these functional entities may be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0040] The flowcharts shown in the accompanying drawings are only exemplary and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps can be decomposed, and some operations / steps can be combined or partially combined, so the actual execution order may change according to actual conditions.

[0041] In another technical solution, a single image of the artistic characters is merged into a large image, i.e., the source image, through a merging tool such as spritesmith, and the position and size information of the corresponding single image in the source image is exported. Figure 3 As shown in the figure, the style file nums.css that describes the position and size information of a single image in the source image is as follows Figure 4 As shown, in Figure 4 In the example, the character "0" is 80 pixels wide and 135 pixels high in the source image, and is located at (0, 0) pixels. By writing CSS style files and HTML codes corresponding to the characters in the text to be rendered, such as "520", the class attribute of the div tag in HTML is used to assign the style name of the corresponding character image. Then, run the corresponding HTML code to obtain the following Figure 5 The effect is shown.

[0042] However, in this technical solution, as the length of displayed characters increases, the number of nodes of the corresponding HTML document object model increases, which still causes the problem of reduced rendering performance; in addition, when different texts are dynamically displayed in a specific scene, the HTML DOM nodes are frequently operated, resulting in reduced rendering performance;

[0043] Therefore, in an exemplary embodiment of the present invention, a bitmap font implementation method is firstly provided. Figure 6A schematic flow chart of a method for implementing a bitmap font according to some embodiments of the present invention is shown.

[0044] Reference Figure 6 As shown, in step S610, a source image including a plurality of characters is acquired, and a configuration file including source texture region data of each character in the source image is obtained, wherein the source texture region data includes position and size information of each character in the source image.

[0045] In an example embodiment, multiple characters, such as pictures of artistic words, can be pre-merged into a large picture, namely a source picture, and a configuration file, such as a JSON file, can be used to describe the source texture area data of a single picture corresponding to each character in the source picture, and the source texture area data includes the source position information and source size information of each character in the source picture. In addition, the configuration file can also include: the name of the source picture, the size information of the source picture, such as width, height, etc. The obtained source picture and the configuration file are cached, such as cached in the program memory, and the source picture and the configuration file including the source texture area data of each character in the source picture are obtained from the cache.

[0046] It should be noted that, in this example embodiment, the configuration file is a JSON file, but in the example embodiment of the present invention, the configuration file may also be a file in other appropriate forms such as a CSS file, which is also within the protection scope of the present invention.

[0047] In step S620, the scaling ratio and offset of the source bitmap text corresponding to the text to be rendered on the target canvas are determined according to the configuration file, wherein the source bitmap text is text composed of characters in the source image corresponding to the characters to be rendered in the text to be rendered.

[0048] In an example embodiment, the text to be rendered is text content input by the user, such as the text content "520" input by the user. The size of the corresponding character is obtained from the configuration file according to the characters in the text to be rendered, and the logical size of the text to be rendered is determined based on the size of the corresponding character and the horizontal spacing between each character. The logical size of the text to be rendered is the size of each character in the text to be rendered that remains the same as that in the source image and takes into account the spacing between characters.

[0049] Furthermore, in an exemplary embodiment, the scaling ratio of the text to be rendered on the target canvas is determined based on the logical size of the text to be rendered and the size of the target canvas; the offset of the source bitmap text on the target canvas is determined according to the logical size of the text to be rendered and the scaling ratio. The offset of the source bitmap text on the target canvas is related to the layout of the source bitmap text on the target canvas, for example, whether the entire bitmap text is laid out in the center of the target canvas, or located in the upper left corner of the target canvas, or located in the lower right corner of the target canvas. Taking the layout of the bitmap text in the center of the target canvas as an example, the overall offset of the bitmap text on the target canvas is determined according to the logical size, scaling ratio and the layout position of the bitmap text on the target canvas, for example, 25 pixels are left blank on the left and 25 pixels are also left blank on the right.

[0050] In step S630, source texture region data of each character to be rendered in the text to be rendered is obtained according to the configuration file.

[0051] In an example embodiment, source texture area data of a corresponding character is obtained from a configuration file according to each character to be rendered in the text to be rendered, and the source texture area data of each character to be rendered includes source position information and source size information of each character to be rendered. For example, the source texture area data of each character to be rendered may include: the coordinates of a vertex of a single image of the character in the source image, and the width and height of the single image.

[0052] In an example embodiment, the identifier of each character in the text to be rendered, such as the text "520", is traversed, and the source position of each character in the source image corresponding to each character is obtained from the configuration file based on the identifier of each character, that is, four parameter values ​​sx, sy, sw, and sh. Among them, sx represents the upper left corner X coordinate of the rectangular selection box of the source character image that needs to be drawn in the target canvas; sy represents the upper left corner Y coordinate of the rectangular selection box of the source character image that needs to be drawn in the target canvas; sw represents the width of the rectangular selection box of the source character image that needs to be drawn in the target canvas; sh represents the height of the rectangular selection box of the source character image that needs to be drawn in the target canvas.

[0053] Reference Figure 7 As shown, the configuration file may include the size of the source image, the position and size of the single image of each character. The source texture area data of each character to be rendered is the position and size information of the single image of each character. The identifier of the source image is "nums.png", the width of the source image is 420, and the height is 275; the x-axis of the character "num_0.png" is 0, the y-axis is 0, the width is 80, and the height is 135; the x-axis of the character "num_1.png" is 85, the y-axis is 0, the width is 80, and the height is 135.

[0054] In step S640, target texture region data of each character to be rendered is determined according to the scaling ratio, the offset and the source texture region data of each character to be rendered, wherein the target texture region data includes position and size information of each character to be rendered on the target canvas.

[0055] In an example embodiment, each character to be rendered in the text to be rendered is traversed, and target texture area data of each character to be rendered is determined according to the source texture data, scaling ratio, and offset of each character to be rendered. The target texture area data of each character to be rendered includes target position information and target size information of each character to be rendered.

[0056] Specifically, the source position information and source size information of the corresponding character are obtained from the source texture area data of each character to be rendered, referring to Figure 8 As shown, the four parameter values ​​of sx, sy, sw and sh are used to determine the target position of each character to be rendered on the target canvas based on the above scaling ratio and offset, that is, Figure 8 The four parameter values ​​​​of dx, dy, dw, and dh in the target canvas are as follows: dx represents the position of the upper left corner of the target canvas on the X axis; dy represents the position of the upper left corner of the target canvas on the Y axis; dw represents the width of the image drawn on the target canvas; dh represents the height of the image drawn on the target canvas.

[0057] In step S650, each character to be rendered is drawn on the target canvas according to the target texture region data of each character to be rendered, so as to generate a target bitmap text.

[0058] In an exemplary embodiment, based on the target texture region data of each character to be rendered, the source texture region of each character to be rendered, and the source map of the corresponding character, each character to be rendered is drawn on the target canvas to generate a target bitmap text.

[0059] according to Figure 6 The bitmap font implementation method shown in, on the one hand, determines the scaling ratio and offset of the source bitmap text corresponding to the to-be-rendered text on the target canvas according to a configuration file including source texture area data of each character in the source image, and can determine the scaling ratio and offset of the source character corresponding to each to-be-rendered character on the target canvas; on the other hand, determines the target texture area data of each to-be-rendered character according to the scaling ratio and offset and the source texture area, and draws each to-be-rendered character on the target canvas according to the target texture area data. Since the scaling ratio and offset of each to-be-rendered character are the same, a similar rendering process is performed on the single-character source image corresponding to each to-be-rendered character. When the displayed character length increases, there is no need to increase the HTML document object model node, thereby improving the rendering performance.

[0060] Furthermore, in the exemplary embodiment, taking the target canvas as a canvas canvas as an example, when drawing the characters to be rendered on the target canvas, the method _context.drawImage(imageData, srcRect.x, srcRect.y, srcRect.width, srcRect.height, dstRect.x, dstRect.y, dstRect.width, dstRect.height) of the canvas context (handle) can be used to draw the bitmap text of the corresponding characters. The drawImage method is a method in the Canvas 2D API (Application Program Interface): _context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh) provides a variety of ways to draw images on Canvas. Refer to Figure 8 As shown, the principle of bitmap text drawing is as follows: the parameter image represents the character element drawn to the context, such as the above Figure 8 The source image is "5". In this example embodiment, any canvas image source is allowed; the parameter dx indicates the position of the upper left corner of the target canvas on the target canvas on the X axis; the parameter dy indicates the position of the upper left corner of the target canvas on the Y axis on the target canvas; the parameter dw indicates the width of the image drawn on the target canvas, allowing the drawn image to be scaled; the parameter dh indicates the height of the image drawn on the target canvas, allowing the drawn image to be scaled; the parameter sx indicates the upper left corner X coordinate of the source image's rectangular selection box that needs to be drawn into the target canvas context; the parameter sy indicates the upper left corner Y coordinate of the source image's rectangular selection box that needs to be drawn into the target canvas context; the parameter sw indicates the width of the source image's rectangular selection box that needs to be drawn into the target context; the parameter sh indicates the height of the source image's rectangular selection box that needs to be drawn into the target canvas context.

[0061] In addition, in the exemplary embodiment, a character template is configured, which includes the correspondence between each character and the single character source image of the character; by configuring the character template, the scalability of the character can be improved. For example, by configuring the character template, in the source image "nums.png", the characters 01234845679 may not be arranged in a strict order. Fig. 9 As shown, in the character template, "0" is the keyword of the character, i.e., key, and "num_0.png" is the value corresponding to character 0. The key of the character represents the real character, i.e., the artistic word. If it is some special artistic word, the corresponding artistic word can be written into the key of the character template.

[0062] Furthermore, in an example embodiment, a mapping relationship between each character and the single character source image and source texture area data of the corresponding character is obtained according to the configuration file and the character template. For example, the configuration file, i.e., the json file, and the character template, i.e., the template, of the above step 1 are combined to obtain a mapping relationship between each character and the single character source image and source texture area data of the corresponding character. For example, in the character template, "0" corresponds to num_0.png. At the same time, in the configuration file, the source texture area data corresponding to num_0.png, i.e., x, y, w, h, are 0, 0, 80, 135, respectively.

[0063] Specifically, the configuration file, such as the JSON file nums.json, and the character template data can be integrated; each key in the character template is traversed, and the corresponding field in the configuration file nums.json, such as Figure 7 The frames field in the is used to find the corresponding configuration items and combine them to obtain the mapping relationship between the characters to be displayed and the corresponding single-character source images and texture area data. By establishing the mapping relationship between characters and single-character source images and texture area data, the number of HTML DOM nodes does not need to be increased when the length of the displayed string increases, thereby improving rendering performance; and when displaying different texts dynamically, the HTML DOM nodes will not be frequently operated, thereby further improving rendering performance.

[0064] Fig.10 A schematic diagram of a process of determining a scaling ratio and an offset of a source bitmap text on a target canvas according to some embodiments of the present invention is shown.

[0065] Reference Fig.10 As shown, in step S1010, the logical size of the source bitmap text corresponding to the text to be rendered is obtained according to the text to be rendered and the mapping relationship.

[0066] In the example embodiment, the logical size _logicSize of the bitmap text corresponding to the text to be rendered is calculated based on the mapping relationship between the text to be rendered, the single-character source image of each character and the corresponding character, and the source texture area data. The content of the text to be rendered is the input parameter "520", that is, the special character to be displayed by the bitmap. According to the input parameters and the above-mentioned mapping relationship data, the overall width and height of the blue canvas canvas below "520" can be calculated, that is, the logical size _logicSize of the bitmap text. It should be noted that the _logicSize here refers to the width and height of the 520 character without scaling, and is calculated while keeping the same width and height as in the source image. At the same time, the _logicSize is also calculated here based on the gap between each character in the set canvas. The gap between each character can be set manually, similar to the spacing setting between multiple characters entered in Word.

[0067] In step S1020, the scaling ratio of the source bitmap text is obtained according to the target canvas size and the logical size;

[0068] In an example embodiment, whether the bitmap text needs to be scaled can be determined based on the logical size _logicSize and the size of the target canvas. For example, if the final layout effect desired is for the entire bitmap text "520" to occupy the entire canvas, and _logicSize is smaller, the bitmap text needs to be enlarged by a corresponding proportion; conversely, if the entire bitmap text is larger and exceeds the canvas size, the bitmap text needs to be reduced.

[0069] In step S1030, the offset of the source bitmap text on the target canvas is obtained according to the logical size and the scaling ratio.

[0070] In the exemplary embodiment, it depends on the desired layout effect, for example, whether the entire bitmap text is located in the center of the canvas, in the upper left corner of the canvas, or in the lower right corner of the canvas. Taking the desired layout effect being located in the center of the canvas as an example, the overall offset of the bitmap text on the canvas can be calculated based on _logicSize and _scale, for example, 25 pixels are left blank on the left and 25 pixels are left blank on the right.

[0071] Fig.11 A schematic diagram of a flow chart for determining a logical size according to some embodiments of the present invention is shown.

[0072] Reference Fig.11As shown, in step S1110, the width logic_w and height logic_h of the logical size of the source bitmap text are initialized to 0, and the gap hspace between each character in the target canvas, such as the canvas, is set. The value of the gap hspace can be set as needed.

[0073] In step S1120, it is determined whether the characters in the text to be rendered have been processed, that is, whether the number of the next character to be processed is less than the length of the text to be rendered. If the number of the next character to be processed is less than the length of the text to be rendered, it means that it has not been processed yet, and the process goes to step S1130. If it is not less than the length of the text to be rendered, it means that it has been processed, and the process goes to step S1150.

[0074] In step S1130, obtain the next character to be processed, obtain the source texture area data corresponding to the character, add the width in the source texture area data of the character, the gap hspace between characters in the target canvas, and the width of the logical size calculated last time, and obtain the width logic_w of the logical size after adding the character, and the height logic_h of the logical size is the larger value of the height of the logical size calculated last time and the height in the source texture data of the character.

[0075] In step S1140, after the character is processed, the number value of the character is increased by 1, and then the process returns to step S1120.

[0076] In step S1150, after the characters in the text to be rendered are processed, the logical size of the source bitmap text corresponding to the text to be rendered is obtained. Fig.12 As shown, the logical size of the corresponding source bitmap text is the width and height of the rectangular box in the figure below.

[0077] Fig.13 A schematic diagram showing the implementation effect of a bitmap font implementation method according to some embodiments of the present invention.

[0078] Reference Fig.13 As shown, in step S1310, a target canvas, such as a Canvas canvas, is created, and a drawing handle, namely a context _context, is obtained.

[0079] In step S1320, determine whether the mapping relationship data between each character and the single-character source image and source texture area data of the corresponding character is cached. If it is determined that the mapping relationship data is cached, proceed to step S1350; if it is determined that the mapping relationship data is not cached, proceed to step S1330.

[0080] In step S1330, a configuration file is loaded, and source texture region data of each character is obtained from the configuration file.

[0081] In step S1340, a mapping relationship between each character and the single-character source image and source texture area data of the corresponding character is generated.

[0082] In step S1350, the mapping relationship data, namely, _desc, is obtained from the cache.

[0083] In step S1360, the target canvas is cleared, and the logical size _logicSize of the source bitmap text corresponding to the text to be rendered is determined based on the mapping relationship data and the text to be rendered. The scaling ratio _scale of the source bitmap text is determined according to the target canvas size and the logical size; and the offset offset of the source bitmap text on the target canvas is obtained according to the logical size and the scaling ratio.

[0084] In step S1370, it is determined whether the characters in the text to be rendered have been processed, that is, whether the number of the next character to be processed is less than the length of the text to be rendered. If the number of the next character to be processed is less than the length of the text to be rendered, it means that it has not been processed yet, and the process goes to step S1380; if it is not less than the length of the text to be rendered, it means that it has been processed, and the rendering ends.

[0085] In step S1380, the next character to be processed is obtained, the source texture area data corresponding to the character is obtained, the position dstRect of the character on the target canvas is determined according to the scaling ratio and offset offset obtained in step S1360, and the character is drawn on the target canvas based on the target texture area data, source texture area data, and corresponding source image data of the character. For Canvas, the corresponding character can be drawn on Canvas through _context.drawImage(imagedata, srcRect, dstRect) API, where imagedata is the source image data, srcRect is the source texture area data, and dstRect is the target texture area data.

[0086] In step S1390, after processing the character, the number value of the character is increased by 1, and then the process returns to step S1370.

[0087] Fig.14 A schematic diagram showing the implementation effect of a bitmap font implementation method according to some embodiments of the present invention is shown. Fig.14As shown, the left figure represents the bitmap text after rendering on the target canvas, and the right figure is the corresponding HTML code. It can be seen from the right figure that after adopting the technical solution of the embodiment of the present invention, only one node with a width of 400 and a height of 135 of the canvas needs to be added to the HTML source code, and no additional DOM node is required. Therefore, when the displayed character length increases, there is no need to increase DOM node data, thereby improving the rendering performance; when displaying different texts dynamically, the HTML DOM nodes will not be frequently operated, thereby further improving the rendering performance.

[0088] In addition, in an embodiment of the present invention, a bitmap font implementation device is also provided. Fig.15 As shown, the bitmap font implementation device 1500 may include: a source information acquisition unit 1510 , a scaling ratio and offset determination unit 1520 , a source texture area acquisition unit 1530 , a target texture area determination unit 1540 , and a bitmap text generation unit 1550 . Among them, the source information acquisition unit 1510 is used to acquire a source image including multiple characters, and obtain a configuration file including source texture area data of each character in the source image, wherein the source texture area data includes the position and size information of each character in the source image; the scaling ratio and offset determination unit 1520 is used to determine the scaling ratio and offset of the source bitmap text corresponding to the text to be rendered on the target canvas according to the configuration file, wherein the source bitmap text is a text composed of characters in the source image corresponding to the characters to be rendered in the text to be rendered; the source texture area acquisition unit 1530 is used to obtain the source texture area data of each character to be rendered in the text to be rendered according to the configuration file; the target texture area determination unit 1540 determines the target texture area data of each character to be rendered according to the scaling ratio and the offset and the source texture area data of each character to be rendered, wherein the target texture area data includes the position and size information of each character to be rendered on the target canvas; the bitmap text generation unit 1550 is used to draw each character to be rendered on the target canvas according to the target texture area data of each character to be rendered, and generate the target bitmap text.

[0089] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the bitmap font implementation device 1500 also includes: a character template configuration unit, used to configure a character template, wherein the character template includes a correspondence between each character and a single character source image of the character; a mapping relationship generation unit, used to obtain a mapping relationship between each character and the single character source image and source texture area data of the character according to the configuration file and the character template.

[0090] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the mapping relationship generation unit includes: a traversal unit, used to traverse each character in the character template and obtain identification information of a single character source image of each character; a source texture data acquisition unit, used to obtain source texture area data of each character from the configuration file based on the identification information; a mapping relationship determination unit, used to obtain the mapping relationship between each character and the single character source image and source texture area data of the character.

[0091] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the scaling ratio and offset determination unit 1520 includes: a logical size determination unit, used to obtain the logical size of the source bitmap text corresponding to the text to be rendered according to the text to be rendered and the mapping relationship; a scaling ratio determination unit, used to obtain the scaling ratio of the source bitmap text according to the target canvas size and the logical size; and an offset determination unit, used to obtain the offset of the source bitmap text on the target canvas according to the logical size and the scaling ratio.

[0092] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the source texture area data of each character to be rendered includes source position information and source size information of each character to be rendered; the target texture area data of each character to be rendered includes target position information and target size information of each character to be rendered.

[0093] In some exemplary embodiments of the present invention, based on the aforementioned solution, the configuration file is a JSON file or a CSS file.

[0094] In some exemplary embodiments of the present invention, based on the above solution, the target canvas is a Canvas canvas.

[0095] In some exemplary embodiments of the present invention, based on the aforementioned scheme, the target texture area determination unit 1540 is configured to: obtain the position and size information of the corresponding character in the source image from the source texture area data of each character to be rendered; determine the position and size information of each character to be rendered on the target canvas based on the scaling ratio and the offset and the position and size information; and use the position and size information of each character to be rendered on the target canvas as the target texture area data of each character to be rendered.

[0096] Since the functional modules of the bitmap font implementation apparatus 1500 of the exemplary embodiment of the present invention correspond to the steps of the exemplary embodiment of the bitmap font implementation method described above, they will not be described in detail herein.

[0097] In an exemplary embodiment of the present invention, an electronic device capable of implementing the above method is also provided.

[0098] Reference below Fig.16 , which shows a schematic diagram of the structure of a computer system 1600 of an electronic device suitable for implementing an embodiment of the present invention. Fig.16 The computer system 1600 of the electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present invention.

[0099] like Fig.16 As shown, the computer system 1600 includes a central processing unit (CPU) 1601, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 1602 or the program loaded from the storage part 1608 to the random access memory (RAM) 1603. In the RAM 1603, various programs and data required for system operation are also stored. The CPU 1601, the ROM 1602, and the RAM 1603 are connected to each other through a bus 1604. An input / output (I / O) interface 1605 is also connected to the bus 1604.

[0100] The following components are connected to the I / O interface 1605: an input section 1606 including a keyboard, a mouse, etc.; an output section 1607 including a cathode ray tube (CRT), a liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 1608 including a hard disk, etc.; and a communication section 1609 including a network interface card such as a LAN card, a modem, etc. The communication section 1609 performs communication processing via a network such as the Internet. A drive 1610 is also connected to the I / O interface 1605 as needed. A removable medium 1611, such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, etc., is installed on the drive 1610 as needed, so that a computer program read therefrom is installed into the storage section 1608 as needed.

[0101] In particular, according to an embodiment of the present invention, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present invention includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication section 1609, and / or installed from a removable medium 1611. When the computer program is executed by a central processing unit (CPU) 1601, the above-mentioned functions defined in the system of the present application are executed.

[0102] It should be noted that the computer-readable medium shown in the present invention may be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to: an electrical connection with one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the above. In the present invention, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in combination with an instruction execution system, device or device. In the present invention, a computer-readable signal medium may include a data signal propagated in a baseband or as part of a carrier wave, which carries a computer-readable program code. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination of the above. Computer-readable signal media may also be any computer-readable medium other than computer-readable storage media, which may send, propagate or transmit a program for use by or in conjunction with an instruction execution system, apparatus or device. The program code contained on the computer-readable medium may be transmitted using any appropriate medium, including but not limited to: wireless, wire, optical cable, RF, etc., or any suitable combination of the above.

[0103] The flow chart and block diagram in the accompanying drawings illustrate the possible architecture, function and operation of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, a program segment, or a part of a code, and the above-mentioned module, program segment, or a part of a code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order from the order marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram or flow chart, and the combination of the boxes in the block diagram or flow chart can be implemented with a dedicated hardware-based system that performs a specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0104] The units involved in the embodiments of the present invention may be implemented by software or hardware, and the units described may also be arranged in a processor. The names of these units do not, in some cases, limit the units themselves.

[0105] As another aspect, the present application also provides a computer-readable medium, which may be included in the electronic device described in the above embodiment; or may exist independently without being assembled into the electronic device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by an electronic device, the electronic device implements the bitmap font implementation method described in the above embodiment.

[0106] For example, the electronic device may implement Figure 6 As shown in: Step S610, obtaining a source image including multiple characters, and obtaining a configuration file including source texture area data of each character in the source image; Step S620, determining the scaling ratio and offset of the source bitmap text corresponding to the text to be rendered on the target canvas according to the configuration file; Step S630, obtaining the source texture area data of each character to be rendered in the text to be rendered according to the configuration file; Step S640, determining the target texture area data of each character to be rendered according to the scaling ratio and the offset and the source texture area data of each character to be rendered; Step S650, drawing each character to be rendered on the target canvas according to the target texture area data of each character to be rendered, and generating the target bitmap text.

[0107] It should be noted that, although several modules or units of the equipment or device for action execution are mentioned in the above detailed description, this division is not mandatory. In fact, according to an embodiment of the present invention, the features and functions of two or more modules or units described above can be embodied in one module or unit. On the contrary, the features and functions of one module or unit described above can be further divided into being embodied by multiple modules or units.

[0108] Through the description of the above implementation, it is easy for those skilled in the art to understand that the example implementation described here can be implemented by software, or by software combined with necessary hardware. Therefore, the technical solution according to the implementation of the present invention can be embodied in the form of a software product, which can be stored in a non-volatile storage medium (which can be a CD-ROM, a USB flash drive, a mobile hard disk, etc.) or on a network, including several instructions to enable a computing device (which can be a personal computer, a server, a touch terminal, or a network device, etc.) to execute the method according to the implementation of the present invention.

[0109] Those skilled in the art will readily appreciate other embodiments of the present invention after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses or adaptations of the present invention that follow the general principles of the present invention and include common knowledge or customary techniques in the art that are not disclosed by the present invention. The specification and examples are to be considered exemplary only, and the true scope and spirit of the present invention are indicated by the following claims.

[0110] It should be understood that the present invention is not limited to the exact construction that has been described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present invention is limited only by the appended claims.

Claims

1. A method for implementing a bitmap font, characterized in that: include: Acquire a source image including a plurality of characters, and obtain a configuration file including source texture region data of each character in the source image, wherein the source texture region data includes position and size information of each character in the source image; Determine, according to the configuration file, a scaling ratio and an offset of a source bitmap text corresponding to the text to be rendered on a target canvas, wherein the source bitmap text is a text composed of characters in the source image corresponding to the characters to be rendered in the text to be rendered; Obtaining source texture region data of each character to be rendered in the text to be rendered according to the configuration file; Determining target texture region data of each character to be rendered according to the scaling ratio and the offset and source texture region data of each character to be rendered, wherein the target texture region data includes position and size information of each character to be rendered on the target canvas; Each character to be rendered is drawn on the target canvas according to the target texture area data of each character to be rendered, so as to generate a target bitmap text.

2. The bitmap font implementation method according to claim 1, characterized in that: The bitmap font implementation method also includes: Configuring a character template, wherein the character template includes a correspondence between each character and a single character source image of the character; The mapping relationship between each character and the single-character source image and source texture area data of the character is obtained according to the configuration file and the character template.

3. The method for implementing a bitmap font according to claim 2, characterized in that: Obtaining the mapping relationship between each character and the single character source image and source texture area data of the character according to the configuration file and the character template, including: Traversing each character in the character template to obtain identification information of a single character source image of each character; Acquiring source texture region data of each character from the configuration file based on the identification information; Obtain the mapping relationship between each character and the single-character source image and source texture area data of the character.

4. The method for implementing a bitmap font according to claim 2, characterized in that: Determining the scaling ratio and offset of the source bitmap text corresponding to the to-be-rendered text on the target canvas according to the configuration file includes: Obtaining a logical size of a source bitmap text corresponding to the text to be rendered according to the text to be rendered and the mapping relationship; Obtaining a scaling ratio of the source bitmap text according to the target canvas size and the logical size; The offset of the source bitmap text on the target canvas is obtained according to the logical size and the scaling ratio.

5. The method for implementing a bitmap font according to claim 4, characterized in that: The source texture region data of each character to be rendered includes source position information and source size information of each character to be rendered; The target texture region data of each character to be rendered includes target position information and target size information of each character to be rendered.

6. The method for implementing a bitmap font according to claim 2, characterized in that: The configuration file is a JSON file or a CSS file.

7. The method for implementing a bitmap font according to any one of claims 1 to 6, characterized in that: The target canvas is a Canvas canvas.

8. The method for implementing a bitmap font according to claim 1, characterized in that: Determining target texture region data of each character to be rendered according to the scaling ratio, the offset, and the source texture region data of each character to be rendered, including: Acquire the position and size information of the corresponding character in the source image from the source texture region data of each character to be rendered; Determine the position and size information of each character to be rendered on the target canvas based on the scaling ratio, the offset, and the position and size information; The position and size information of each character to be rendered on the target canvas is used as the target texture area data of each character to be rendered.

9. A bitmap font implementation device, characterized in that: include: A source information acquisition unit, used to acquire a source image including a plurality of characters, and obtain a configuration file including source texture region data of each character in the source image, wherein the source texture region data includes position and size information of each character in the source image; A scaling ratio and offset determination unit, configured to determine a scaling ratio and an offset of a source bitmap text corresponding to the text to be rendered on a target canvas according to the configuration file, wherein the source bitmap text is a text composed of characters in the source image corresponding to the characters to be rendered in the text to be rendered; A source texture region acquisition unit, used for obtaining source texture region data of each character to be rendered in the text to be rendered according to the configuration file; a target texture region determining unit, which determines target texture region data of each character to be rendered according to the scaling ratio and the offset and the source texture region data of each character to be rendered, wherein the target texture region data includes position and size information of each character to be rendered on the target canvas; The bitmap text generating unit is used for drawing each character to be rendered on the target canvas according to the target texture area data of each character to be rendered, so as to generate a target bitmap text.

10. An electronic device, characterized in that: include: processor; and a memory, wherein the memory stores computer-readable instructions, and when the computer-readable instructions are executed by the processor, the bitmap font implementation method according to any one of claims 1 to 8 is implemented.

11. A computer-readable storage medium having a computer program stored thereon, wherein the computer program, when executed by a processor, implements the bitmap font implementation method according to any one of claims 1 to 8.

Images