CN116932955A - Rendering method, device and medium of artistic word - Google Patents

Abstract

The application discloses a rendering method, equipment and medium of an artistic word, belongs to the technical field of image processing, and is used for solving the technical problem that an artistic word font file in a picture form cannot be rendered into a page as a font in the existing webpage design process. The method comprises the following steps: determining an image to be rendered, and acquiring characters in the image to be rendered; the characters are sequenced according to the rendering sequence and then converted into a character string format, and the obtained character string is continuously converted into a local character string, wherein the local character string is obtained by adding separators into the character string; traversing the local character string, acquiring image path information and separator judgment information corresponding to each bit in the local character string, packaging the image path information and the separator judgment information into attribute information of each bit, and sequentially adding the attribute information into a rendering array; and sequentially and dynamically rendering the elements in the rendering array.

Description

Rendering method, device and medium of artistic word

Technical Field

The present application relates to the field of image processing technologies, and in particular, to a method, an apparatus, and a medium for rendering an artistic word.

Background

With the continuous development of web page designs, higher requirements are also put on the aesthetic degree of web page designs. When a designer designs a webpage, the designer usually uses artistic words, and the artistic words are usually stored in a background file library of the webpage design in the form of artistic word files, so that the designer can conveniently call and use the artistic words.

However, because of the limited diversity of the art word files, in order to increase the aesthetic degree of the page, designers can search for some art word pictures meeting the aesthetic design requirements and try to insert the art word pictures into the webpage, but at present, the art words in the picture forms cannot be added into the webpage as fonts, so that new problems are brought to the designers.

Disclosure of Invention

The embodiment of the application provides a rendering method, equipment and medium of an artistic word, which are used for solving the following technical problems: in the existing webpage design process, an artistic font file in a picture form cannot be rendered into a page as a font.

The embodiment of the application adopts the following technical scheme:

in a first aspect, an embodiment of the present application provides a method for rendering an artistic word, where the method includes: determining an image to be rendered, and acquiring characters in the image to be rendered; the characters are sequenced according to the rendering sequence and then converted into a character string format, and the obtained character string is continuously converted into a local character string, wherein the local character string is obtained by adding separators into the character string; traversing the local character string, acquiring image path information and separator judgment information corresponding to each bit in the local character string, packaging the image path information and the separator judgment information into attribute information of each bit, and sequentially adding the attribute information into a rendering array; and sequentially and dynamically rendering the elements in the rendering array.

In one or more embodiments of the present description, after determining the image to be rendered, the method further comprises: defining a DOM document; and adding the characters in the image to be rendered into the DOM document according to the rendering sequence.

In one or more embodiments of the present description, after defining the DOM document, the method further comprises: determining the length L of the character string and determining the number N of separators added in the character string; acquiring the width D1 of the image to be rendered and the width D2 of the separator; the width D of the DOM document is determined by the following formula:

D＝L*D1+N*D2

and adding the width D to the unit and binding the width D into the DOM document.

In one or more embodiments of the present description, the method further comprises: converting the character into a character String format by utilizing a to String () function provided in the Node JS; and converting the character String into a Local character String by using a to Local String () function provided in the Node JS, wherein the Local character String is the character String added with the kilobit separator.

In one or more embodiments of the present disclosure, after obtaining the local character string, the method further includes: determining the length of the local character string; the difference between the local string length and the string length is determined as the number of separators.

In one or more embodiments of the present disclosure, adding the attribute information to the rendering array specifically includes: and storing the attribute information into the rendering array through a push () function provided in the Node JS.

In one or more embodiments of the present disclosure, dynamically rendering the elements in the rendering array sequentially includes: requesting the image to be rendered through the image path information by using a request method provided in the Node JS; and rendering the image to be rendered onto a webpage in real time.

In one or more embodiments of the present disclosure, dynamically rendering the elements in the rendering array sequentially, and specifically further includes: and reading the value of the separator judgment information, and rendering the separator on the webpage in real time when the value is 1.

In a second aspect, an embodiment of the present application further provides an apparatus for rendering an artistic word, where the apparatus includes: at least one processor; and a memory communicatively coupled to the at least one processor; wherein the memory stores instructions executable by the at least one processor to enable the at least one processor to perform a method of rendering an artwork as described above.

In a third aspect, embodiments of the present application also provide a non-volatile computer storage medium having stored thereon computer-executable instructions configured to perform a method of rendering an artwork as described above.

