An icon display method, device, equipment and storage medium
By converting binary images into 3D models in STL file format and dynamically displaying them using the three.js library, the problem of lack of innovation and aesthetics in icon display is solved, achieving a combination of lightweight and aesthetic appeal and improving user experience.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Patents(China)
- Current Assignee / Owner
- INSPUR (SHANDONG) COMPUTER TECH CO LTD
- Filing Date
- 2022-06-29
- Publication Date
- 2026-06-16
AI Technical Summary
Current icon displays lack innovation and aesthetics, with most adopting static, two-dimensional, or binary formats, resulting in monotonous displays and insufficient diversity.
The binary image is orthogonally projected onto the 3D model space, traversed pixel by pixel, and converted into a 3D model in STL file format. The model is then dynamically displayed by calling the three.js library.
It achieves a 3D dynamic display of icons, balancing lightweight design with aesthetics, and enhances the user experience.
Smart Images
Figure CN115098209B_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer technology, and in particular to an icon display method, apparatus, device, and storage medium. Background Technology
[0002] Information is typically displayed in the form of icons, such as various utility payment icons, icons for domestic IT innovation, and website icons. However, current icon displays often employ static, two-dimensional, and binary (black and white) formats, lacking innovation and aesthetic appeal.
[0003] Therefore, how to diversify the display of icons is a problem that still needs to be solved. Summary of the Invention
[0004] In view of this, the purpose of this application is to provide an icon display method, apparatus, device, and storage medium that can dynamically display icons, balancing lightweight design and aesthetics while also improving user experience. The specific solution is as follows:
[0005] Firstly, this application discloses a method for displaying icons, including:
[0006] Obtain the binary image of the target icon to be displayed;
[0007] The binary image is orthogonally projected onto a three-dimensional model space, and the binary image is traversed pixel by pixel in the three-dimensional model space to convert the binary image into a three-dimensional model in STL file format, thereby obtaining a three-dimensional icon model.
[0008] The three-dimensional icon model is dynamically displayed by calling the three.js library.
[0009] Optionally, obtaining the binary image of the target icon to be displayed includes:
[0010] Obtain the target icon uploaded by the user and convert it into a binary image.
[0011] Optionally, obtaining the binary image of the target icon to be displayed includes:
[0012] Obtain the target text input by the user for the target icon to be displayed, and convert the target text into a binary image.
[0013] Optionally, obtaining the target text input by the user for the target icon to be displayed, and converting the target text into a binary image, includes:
[0014] Obtain the target text input by the user for the target icon to be displayed, and determine the target vector image stored in vector form corresponding to the target text from the target font library;
[0015] The target vector image is converted into a binary image to obtain multiple binary images, and the multiple binary images are stitched together into a single binary image.
[0016] Optionally, converting the binary image into a 3D model in STL file format to obtain a 3D icon model includes:
[0017] The binary image is converted into a 3D model in STL file format by calling a web-based script written in JavaScript, thus obtaining a 3D icon model.
[0018] Optionally, the step of orthogonally projecting the binary image onto a three-dimensional model space and traversing the binary image pixel by pixel in the three-dimensional model space to convert the binary image into a three-dimensional model in STL file format to obtain a three-dimensional icon model includes:
[0019] The binary image is orthogonally projected onto the xy-axis plane of the three-dimensional model space to obtain the projected model.
[0020] The binary image is traversed pixel by pixel on the projected model, and it is determined whether the pixel value is 1. If the pixel value is 1, a new cube is created at the position of the pixel to obtain a 3D icon model in STL file format.
[0021] Optionally, the step of dynamically displaying the 3D icon model by calling the three.js library includes:
[0022] The scene is created by calling the three.js library, the 3D icon model is loaded, and the rendering information in the 3D icon model is configured so that the 3D icon model can be dynamically displayed.
[0023] Secondly, this application discloses an icon display device, comprising:
[0024] The binary image acquisition module is used to acquire a binary image of the target icon to be displayed.
[0025] The binary image conversion module is used to orthogonally project the binary image onto a three-dimensional model space, and traverse the binary image pixel by pixel in the three-dimensional model space to convert the binary image into a three-dimensional model in STL file format, thereby obtaining a three-dimensional icon model.
[0026] The dynamic display module is used to dynamically display the 3D icon model by calling the three.js library.
[0027] Thirdly, this application discloses an electronic device, including a processor and a memory; wherein, when the processor executes a computer program stored in the memory, it implements the aforementioned icon display method.
[0028] Fourthly, this application discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the aforementioned icon display method.
[0029] As can be seen, this application first obtains a binary image of the target icon to be displayed, then orthogonally projects the binary image onto a 3D model space, and traverses the binary image pixel by pixel in the 3D model space to convert the binary image into a 3D model in STL file format to obtain a 3D icon model. Then, it dynamically displays the 3D icon model by calling the three.js library. This application first converts the binary image of the target icon to be displayed into a 3D model in STL file format, and then dynamically displays the generated 3D model on the web by calling the three.js library, balancing lightweight design and aesthetics while improving user experience. Attached Figure Description
[0030] To more clearly illustrate the technical solutions in the embodiments of this application or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are only embodiments of this application. For those skilled in the art, other drawings can be obtained based on the provided drawings without creative effort.
[0031] Figure 1 This is a flowchart of an icon display method disclosed in this application;
[0032] Figure 2 This is a flowchart illustrating a specific icon display method disclosed in this application;
[0033] Figure 3 This is a flowchart illustrating a specific icon display method disclosed in this application;
[0034] Figure 4 This is a flowchart illustrating a specific icon display method disclosed in this application;
[0035] Figure 5 This is a flowchart illustrating a specific icon display method disclosed in this application;
[0036] Figure 6 This is a schematic diagram of the structure of an icon display device disclosed in this application;
[0037] Figure 7 This is a structural diagram of an electronic device disclosed in this application. Detailed Implementation
[0038] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0039] Currently, in existing technologies, information is typically displayed using icons, such as various utility payment icons, icons for domestic IT innovation, and website icons. However, icon display often employs static, two-dimensional, and binary (black and white) formats, lacking innovation and aesthetics. Therefore, the existing icon display process is rather monotonous and lacks diversity. To address this, this application provides a novel icon display solution that enables three-dimensional and dynamic icon display, balancing lightweight design and aesthetics while enhancing the user experience.
[0040] This application discloses an icon display method. See also Figure 1 As shown, the method includes:
[0041] Step S11: Obtain a binary image of the target icon to be displayed.
[0042] In this embodiment, the first step is to obtain the binary image of the target icon to be displayed. The target icon includes, but is not limited to, icons for domestically produced information technology innovation in China, various trademarks (logos), various utility payment icons, and various website icons; the target icon format includes, but is not limited to, JPEG (Joint Photographic Experts Group) and PNG (Portable Network Graphics).
[0043] Step S12: Project the binary image orthogonally onto the three-dimensional model space, and traverse the binary image pixel by pixel in the three-dimensional model space to convert the binary image into a three-dimensional model in STL file format, thereby obtaining a three-dimensional icon model.
[0044] In this embodiment, after obtaining the binary image of the target icon to be displayed, the obtained binary image is orthogonally projected onto the three-dimensional model space. Then, the binary image is traversed pixel by pixel in the three-dimensional model space. Next, the binary image is quickly converted into a three-dimensional model in STL file format using the STL (stereolithography) interface protocol, thereby obtaining the corresponding three-dimensional icon model.
[0045] In this embodiment, converting the binary image into a 3D model in STL file format to obtain a 3D icon model can specifically include: converting the binary image into a 3D model in STL file format by calling a web-based script written in JavaScript, thereby obtaining a 3D icon model. It should be noted that the icon display method can be implemented by calling JavaScript. By calling JavaScript to write and generate the corresponding web-based script, in the specific implementation process, the aforementioned web-based script can be used to convert the binary image into a 3D model in STL file format to obtain the 3D icon model.
[0046] Step S13: Dynamically display the 3D icon model by calling the three.js library.
[0047] In this embodiment, after converting the binary image into a 3D model in STL file format to obtain the 3D icon model, the 3D icon model can be dynamically displayed in a stereoscopic manner by calling the three.js library (a third-party library of WebGL (a web-oriented graphics standard based on OpenGL) written in JavaScript). It is understood that since STL files only describe the surface geometry of 3D objects and lack attributes such as color, material maps, or other common 3D models, they are commonly used in rapid prototyping, 3D printing, and computer-aided manufacturing (CAM). The three.js library, on the other hand, provides very rich 3D display capabilities and can be used to create various 3D scenes, including cameras, lighting, materials, and other objects. Therefore, the 3D icon model can be dynamically displayed in diverse ways by calling the three.js library.
[0048] As can be seen, this embodiment first obtains a binary image of the target icon to be displayed, then orthogonally projects the binary image onto a 3D model space, and traverses the binary image pixel by pixel in the 3D model space to convert the binary image into a 3D model in STL file format to obtain a 3D icon model. Then, the 3D icon model is dynamically displayed by calling the three.js library. This embodiment first converts the binary image of the target icon to be displayed into a 3D model in STL file format, and then dynamically displays the generated 3D model on the web by calling the three.js library, balancing lightweight design and aesthetics while improving user experience.
[0049] This application discloses a specific method for displaying icons. See [link to relevant documentation]. Figure 2 As shown, the method includes:
[0050] Step S21: Obtain the target icon to be displayed uploaded by the user, and convert the target icon into a binary image.
[0051] In this embodiment, the target icon to be displayed can be obtained directly through user upload, and then the target icon can be processed accordingly to convert the target icon into a binary image.
[0052] Step S22: Project the binary image orthogonally onto the three-dimensional model space, and traverse the binary image pixel by pixel in the three-dimensional model space so that the binary image can be converted into a three-dimensional model in STL file format by calling a web-based script written in JavaScript, thereby obtaining a three-dimensional icon model.
[0053] In this embodiment, after obtaining the target icon uploaded by the user and converting the target icon into a binary image, the binary image can be orthogonally projected into a three-dimensional model space. Then, the binary image is traversed pixel by pixel in the three-dimensional model space. Next, the binary image can be converted into a three-dimensional model in STL file format by calling a web script written in JavaScript in advance, thereby obtaining a three-dimensional icon model.
[0054] Step S23: Create a scene by calling the three.js library, load the 3D icon model, and then configure the rendering information in the 3D icon model so as to dynamically display the 3D icon model.
[0055] In this embodiment, the binary image is orthogonally projected onto a 3D model space, and the binary image is traversed pixel by pixel in the 3D model space. After converting the binary image into a 3D model in STL file format using a web-based script written in JavaScript to obtain the 3D icon model, a desired display scene can be created by calling the three.js library. The 3D icon model is then loaded into the created scene, and the rendering information in the 3D icon model is configured accordingly to dynamically display the 3D icon model. The rendering information configuration can be pre-set or user-defined.
[0056] For more detailed processing procedures regarding the above steps, please refer to the relevant content disclosed in the foregoing embodiments, which will not be repeated here.
[0057] As can be seen, this application first obtains the target icon uploaded by the user and converts it into a binary image. Then, it orthogonally projects the binary image onto a 3D model space and traverses the binary image pixel by pixel in the 3D model space. A web-based script written in JavaScript is then called to convert the binary image into a 3D model in STL file format, resulting in a 3D icon model. Next, a scene is created by calling the three.js library, and the 3D icon model is loaded. The rendering information in the 3D icon model is then configured to dynamically display the 3D icon model. This application, by converting the binary image corresponding to the target icon uploaded by the user into a 3D model in STL file format and then dynamically displaying the generated 3D model on the web by calling the three.js library, balances lightweight design and aesthetics while improving the user experience.
[0058] This application discloses a specific method for displaying icons. See [link to relevant documentation]. Figure 3 As shown, the method includes:
[0059] Step S31: Obtain the target text input by the user for the target icon to be displayed, and convert the target text into a binary image.
[0060] In this embodiment, the user can first manually input the text information contained in the target icon to be displayed, such as directly inputting the text contained in the target icon, and then convert the obtained user-inputted text information into a binary image. The target text includes, but is not limited to, text, letters, numbers, and other information.
[0061] Step S32: Project the binary image orthogonally onto the three-dimensional model space, and traverse the binary image pixel by pixel in the three-dimensional model space so that the binary image can be converted into a three-dimensional model in STL file format by calling a web script written in JavaScript, thereby obtaining a three-dimensional icon model.
[0062] In this embodiment, after obtaining the target text input by the user for the target icon to be displayed and converting the target text into a binary image, the binary image can be orthogonally projected into a three-dimensional model space. Then, the binary image is traversed pixel by pixel in the three-dimensional model space, and the binary image is converted into a three-dimensional model in STL file format by calling a web script written in JavaScript in advance, thereby obtaining a three-dimensional icon model.
[0063] Step S33: Create a scene by calling the three.js library, load the 3D icon model, and then configure the rendering information in the 3D icon model so as to dynamically display the 3D icon model.
[0064] In this embodiment, the binary image is orthogonally projected onto a 3D model space, and the binary image is traversed pixel by pixel in the 3D model space. After converting the binary image into a 3D model in STL file format using a web-based script written in JavaScript to obtain the 3D icon model, a desired display scene can be created by calling the three.js library. The 3D icon model is then loaded into the created scene, and the rendering information in the 3D icon model is configured accordingly to dynamically display the 3D icon model. The rendering information configuration can be pre-set or user-defined.
[0065] For more detailed processing procedures regarding the above steps, please refer to the relevant content disclosed in the foregoing embodiments, which will not be repeated here.
[0066] As can be seen, this application first obtains the target text input by the user for the target icon to be displayed, converts the target text into a binary image, then orthogonally projects the binary image onto a 3D model space, and traverses the binary image pixel by pixel in the 3D model space. Then, by calling a web-based script written in JavaScript, the binary image is converted into a 3D model in STL file format, resulting in a 3D icon model. Next, a scene is created by calling the three.js library, and the 3D icon model is loaded. Finally, the rendering information in the 3D icon model is configured, thereby dynamically displaying the 3D icon model. This application, by converting the target text contained in the target icon directly input by the user into a binary image, then converting the binary image into a 3D model in STL file format, and then dynamically displaying the generated 3D model on the web by calling the three.js library, balances lightweight design and aesthetics while improving the user experience.
[0067] This application discloses a specific method for displaying icons. See [link to relevant documentation]. Figure 4 As shown, the method includes:
[0068] Step S41: Obtain the target text for the target icon to be displayed, input by the user, and determine the target vector image stored in vector form corresponding to the target text from the target font library.
[0069] It should be noted that if the user does not directly upload an image of the target icon to be displayed, but instead enters the text content contained in the target icon, i.e., the target text, then after obtaining the target text uploaded by the user regarding the target icon, it is necessary to convert it into a binary image. For the target text uploaded by the user, the specific patterns of different letters, characters, etc., in different font libraries are generally stored in the form of vector graphics. Therefore, after obtaining the target text manually entered by the user for the target icon to be displayed, it is necessary to first determine the target vector image stored in vector graphics form corresponding to the aforementioned target text from the target font library.
[0070] Step S42: Convert the target vector image into a binary image to obtain multiple binary images, and stitch the multiple binary images together into a single binary image.
[0071] In this embodiment, after obtaining the target text for the target icon to be displayed input by the user, and determining the target vector image stored in vector form corresponding to the target text from the target font library, the target vector image is further converted into a pixel binary image. Then, multiple pixel binary images are combined into a single pixel binary image of the icon. It should be noted that the specific target font library and the aspect ratio of the generated binary image can be customized by the user.
[0072] Step S43: Orthogonally project the xy-axis plane of the binary image onto the xy-axis plane of the three-dimensional model space to obtain the projected model.
[0073] In this embodiment, the target vector image is converted into a binary image to obtain multiple binary images. After the multiple binary images are stitched together into a single binary image, a web script written in JavaScript can be used to orthogonally project the xy-axis plane of the binary image onto the xy-axis plane of the three-dimensional model space to obtain the projected model.
[0074] Step S44: Traverse the binary image pixel by pixel on the projected model and determine whether the pixel value is 1. If the pixel value is 1, create a new cube at the position of the pixel to obtain a 3D icon model in STL file format.
[0075] In this embodiment, after orthogonally projecting the xy-axis plane of the binary image onto the xy-axis plane of the three-dimensional model space to obtain the projected model, the binary image is then traversed pixel by pixel on the projected model. During the traversal, it is determined whether the pixel value is 1. If the pixel value is 1, it indicates that an image exists at that location. A cube is then created at the pixel location. The binary image is then quickly converted into a three-dimensional model in STL file format using the STL interface protocol, thereby obtaining a three-dimensional icon model in STL file format.
[0076] It should be noted that during the process of creating a new cube at the pixel position, the length and width of the cube on the xy-axis plane in the 3D model space, i.e., the length and width per pixel, can be set to 1, while the height on the z-axis can be a custom value (i.e., the target thickness of the icon's 3D model). Furthermore, multiple cubes in the 3D model file share the 3D model of the target icon.
[0077] Furthermore, to optimize the file size and generation speed of the generated 3D model, multiple pixels within a square area can be treated as a single large pixel (e.g., 2x2, 3x3, etc.). However, this will correspondingly reduce the accuracy of the generated 3D model. It should be noted that when processing large pixels, the pixel judgment criteria should also be adjusted accordingly. Specifically, a threshold can be set based on the average value of multiple pixels, and compared with the large pixel value to determine whether an image exists at that large pixel.
[0078] Step S45: Create a scene by calling the three.js library, load the 3D icon model, and then configure the rendering information in the 3D icon model so as to dynamically display the 3D icon model.
[0079] In this embodiment, after obtaining the 3D icon model in STL file format, a scene can be created by calling the three.js library, then the aforementioned 3D icon model in STL file format can be loaded, and the rendering information in the aforementioned 3D icon model can be configured to dynamically display the aforementioned 3D icon model on the web. The rendering information includes, but is not limited to, lighting, materials, and camera settings.
[0080] In one specific implementation, the three.js library can be called to create a display scene and lighting on the web, and then the generated 3D icon model in STL file format can be loaded into the display scene. The camera in the display scene can be given a constant rotation speed with the 3D model as the origin, so as to dynamically display the 3D model from multiple angles.
[0081] For more detailed processing procedures regarding the above steps, please refer to the relevant content disclosed in the foregoing embodiments, which will not be repeated here.
[0082] As can be seen, this embodiment first obtains the target text for the target icon to be displayed, input by the user, and determines the target vector image stored in vector form corresponding to the target text from the target font library. Then, the target vector image is converted into a binary image to obtain multiple binary images, and the multiple binary images are stitched together into a single binary image. Next, the xy-axis plane of the binary image is orthogonally projected onto the xy-axis plane of the three-dimensional model space to obtain the projected model. Further, the binary image is traversed pixel by pixel on the projected model, and it is determined whether the pixel value is 1. If the pixel value is 1, a cube is created at the position of the pixel to obtain a three-dimensional icon model in STL file format. Finally, a scene is created by calling the three.js library, and the three-dimensional icon model is loaded. Then, the rendering information in the three-dimensional icon model is configured to dynamically display the three-dimensional icon model. This application embodiment converts the vector image corresponding to the target text contained in the target icon input by the user into a binary image, and orthogonally projects the binary image onto the three-dimensional model space to obtain a three-dimensional icon model in STL file format. The three-dimensional icon model is then dynamically displayed on the web by calling the three.js library. This is simple and convenient for users, while also improving the aesthetics of the icon display and enhancing the user experience.
[0083] See Figure 5 As shown, Figure 5This paper illustrates a specific icon display framework, which includes the following steps: First, the user can directly upload the icon to be displayed, and then the obtained icon is converted into a corresponding binary image. Alternatively, the text input by the user for the icon to be displayed (i.e., the text information contained in the icon) can be obtained first, and then the obtained text is converted into a corresponding binary image. The format of the icon to be displayed includes, but is not limited to, JPEG, PNG, etc. Next, the xy-axis plane of the binary image is orthogonally projected onto the xy-axis plane of the 3D model space to obtain the projected model. Further, the binary image is traversed pixel by pixel on the projected model, and the pixel value is determined. If the pixel value is 1, a cube is created at the position of pixel 1, resulting in a 3D icon model in STL file format. Finally, a scene is created by calling the three.js library, and the 3D icon model is loaded. The rendering information in the 3D icon model, such as lighting and materials, is then configured. It should be noted that rendering information such as scene, lighting, and materials can be pre-set or user-defined to achieve the desired display effect. Furthermore, after the rendering information is configured, the 3D icon model can be dynamically displayed in real-time on the web based on user input. This embodiment adds relevant custom options, such as materials, lighting, and scene settings during model display, and adds real-time influence of user input on the display effect, such as mouse movement controlling the camera's perspective. This facilitates multi-angle observation of the 3D icon model, making it simple and convenient for users, and combining ease of use with aesthetic appeal.
[0084] In practice, the logo of the icon to be displayed can be obtained by the user clicking the "upload" button on the web interface. Then, the binary image of the logo can be uploaded to the server (or the text information can be uploaded to the server by entering text in the input box). Finally, by clicking the "generate" button, the 3D icon model can be viewed slowly rotating and displayed in the scene.
[0085] Accordingly, this application also discloses an icon display device, see [link to relevant documentation]. Figure 6 As shown, the device includes:
[0086] Binary image acquisition module 11 is used to acquire a binary image of the target icon to be displayed;
[0087] Binary image conversion module 12 is used to orthogonally project the binary image onto a three-dimensional model space, and traverse the binary image pixel by pixel in the three-dimensional model space in order to convert the binary image into a three-dimensional model in STL file format to obtain a three-dimensional icon model;
[0088] The dynamic display module 13 is used to dynamically display the three-dimensional icon model by calling the three.js library.
[0089] The specific workflow of each of the above modules can be found in the relevant content disclosed in the foregoing embodiments, and will not be repeated here.
[0090] As can be seen, in this embodiment, a binary image of the target icon to be displayed is first obtained. Then, the binary image is orthogonally projected onto a 3D model space, and the binary image is traversed pixel by pixel in the 3D model space to convert the binary image into a 3D model in STL file format to obtain a 3D icon model. Finally, the 3D icon model is dynamically displayed by calling the three.js library. This embodiment first converts the binary image of the target icon to be displayed into a 3D model in STL file format, and then dynamically displays the generated 3D model by calling the three.js library, which balances lightweight design and aesthetics while improving user experience.
[0091] In some specific embodiments, the binary image acquisition module 11 may specifically include:
[0092] The icon acquisition unit is used to acquire the target icon to be displayed uploaded by the user;
[0093] The icon conversion unit is used to convert the target icon into a binary image.
[0094] In some specific embodiments, the binary image acquisition module 11 may specifically include:
[0095] The text acquisition unit is used to acquire the target text input by the user for the target icon to be displayed;
[0096] The text conversion unit is used to convert the target text into a binary image.
[0097] In some specific embodiments, the text acquisition unit may specifically include:
[0098] The vector graphic acquisition unit is used to acquire the target text input by the user for the target icon to be displayed, and to determine the target vector graphic stored in vector form corresponding to the target text from the target font library;
[0099] In some specific embodiments, the text conversion unit may specifically include:
[0100] The vector graphics conversion unit is used to convert the target vector graphics into binary images, obtain multiple binary images, and stitch the multiple binary images into a single binary image.
[0101] In some specific embodiments, the binary image conversion module 12 may specifically include:
[0102] The binary image conversion unit is used to convert the binary image into a 3D model in STL file format by calling a web-based script written in JavaScript, thereby obtaining a 3D icon model.
[0103] In some specific embodiments, the binary image conversion module 12 may specifically include:
[0104] The binary image projection unit is used to orthogonally project the xy-axis plane of the binary image onto the xy-axis plane of the three-dimensional model space to obtain the projected model.
[0105] A traversal unit is used to traverse the binary image pixel by pixel on the projected model;
[0106] The judgment unit is used to determine whether the pixel value is 1;
[0107] A cube creation unit is used to create a new cube at the position of the pixel if the pixel value is 1, thereby obtaining a 3D icon model in STL file format.
[0108] In some specific embodiments, the dynamic display module 13 may specifically include:
[0109] The scene creation unit is used to create scenes by calling the three.js library;
[0110] A model loading unit is used to load the 3D icon model;
[0111] The configuration unit is used to configure the rendering information in the three-dimensional icon model so as to dynamically display the three-dimensional icon model.
[0112] Furthermore, embodiments of this application also disclose an electronic device, Figure 7 This is a structural diagram of an electronic device 20 according to an exemplary embodiment. The content of the diagram should not be construed as limiting the scope of this application.
[0113] Figure 7 This is a schematic diagram of the structure of an electronic device 20 provided in an embodiment of this application. Specifically, the electronic device 20 may include: at least one processor 21, at least one memory 22, a power supply 23, a communication interface 24, an input / output interface 25, and a communication bus 26. The memory 22 stores a computer program, which is loaded and executed by the processor 21 to implement the relevant steps in the icon display method disclosed in any of the foregoing embodiments. Furthermore, the electronic device 20 in this embodiment may specifically be an electronic computer.
[0114] In this embodiment, the power supply 23 is used to provide operating voltage for each hardware device on the electronic device 20; the communication interface 24 can create a data transmission channel between the electronic device 20 and external devices, and the communication protocol it follows can be any communication protocol applicable to the technical solution of this application, and is not specifically limited here; the input / output interface 25 is used to acquire external input data or output data to the outside world, and its specific interface type can be selected according to specific application needs, and is not specifically limited here.
[0115] In addition, the memory 22, as a carrier for resource storage, can be a read-only memory, random access memory, disk or optical disk, etc. The resources stored thereon can include operating system 221, computer program 222, etc., and the storage method can be temporary storage or permanent storage.
[0116] The operating system 221 is used to manage and control the various hardware devices on the electronic device 20 and the computer program 222, which may be Windows Server, Netware, Unix, Linux, etc. In addition to including a computer program capable of performing the icon display method executed by the electronic device 20 as disclosed in any of the foregoing embodiments, the computer program 222 may further include a computer program capable of performing other specific tasks.
[0117] Furthermore, this application also discloses a computer-readable storage medium for storing a computer program; wherein, when the computer program is executed by a processor, it implements the aforementioned icon display method. The specific steps of this method can be found in the corresponding content disclosed in the foregoing embodiments, and will not be repeated here.
[0118] The various embodiments in this specification are described in a progressive manner, with each embodiment focusing on its differences from other embodiments. Similar or identical parts between embodiments can be referred to interchangeably. For the apparatus disclosed in the embodiments, since it corresponds to the method disclosed in the embodiments, the description is relatively simple; relevant parts can be referred to in the method section.
[0119] Those skilled in the art will further recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of both. To clearly illustrate the interchangeability of hardware and software, the components and steps of the various examples have been generally described in terms of functionality in the foregoing description. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementation should not be considered beyond the scope of this application.
[0120] The steps of the methods or algorithms described in conjunction with the embodiments disclosed herein can be implemented directly by hardware, a software module executed by a processor, or a combination of both. The software module can be located in random access memory (RAM), main memory, read-only memory (ROM), electrically programmable ROM, electrically erasable programmable ROM, registers, hard disk, removable disk, CD-ROM, or any other form of storage medium known in the art.
[0121] Finally, it should be noted that in this document, relational terms such as "first" and "second" are used only to distinguish one entity or operation from another, and do not necessarily require or imply any such actual relationship or order between these entities or operations. Furthermore, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitations, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.
[0122] The above provides a detailed description of an icon display method, apparatus, device, and storage medium provided in this application. Specific examples have been used to illustrate the principles and implementation methods of this application. The descriptions of the above embodiments are only for the purpose of helping to understand the method and core ideas of this application. At the same time, for those skilled in the art, there will be changes in the specific implementation methods and application scope based on the ideas of this application. Therefore, the content of this specification should not be construed as a limitation of this application.
Claims
1. A method for displaying icons, characterized in that, include: Obtain the binary image of the target icon to be displayed; The binary image is orthogonally projected onto a three-dimensional model space, and the binary image is traversed pixel by pixel in the three-dimensional model space to convert the binary image into a three-dimensional model in STL file format, thereby obtaining a three-dimensional icon model. The 3D icon model is dynamically displayed by calling the three.js library; The method of dynamically displaying the 3D icon model by calling the three.js library includes: creating a scene by calling the three.js library, loading the 3D icon model, and configuring the rendering information in the 3D icon model in order to dynamically display the 3D icon model; The process of creating a scene by calling the three.js library, loading the 3D icon model, and configuring the rendering information in the 3D icon model includes: calling the three.js library to create a display scene and lighting on the web, then loading the 3D icon model in STL file format into the display scene, and assigning a camera in the display scene a constant rotation speed with the 3D icon model as the origin, so as to dynamically display the 3D icon model from multiple angles. The step of obtaining a binary image of the target icon to be displayed includes: obtaining target text input by the user for the target icon to be displayed, and converting the target text into a binary image; The step of obtaining the target text input by the user for the target icon to be displayed and converting the target text into a binary image includes: obtaining the target text input by the user for the target icon to be displayed, and determining the target vector image stored in vector form corresponding to the target text from the target font library; converting the target vector image into a binary image to obtain multiple binary images, and stitching the multiple binary images into a single binary image. The step of orthogonally projecting the binary image onto a three-dimensional model space and traversing the binary image pixel by pixel in the three-dimensional model space to convert the binary image into a three-dimensional model in STL file format to obtain a three-dimensional icon model includes: orthogonally projecting the xy-axis plane of the binary image onto the xy-axis plane of the three-dimensional model space to obtain a projected model; traversing the binary image pixel by pixel on the projected model and determining whether the pixel value is 1 during the traversal; if the pixel value is 1, it indicates that an image exists at this location, and a cube is created at the position of the pixel to obtain a three-dimensional icon model in STL file format; The process of converting the binary image into a three-dimensional model in STL file format further includes: treating multiple pixels within a single square region as a large pixel for processing, and when processing the large pixel, setting a threshold based on the average value of the multiple pixels, and comparing it with the pixel value of the large pixel to determine whether an image exists at the large pixel.
2. The icon display method according to claim 1, characterized in that, The process of converting the binary image into a 3D model in STL file format to obtain a 3D icon model includes: The binary image is converted into a 3D model in STL file format by calling a web-based script written in JavaScript, thus obtaining a 3D icon model.
3. An icon display device, characterized in that, include: The binary image acquisition module is used to acquire a binary image of the target icon to be displayed. The binary image conversion module is used to orthogonally project the binary image onto a three-dimensional model space, and traverse the binary image pixel by pixel in the three-dimensional model space to convert the binary image into a three-dimensional model in STL file format, thereby obtaining a three-dimensional icon model. The dynamic display module is used to dynamically display the 3D icon model by calling the three.js library; The dynamic display module is specifically used to create a scene by calling the three.js library, load the 3D icon model, and then configure the rendering information in the 3D icon model so as to dynamically display the 3D icon model. The dynamic display module is also used to call the three.js library to create a display scene and lighting on the web, then load the 3D icon model in the STL file format into the display scene, and give the camera in the display scene a constant rotation speed with the 3D icon model as the origin, so as to dynamically display the 3D icon model from multiple angles. The binary image acquisition module is specifically used to acquire the target text input by the user for the target icon to be displayed, and to convert the target text into a binary image; The binary image acquisition module is also used to acquire the target text input by the user for the target icon to be displayed, and to determine the target vector image stored in vector form corresponding to the target text from the target font library; to convert the target vector image into a binary image to obtain multiple binary images, and to stitch the multiple binary images into a single binary image; The binary image conversion module is specifically used to orthogonally project the xy-axis plane of the binary image onto the xy-axis plane of the three-dimensional model space to obtain the projected model; to traverse the binary image pixel by pixel on the projected model, and to determine whether the pixel value is 1 during the traversal. If the pixel value is 1, it indicates that an image exists here, and a cube is created at the position of the pixel to obtain a three-dimensional icon model in STL file format. The device is further configured to treat multiple pixels within a single square area as a single large pixel for processing, and when processing the large pixel, to set a threshold based on the average value of the multiple pixels and compare it with the pixel value of the large pixel to determine whether an image exists at the large pixel.
4. An electronic device, characterized in that, It includes a processor and a memory; wherein, when the processor executes a computer program stored in the memory, it implements the icon display method as described in any one of claims 1 to 2.
5. A computer-readable storage medium, characterized in that, Used to store computer programs; wherein, when the computer programs are executed by a processor, they implement the icon display method as described in any one of claims 1 to 2.