The method, the device and the medium for rendering the artistic word provided by the embodiment of the application have the following beneficial effects: characters in an artistic word image to be rendered are added to a DOM document according to a rendering sequence, then the characters are converted into a character string format and are continuously converted into a local character string, the local character string is constructed into a rendering array through picture path information and separator judgment information corresponding to each bit in the local character string, each element in the rendering array is sequentially and dynamically rendered on a webpage, and therefore the artistic word in a picture form is rendered on the webpage as a font, and contribution is made to the attractive degree and the font diversity of webpage design.

Drawings

In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the drawings that are required to be used in the embodiments or the description of the prior art will be briefly described below, and it is obvious that the drawings in the following description are only some embodiments described in the present application, and other drawings may be obtained according to the drawings without inventive effort to those skilled in the art. In the drawings:

FIG. 1 is a flowchart of a method for rendering an artistic word according to an embodiment of the present application;

fig. 2 is a naming schematic diagram of an artistic word picture in an application scenario provided by the embodiment of the present application;

fig. 3 is a rendering effect diagram of an artistic word in an application scene provided by an embodiment of the present application;

fig. 4 is a schematic structural diagram of an artistic word rendering device according to an embodiment of the present application.

Detailed Description

In order to make the technical solution of the present application better understood by those skilled in the art, the technical solution of the present application will be clearly and completely described below with reference to the accompanying drawings in the embodiments of the present application, and it is apparent that the described embodiments are only some embodiments of the present application, not all embodiments. All other embodiments, which can be made by one of ordinary skill in the art based on the embodiments herein without making any inventive effort, shall fall within the scope of the present application.

The embodiment of the application provides a rendering method, equipment and medium of an artistic word, which can render the artistic word under the condition of lacking an artistic word font file.

The method in the embodiment of the present application will be described in detail with reference to the accompanying drawings.

Fig. 1 is a flowchart of an art word rendering method provided in an embodiment of the present application, where, as shown in fig. 1, the art word rendering method in an embodiment of the present application at least includes the following execution steps:

step 101, determining an image to be rendered, and acquiring characters in the image to be rendered.

The images to be rendered refer to art word pictures which need to be displayed as fonts in the webpage, and the images to be rendered are generally selected during webpage design and only need to be rendered by the method in the embodiment of the application. Then, the characters in the pictures to be rendered need to be extracted/read out, and taking the digital pictures as examples, the digital content in each picture to be rendered can be read out.

In one example of the application, after the image to be rendered is obtained, a DOM document may be defined, which is a tree-based API document that requires the entire document to be represented in memory during processing. The DOM document is used for bearing characters in the image to be rendered.

Step 102, after the characters are sequenced according to the rendering sequence, converting the characters into a character string format, and continuously converting the obtained character string into a local character string.

The rendering sequence refers to the final display sequence of the characters on the web page, the sequence is determined before the web page is designed, after the sequence is obtained, the extracted characters are ordered according to the rendering sequence, and then are converted into a character String form, wherein the conversion can be realized through a to String () function provided in the Node JS.

Further, after converting to a character String, the to Local String () function provided in the Node JS is used to continue converting the character String to a Local character String, where in an example of the present application, the Local character String is a character String form added with a kilobit separator, and is also an artistic word form to be finally presented.

In one example of the present application, in some special web page design scenarios, a special format such as character centering display may be required, which may be achieved by defining the width of the aforementioned DOM document, which is related to the width of the character string and the width of the separator, and thus may be determined by the following formula:

D＝L*D1+N*D2

wherein D is the width of the DOM document, L is the length of the character string, D1 is the width of the image to be rendered, the width is used to represent the width of the character, N is the number of separators, and D2 is the width of the separators.

Further, in order to facilitate subsequent rendering, the foregoing width units are uniformly specified as px. Then, the width is bound into the DOM document.

Further, the number of the separator may be determined by a difference between the length of the local character string and the length of the character string, because the local character string is the character string to which the separator is added, and thus, the difference between the lengths may indicate that several character strings are added, and it should be noted that the length of the character string may be represented by the number of bits of the character string.

Step 103, traversing the local character string, obtaining image path information and separator judgment information corresponding to each bit in the local character string, packaging the image path information and the separator judgment information into attribute information of each bit, and then sequentially adding the attribute information into a rendering array.

After the local character string is obtained, the rendering process of the artistic word can be performed by using the local character string, and firstly, the image path information and the separator judgment information of each bit in the local character string are obtained, wherein the image path information is information which is convenient for retrieving image data during rendering, and the separator judgment information is used for judging whether the bit is a separator or not. And then, the acquired image path information and the separator judgment information are packaged into attribute information, and the attribute information is added into a rendering array.

In one example of the present application, the aforementioned attribute information may be stored into the render array through a push () function provided in the Node JS.

Step 104, dynamically rendering the elements in the rendering array in turn.

After the rendering array is obtained, each bit element in the rendering array can be dynamically rendered in turn, and it should be noted that the dynamic rendering process can be implemented by an existing rendering scheme, which is not described in detail in the embodiment of the present application.

When rendering, if the separator judging information is 0, the bit is not the separator, and at the moment, the image to be rendered is requested through the image path information by using a request method provided in the Node JS, and the image to be rendered is rendered on the webpage in real time. If the separator judgment information is 1, the bit is indicated to be the separator, and the preset separator is directly rendered on the webpage at the moment.

In order to describe the artistic word rendering method in more detail in the embodiment of the application, the embodiment of the application is also explained as follows.

The embodiment of the application takes rendering of a digital data volume in a picture into an artistic word form as an example for explanation, and the rendering target number is: 95148249.

first, the art word picture files provided by the UI are prepared, and each file is renamed according to the text content thereof, and the renamed result is shown in fig. 2.

Then, a DOM document is customized to bear an artistic word picture to be rendered later, that is, a picture in fig. 2, and for convenience, in the embodiment of the present application, the ID of the DOM document is set to total nums, and the defining process is as follows:

<div id＝"totalNums"></div>

and customizing a global variable named pics for storing the rendering array constructed later.

The user-defined global variable is used for storing the digital data to be displayed, namely, the numbers in the artistic word images, named as total num and assigned as 95148249.

A local variable is customized to store the length of the original data, namely the variable totalNum, designated len1.

After the definition is completed, the variable total num is converted into a string (the string refers to a format of data, i.e., string format, here), which is a format of data, using a toString () function in the Node JS method, and toString () converts 95148249, which can be mathematically operated as a number, into 95148249, which is a string, and the length of the string is calculated using length in the Node JS method and stored in len1, concretely as follows:

var len1＝this.totalNum.toString().length

further, the variable totalNum is converted into a local data string, i.e., a string separated by a kilobit separator, in this example 95,148,249, using the toLocaleString () function in the Node JS method.

A local variable is custom-defined for storing the number of kilobit delimiters, designated len2.

The variable total num length after conversion into the local string is subtracted by the original data length len1 to obtain the number of kilobit delimiters, i.e. the value of len2, and the calculation process is as follows:

var len2＝this.totalNum.length-len1

in one example of the present application, in a specific application environment, it is often encountered that, for example, in the case of absolute positioning, it is necessary to set the DOM document width in css with transformation centering or the like. The width of the DOM document is dynamically calculated according to the actual needs and the size of the artistic word picture, and the result is bound into the DOM document customized before through the dynamic binding function of vue.

Specifically, a local variable is defined for storing the calculated width, named width. A global variable is defined for storing character string forms with calculated widths, and is conveniently named width. In the embodiment of the application, the width of the digital art word picture is 52px, and the length of the separator art word is 26px, so that the following can be calculated:

var width＝len1*52+len2*26

further, the obtained variable width is converted into a character string by using a toString () method in the Node JS, and the character string is added with a unit and stored in the global variable width:

this.width＝width.toString()+'px'

finally, the dynamic binding characteristic of vue is used for binding the global variable width into the prepared DOM document container totalNums, and the method is concretely realized as follows:

<div id＝"totalNums":style＝"{width:width}"></div>

in one example of the present application, when rendering is performed, a local variable is customized for performing for-loop on the variable totalNum, named i, i is set as the length value-1 of the variable totalNum, the variable totalNum is traversed sequentially, an object for requesting a corresponding picture file is customized with reference to the content of each bit, and the object is added into the previously customized pics rendering array by using a push method, so as to realize the following steps:

for(let i＝this.totalNum.length-1；i>＝0；i--)

var obj＝{}

const pic＝this.totalNum.slice(i,i+1)

further, the custom local variable is used for storing each bit in the character string corresponding to the totalNum, and named pic:

if(pic！＝＝',')

and constructing a local variable object, namely obj, wherein the attribute of obj is a variable img for storing the picture information obtained by the request and is an isPoint for distinguishing whether the picture information is a separator or not. If the bit is not a delimiter, the isPoint value is initialized to false.

And requesting the artistic word picture file through the file storage path by using a request method provided by the Node JS. In the embodiment of the application, the file is stored under the @/packages/images folder, and the character string is spliced by using the + symbol to request the corresponding artistic word picture, and the specific implementation is as follows:

img:require('@/assets/images/pic'+pic+'.png'),

isPoint:false

if the bit is a delimiter, the isPoint value is initialized to true:

obj＝{

img:require('@/assets/images/digitalVillage/party/point.png'),

isPoint:true

}

finally, the obj object obtained is stored into the global variable pics by using a push () method:

this.pics.push(obj)

in the html section, using the v-for loop function provided by vue, a picture is dynamically rendered by the < img > tag according to the content of the rendering array pics, and the rendering effect is as shown in fig. 3. Namely, the v-for loop object is named item, and the img value of item (i.e. img attribute in the object obj above) is taken as a dynamic src value, and the implementation process is as follows:

<div:style＝"{width:width}">

<img v-for＝"(item,index)in pics"

:key＝"index"

:src＝"item.img"

:class＝"item.isPoint？'totalPoint':'totalImg'"/>

the class part uses a three-eye operator to judge whether the isPoint attribute is true, namely whether the object recycled is a separator, dynamically endows class values, and css attributes are respectively as follows:

.totalImg{

width:52px；

height:52px；

}

.totalPoint{

width:26px；

height:52px；

}

in the embodiment, the adaptive rendering of the artistic word can be realized under the condition of lacking the font file of the artistic word by the method for rendering the artistic word, the method is more suitable for providing the application scene of the custom artistic word in the UI design drawing, meanwhile, the method reduces the difficulty of UI design, can provide better webpage visual effect, dynamically sets the artistic font by utilizing the bidirectional binding of vue, has higher flexibility, and can be suitable for development requirements of various different application scenes.

Based on the same inventive concept, the embodiment of the application also provides an artistic word rendering device, and the structure of the artistic word rendering device is shown in fig. 4.

Fig. 4 is a schematic structural diagram of an artistic word rendering device according to an embodiment of the present application. As shown in fig. 4, the apparatus 400 in the embodiment of the present application specifically includes: at least one processor 401; and a memory 403 communicatively coupled (via bus 402) to the at least one processor 401; wherein the memory 403 stores instructions executable by the at least one processor 401 to enable the at least one processor 401 to perform a method of rendering an artwork as described in the above embodiments.

In one or more possible implementations of the embodiments of the present application, the foregoing processor is configured to perform, determine an image to be rendered, and obtain a character in the image to be rendered; the characters are sequenced according to the rendering sequence and then converted into a character string format, and the obtained character string is continuously converted into a local character string, wherein the local character string is obtained by adding separators into the character string; traversing the local character string, acquiring image path information and separator judgment information corresponding to each bit in the local character string, packaging the image path information and the separator judgment information into attribute information of each bit, and sequentially adding the attribute information into a rendering array; and sequentially and dynamically rendering the elements in the rendering array.

In addition, embodiments of the present application provide a non-volatile computer storage medium having stored thereon computer-executable instructions configured to perform a method of rendering an artistic word as described in the above embodiments.

In one or more possible implementations of the embodiments of the present application, the aforementioned computer-executable instructions are configured to determine an image to be rendered, and obtain characters in the image to be rendered; the characters are sequenced according to the rendering sequence and then converted into a character string format, and the obtained character string is continuously converted into a local character string, wherein the local character string is obtained by adding separators into the character string; traversing the local character string, acquiring image path information and separator judgment information corresponding to each bit in the local character string, packaging the image path information and the separator judgment information into attribute information of each bit, and sequentially adding the attribute information into a rendering array; and sequentially and dynamically rendering the elements in the rendering array.

It will be appreciated by those skilled in the art that the present description may be provided as a method, system, or computer program product. Accordingly, the present specification embodiments may take the form of an entirely hardware embodiment, an entirely software embodiment or an embodiment combining software and hardware aspects. Furthermore, the present description embodiments may take the form of a computer program product on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) having computer-usable program code embodied therein.

The present description is described with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the specification. It will be understood that each flow and/or block of the flowchart illustrations and/or block diagrams, and combinations of flows and/or blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions specified in the flowchart flow or flows and/or block diagram block or blocks.

It should also be noted that the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one … …" does not exclude the presence of other like elements in a process, method, article or apparatus that comprises the element.

The description may be described in the general context of computer-executable instructions, such as program modules, being executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform particular tasks or implement particular abstract data types. The specification may also be practiced in distributed computing environments where tasks are performed by remote processing devices that are linked through a communications network. In a distributed computing environment, program modules may be located in both local and remote computer storage media including memory storage devices.

In this specification, each embodiment is described in a progressive manner, and identical and similar parts of each embodiment are all referred to each other, and each embodiment mainly describes differences from other embodiments. In particular, for apparatus, devices, non-volatile computer storage medium embodiments, the description is relatively simple, as it is substantially similar to method embodiments, with reference to the section of the method embodiments being relevant.

The foregoing describes specific embodiments of the present disclosure. Other embodiments are within the scope of the following claims. In some cases, the actions or steps recited in the claims can be performed in a different order than in the embodiments and still achieve desirable results. In addition, the processes depicted in the accompanying figures do not necessarily require the particular order shown, or sequential order, to achieve desirable results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

The foregoing is merely one or more embodiments of the present description and is not intended to limit the present description. Various modifications and alterations to one or more embodiments of this description will be apparent to those skilled in the art. Any modification, equivalent replacement, improvement, or the like, which is within the spirit and principles of one or more embodiments of the present description, is intended to be included within the scope of the claims of the present description.

Claims (10)

1. A method of rendering an artistic word, the method comprising:

determining an image to be rendered, and acquiring characters in the image to be rendered;

the characters are sequenced according to the rendering sequence and then converted into a character string format, and the obtained character string is continuously converted into a local character string, wherein the local character string is obtained by adding separators into the character string;

traversing the local character string, acquiring image path information and separator judgment information corresponding to each bit in the local character string, packaging the image path information and the separator judgment information into attribute information of each bit, and sequentially adding the attribute information into a rendering array;

and sequentially and dynamically rendering the elements in the rendering array.

2. The method of claim 1, wherein after determining the image to be rendered, the method further comprises:

defining a DOM document;

and adding the characters in the image to be rendered into the DOM document according to the rendering sequence.

3. The method of claim 2, wherein after defining the DOM document, the method further comprises:

determining the length L of the character string and determining the number N of separators added in the character string;

acquiring the width D1 of the image to be rendered and the width D2 of the separator;

the width D of the DOM document is determined by the following formula:

D＝L*D1+N*D2

and adding the width D to the unit and binding the width D into the DOM document.

4. A method of rendering an artwork according to claim 1, wherein the method further comprises:

converting the character into a character String format by utilizing a to String () function provided in the Node JS;

and converting the character String into a Local character String by using a to Local String () function provided in the Node JS, wherein the Local character String is the character String added with the kilobit separator.

5. The method of claim 4, wherein after obtaining the local character string, the method further comprises:

determining the length of the local character string;

the difference between the local string length and the string length is determined as the number of separators.

6. The method for rendering artistic word according to claim 1, wherein adding said attribute information to a rendering array, specifically comprises:

and storing the attribute information into the rendering array through a push () function provided in the Node JS.

7. The method for rendering artistic word according to claim 1, wherein dynamically rendering the elements in the rendering array sequentially comprises:

requesting the image to be rendered through the image path information by using a request method provided in the Node JS;

and rendering the image to be rendered onto a webpage in real time.

8. The method for rendering artistic word according to claim 7, wherein said dynamically rendering elements in said rendering array sequentially further comprises:

and reading the value of the separator judgment information, and rendering the separator on the webpage in real time when the value is 1.

9. An apparatus for rendering an artistic word, said apparatus comprising:

at least one processor; the method comprises the steps of,

a memory communicatively coupled to the at least one processor; wherein,,

the memory stores instructions executable by the at least one processor to enable the at least one processor to perform a method of rendering an artwork according to any one of claims 1-8.

10. A non-transitory computer storage medium having stored thereon computer executable instructions, characterized in that the computer executable instructions are arranged to perform a method of rendering an art word according to any of claims 1-8.