CN109472740A - The method and apparatus for generating figure based on web front end - Google Patents
The method and apparatus for generating figure based on web front end Download PDFInfo
- Publication number
- CN109472740A CN109472740A CN201710804941.4A CN201710804941A CN109472740A CN 109472740 A CN109472740 A CN 109472740A CN 201710804941 A CN201710804941 A CN 201710804941A CN 109472740 A CN109472740 A CN 109472740A
- Authority
- CN
- China
- Prior art keywords
- graphic element
- block grade
- toothed edge
- attribute
- block
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Pending
Links
- 238000000034 method Methods 0.000 title claims abstract description 63
- 238000004590 computer program Methods 0.000 claims description 7
- 238000004519 manufacturing process Methods 0.000 abstract description 10
- 230000008859 change Effects 0.000 abstract description 9
- 238000005516 engineering process Methods 0.000 abstract description 2
- 238000010586 diagram Methods 0.000 description 16
- 230000006870 function Effects 0.000 description 9
- 230000008569 process Effects 0.000 description 7
- 230000006854 communication Effects 0.000 description 6
- 241000208340 Araliaceae Species 0.000 description 5
- 235000005035 Panax pseudoginseng ssp. pseudoginseng Nutrition 0.000 description 5
- 235000003140 Panax quinquefolius Nutrition 0.000 description 5
- 238000004891 communication Methods 0.000 description 5
- 235000008434 ginseng Nutrition 0.000 description 5
- 238000012545 processing Methods 0.000 description 5
- 230000004048 modification Effects 0.000 description 4
- 238000012986 modification Methods 0.000 description 4
- 238000004364 calculation method Methods 0.000 description 3
- 230000003287 optical effect Effects 0.000 description 3
- 230000005291 magnetic effect Effects 0.000 description 2
- 239000004065 semiconductor Substances 0.000 description 2
- 238000006467 substitution reaction Methods 0.000 description 2
- 241000406668 Loxodonta cyclotis Species 0.000 description 1
- 230000003796 beauty Effects 0.000 description 1
- 238000000354 decomposition reaction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 230000005611 electricity Effects 0.000 description 1
- 239000000835 fiber Substances 0.000 description 1
- 210000003127 knee Anatomy 0.000 description 1
- 239000004973 liquid crystal related substance Substances 0.000 description 1
- 239000013307 optical fiber Substances 0.000 description 1
- 238000012360 testing method Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T3/00—Geometric image transformations in the plane of the image
- G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting
- G06T3/4038—Image mosaicing, e.g. composing plane images from plane sub-images
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/001—Texturing; Colouring; Generation of texture or colour
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/20—Drawing from basic elements, e.g. lines or circles
- G06T11/206—Drawing of charts or graphs
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
- G06T11/00—2D [Two Dimensional] image generation
- G06T11/60—Editing figures and text; Combining figures or text
Landscapes
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Processing Or Creating Images (AREA)
Abstract
The embodiment of the invention discloses a kind of method and apparatus for generating figure based on web front end, are related to field of computer technology.Wherein, this method comprises: being configured to the attribute of block grade label, to obtain the graphic element of toothed edge；Multiple graphic elements are spliced to block grade object, to obtain the figure for being attached with toothed edge.By above method, the production of figure, change can be made more flexible and convenient, effectively reduce the number of pictures of page reference, page loading velocity is improved, realize better user experience.
Description
Technical field
The present invention relates to field of computer technology more particularly to a kind of method and apparatus for generating figure based on web front end.
Background technique
When web front end makes the figures such as discount coupon, stamp, difficult point is the production of toothed edge.In the prior art, lead to
An aliased pictures are added to DOM (DOM Document Object Model) node frequently with the mode of pseudo- element, i.e., are realized with the mode of picture
Toothed edge, and then realize the production of the figures such as discount coupon, stamp.
In realizing process of the present invention, at least there are the following problems in the prior art for inventor's discovery:
First, production, the modification of figure are very inflexible.For example, if desired a variety of discount coupons, then need to prepare multiple figures
Piece.If the color of discount coupon or the density of sawtooth need to change, also need to remake picture, and replaces into generation
In code.
The second, the load of plurality of pictures can be such that the loading velocity of the page reduces, and influence the overall experience of the page.
If third selects common picture, can all occur stretching fuzzy phenomenon, shadow when being adapted to large-screen mobile phone
Ring user experience.If selecting vector artwork, the production of vector artwork can consume more manpowers and time cost.
Summary of the invention
In view of this, the embodiment of the present invention provides a kind of method and apparatus for generating figure based on web front end, can make
Production, the change of figure are more flexible and convenient, effectively reduce the number of pictures of page reference, improve page loading velocity, realize
Better user experience.
To achieve the above object, according to an aspect of an embodiment of the present invention, it provides a kind of based on web front end generation figure
The method of shape.
The method for generating figure based on web front end of the embodiment of the present invention includes: to be configured to the attribute of block grade label,
To obtain the graphic element of toothed edge；Multiple graphic elements are spliced to block grade object, to obtain being attached with toothed edge
Figure.
Optionally, the method also includes: before the step of attribute to block grade label is configured, determine that block grade is right
As and determine the style configuration value of the graphic element；Wherein, the style configuration value of the graphic element includes: graphic element
Color, the direction of graphic element, the size of graphic element, background color.
Optionally, the step of being configured to the attribute of block grade label includes: to set to the frame attribute of block grade label
It sets.
Optionally, the method also includes: before the step of splicing multiple graphic elements to block grade object, root
Determine the number of graphic element in toothed edge according to the size of described piece of grade object and the size of the graphic element, also, according to
The size of described piece of grade object and the direction of the graphic element determine relative position of the toothed edge with respect to block grade object.
To achieve the above object, according to another aspect of an embodiment of the present invention, it provides a kind of based on web front end generation figure
The device of shape.
The device based on web front end generation figure of the embodiment of the present invention includes: graphic element generation module, for block
The attribute of grade label is configured, to obtain the graphic element of toothed edge；Splicing module, for spelling multiple graphic elements
It is connected to block grade object, to obtain the figure for being attached with toothed edge.
Optionally, described device further include: determining module, for determining block grade object and determining the graphic element
Style configuration value；Wherein, the style configuration value of the graphic element includes: the color of graphic element, the direction of graphic element, figure
The size of shape unit, background color.
Optionally, the graphic element generation module is configured the attribute of block grade label, comprising: to block grade label
Frame attribute is configured.
Optionally, the determining module is also used to: according to the size of the size of described piece of grade object and the graphic element
Determine the number of the graphic element in toothed edge, also, according to the direction of the size of described piece of grade object and the graphic element
Determine relative position of the toothed edge with respect to block grade object.
To achieve the above object, another aspect according to an embodiment of the present invention, provides a kind of electronic equipment.
The electronic equipment of the embodiment of the present invention, comprising: one or more processors；And storage device, for storing one
A or multiple programs；When one or more of programs are executed by one or more of processors, so that one or more
A processor realizes the method for generating figure based on web front end of the embodiment of the present invention.
To achieve the above object, another aspect according to an embodiment of the present invention provides a kind of computer-readable medium.
The computer-readable medium of the embodiment of the present invention, is stored thereon with computer program, and described program is held by processor
The method that figure is generated based on web front end of the embodiment of the present invention is realized when row.
One embodiment in foregoing invention has the following advantages that or the utility model has the advantages that in embodiments of the present invention, by right
The attribute of block grade label is configured, and can obtain the graphic element of toothed edge；By by multiple graphic elements splice to
Block grade object can obtain the figure for being attached with toothed edge.Figure is generated by above method, the production, more of figure can be made
Change it is more flexible and convenient, effectively reduce the page reference number of pictures, improve page loading velocity, realize better user's body
It tests.
Further effect possessed by above-mentioned non-usual optional way adds hereinafter in conjunction with specific embodiment
With explanation.
Detailed description of the invention
Attached drawing for a better understanding of the present invention, does not constitute an undue limitation on the present invention.Wherein:
Fig. 1 is the key step schematic diagram of the method according to an embodiment of the present invention that figure is generated based on web front end；
Fig. 2 is the flow diagram for generating a kind of figure according to the method for the embodiment of the present invention；
Fig. 3 a is the schematic diagram of the rectangle generated in process shown in Fig. 2；
Fig. 3 b is the schematic diagram of the triangle generated in process shown in Fig. 2；
Fig. 3 c is the trapezoidal schematic diagram generated in process shown in Fig. 2；
Fig. 3 d is the schematic diagram of the figure generated in process shown in Fig. 2；
Fig. 4 is the main modular schematic diagram of the device according to an embodiment of the present invention that figure is generated based on web front end；
Fig. 5 is that the embodiment of the present invention can be applied to exemplary system architecture figure therein；
Fig. 6 is adapted for the structural schematic diagram for the computer system for realizing the electronic equipment of the embodiment of the present invention.
Specific embodiment
Below in conjunction with attached drawing, an exemplary embodiment of the present invention will be described, including the various of the embodiment of the present invention
Details should think them only exemplary to help understanding.Therefore, those of ordinary skill in the art should recognize
It arrives, it can be with various changes and modifications are made to the embodiments described herein, without departing from scope and spirit of the present invention.Together
Sample, for clarity and conciseness, descriptions of well-known functions and structures are omitted from the following description.
It should be pointed out that in the absence of conflict, the feature in embodiment and embodiment in the present invention can be with
It is combined with each other.
Fig. 1 is the key step schematic diagram of the method according to an embodiment of the present invention that figure is generated based on web front end.Such as figure
Shown in 1, this method is mainly comprised the steps that
Step S101, the attribute of block grade label is configured, to obtain the graphic element of toothed edge.
In embodiments of the present invention, the toothed edge can be regarded as the pattern being made of multiple duplicate graphic elements.Than
Such as, by multiple trapezoidal sawtooth patterns constituted, by multiple triangulars at sawtooth patterns, the sawtooth being made of multiple semicircles
Pattern, etc..
When executing step S101, a DOM label can be first set, and set block grade label for the DOM label.Than
Such as, by the way that the attribute value of display (display) attribute of DOM label is set as block (block), i.e., the DOM label is arranged to
Block grade label.It is obtaining block grade label and then the attribute of block grade label is being configured, to obtain the figure list of toothed edge
Member.In a specific embodiment, step S101 includes: to be configured to border (frame) attribute of block grade label.For example,
It, can be by the way that the border width and border color and by block grade label monolith of block grade label be arranged when graphic element is triangle
Width and height be set as 0px (pixel) Lai Shixian.For example, setting block grade label can be passed through when graphic element is trapezoidal
Border width and border color, and width and the height of block grade label monolith are set to realize.In another specific embodiment
In, step S101 includes: to be configured to border-radius (frame-radius) attribute of block grade label.For example, working as figure
When unit is semicircle, it can be realized by setting border-radius attribute.
Further, before executing step S101, this method further include: determine need plus toothed edge block grade object and
Determine the style configuration value of the graphic element.Wherein, the style configuration value of the graphic element includes: the face of graphic element
Color, the direction of graphic element, the size (such as width, height, radius etc.) of graphic element, background color.When it is implemented, needing
Adding the block grade object of toothed edge can be determined by being passed to the value of parameter object (object)；The pattern of the graphic element is matched
The value determination that value can be passed to parameter by other is set, can also be determined by obtaining default value.For example, by being passed to parameter
The value of color (color) can determine the color of graphic element, can be according to the silent of color when the value of incoming parameter color is default
Value is recognized to determine.For example, can determine the direction of graphic element by the value for being passed to parameter direction (direction), in incoming ginseng
When number direction is default, it can be determined according to the default value in direction.So, when the color, close for needing to modify toothed edge
When the patterns such as degree, incoming parameter only need to be modified, so that pattern change is more convenient and flexible.
Step S102, multiple graphic elements are spliced to block grade object, to obtain the figure for being attached with toothed edge.
When it is implemented, multiple graphic elements can be connected, and leads to after obtaining graphic element according to step S101
AppendChild method in a kind of JS (Javascript, client-side scripting language) grammer is crossed by the multiple graphic element
On splicing to block grade object.It will be appreciated that those skilled in the art also can be used in the case where not influencing present invention implementation
Other methods (such as insertBefore method in JS grammer) splice the multiple graphic element to block grade object.
Further, before executing step S102, this method further include: according to the size of described piece of grade object and the figure
The size of shape unit determines the number of the graphic element of toothed edge, also, according to the size of described piece of grade object and the figure
The direction of unit determines relative position of the toothed edge with respect to block grade object.For example, when needs will be attached by the trapezoidal toothed edge constituted
When being added in the left side of block grade object, graphic element in toothed edge can determine according to the height of block grade object and trapezoidal height
Number；It is the relative position that can determine toothed edge with respect to block grade object according to the width of block grade object and trapezoidal direction.
In embodiments of the present invention, it is configured by the attribute to block grade label, the figure list of toothed edge can be obtained
Member；By the way that multiple graphic elements are spliced the figure that can obtain being attached with toothed edge to block grade object.With existing generation
The method of figure is compared, and method of the invention can make the production of figure, change more flexible and convenient, effectively reduces page reference
Number of pictures, improve page loading velocity, realize better user experience.
Fig. 2 is the flow diagram for generating a kind of figure according to the method for the embodiment of the present invention.Wherein, it generates according to fig. 2
Figure can be found in Fig. 3 d.As shown in Fig. 2, this method mainly includes following below scheme:
Step S201, it determines block grade object and determines each trapezoidal style configuration value in toothed edge.
In process shown in Fig. 2, the graphic element be it is trapezoidal, the style configuration value of the graphic element includes: trapezoidal
Color, trapezoidal direction, trapezoidal width, trapezoidal background color.When it is implemented, if incoming when passing ginseng
The value of object, color, backgroundColor, direction, width then determine block according to the value of incoming object
Grade object, trapezoidal color is determined according to the value of incoming color, is determined and is carried on the back according to the value of incoming backgroundColor
Scape color determines trapezoidal direction according to the value of incoming direction, and trapezoidal width is determined according to the value of incoming width
Degree.The value that object has only been passed when if passing ginseng determines block grade object according to the value of incoming object, and according to other ginsengs
Several default values determines style configuration value.For example, if can lead to using the background color of block grade object as trapezoidal default color
Window.getComputedStyle (object, false) the .backgroundColor method crossed in JS obtains trapezoidal write from memory
Recognize color；If the window.getComputedStyle in JS can be passed through using the color of the page as the background color of default
(body, false) .backgroundColor method obtains default background color.
Step S202, the attribute of block grade label is configured, it is trapezoidal to make one in toothed edge.
In order to make it easy to understand, trapezoidal procedure decomposition will be generated below are as follows: first generate it is triangular, be adjusted to again it is trapezoidal this two
A link.Firstly, one DOM label<i>of setting, and block grade label is set by<i>.Due to the sawtooth in Fig. 3 d to be generated
The upper side frame of label<i>, following width of frame to the left, therefore can be all provided with as 2px by the direction on side, and the width of left frame is set as 3px,
The width of left frame is set as 0px, and the width of label<i>and height are set as 0px.So, can be obtained one it is a length of
4px, the rectangle (as shown in Figure 3a) that width is 3px.Then, the color of upper side frame and lower frame is set as determining in step S101
Background color.A triangle (as shown in Figure 3b) can be obtained as a result,.Next, the height of label<i>is changed to 1px, both
An available a height of 5px, width are the trapezoidal (as shown in Figure 3c) of 3px.When it is implemented, can directly be obtained by corresponding code
One into toothed edge is trapezoidal.It should be understood that should not constitute above with respect to trapezoidal exemplary illustration is generated to the present invention
The limitation of protection scope.
Step S203, number trapezoidal in toothed edge is determined.
In this step, object.offsetHeight (one of JS grammer acquisition object height in JS can be first passed through
The method of degree) method obtains the height of block grade object, toothed edge is then calculated according to the height of block grade object and trapezoidal height
In trapezoidal number.For example, trapezoidal height is 5px, then number trapezoidal in toothed edge when the height of block grade object is 100px
Mesh is 20.When it is implemented, if calculated trapezoidal number is not integer, can take more one it is trapezoidal.For pattern
Beauty can set hidden (hiding) for overflow (spilling) attribute of block grade object, can both hide what toothed edge had more
Part.
Step S204, with the trapezoidal composition toothed edge to ascertain the number, and toothed edge is spliced to block grade object.
In this step, by 20 it is trapezoidal connect, required toothed edge can be obtained.Then, by JS grammer
AppendChild method toothed edge can be spliced to block grade object.When it is implemented, those skilled in the art can also root
Toothed edge is spliced to block grade object according to other JS methods (such as insertBefore method).
Step S205, toothed edge is placed into the relative position of preset opposite block grade object.
In this step, toothed edge can be obtained with respect to block grade object according to the width in the direction of toothed edge and block grade object
Relative position.For example, as shown in Figure 3d, to the left, then toothed edge is with respect to block in the direction (i.e. the direction of graphic element) of toothed edge
The relative position of grade object can be set as "-(tooth width-preset constant) ".For example, the direction of toothed edge is to the right, then toothed edge phase
" width -1 of block grade object " can be set as to the relative position of block grade object.
In embodiments of the present invention, by executing step S201 to step S205, figure shown in Fig. 3 d is produced.Into one
Step by the way that the code of method shown in Fig. 2 to be packaged, and determines time that this method executes in the specific implementation according to demand
Number, can easily and flexibly obtain the figure of various patterns.Compared with the prior art for generating figure by picture, the present invention is real
Applying the method in example can make the production of figure, change more flexible and convenient, effectively reduce the number of pictures of page reference, improve
Page loading velocity realizes better user experience.
Fig. 4 is the main modular schematic diagram of the device according to an embodiment of the present invention that figure is generated based on web front end.Such as figure
Shown in 4, the device 400 for generating figure based on web front end specifically includes that graphic element generation module 401, splicing module 402.
Graphic element generation module 401 is configured for the attribute to block grade label, to obtain the figure list of toothed edge
Member.Wherein, the toothed edge can be regarded as the pattern being made of multiple duplicate graphic elements.For example, trapezoidal being made of multiple
Sawtooth patterns, by multiple triangulars at sawtooth patterns, the sawtooth patterns, etc. being made of multiple semicircles.
Specifically, a DOM label can be first arranged in graphic element generation module 401, and sets block for the DOM label
Grade label.After obtaining block grade label, graphic element generation module 401 is again configured the attribute of block grade label, with
To the graphic element of toothed edge.In a specific embodiment, the attribute of 401 pairs of block grade labels of graphic element generation module carries out
Setting includes: to be configured to border (frame) attribute of block grade label.For example, can lead to when graphic element is triangle
It crosses the border width that block grade label is set and border color and the width of block grade label monolith and height is set as 0px (pixel)
To realize.For example, the border width and border color of setting block grade label, Yi Jishe can be passed through when graphic element is trapezoidal
Width and the height of block grade label monolith are set to realize.In another specific embodiment, 401 pairs of blocks of graphic element generation module
It includes: to be configured to border-radius (frame-radius) attribute of block grade label that the attribute of grade label, which is configured,.Example
Such as, it when graphic element is semicircle, can be realized by setting border-radius attribute.
Splicing module 402, for splicing multiple graphic elements to block grade object, to obtain being attached with toothed edge
Figure.
When it is implemented, multiple graphic elements can be connected by splicing module 402, and pass through appendChild (JS grammer
One of method, can be used for adding node in the last one child node of specified node element) method is by the multiple figure
On unit spliced to block grade object.In addition, other methods (such as the insertBefore in JS grammer can also be used in splicing module
Method) the multiple graphic element is spliced to block grade object.
In a preferred embodiment, device further include: determining module.The determining module is used for: determining that block grade is right
As and determine the style configuration value of the graphic element.Wherein, the style configuration value of the graphic element includes: graphic element
Color, the direction of graphic element, the size of graphic element, background color.
When it is implemented, determining module can determine block grade object by being passed to the value of parameter object (object).Determine mould
Block can determine style configuration value by being passed to the value of the parameters such as parameter color (color), direction (direction), in these ginsengs
In the case that number is default, style configuration value can also be determined by obtaining default value.By the way that determining module is arranged, it is convenient for graphic element
Generation module carries out attribute setting according to the style configuration value determined.When patterns such as color, the density for needing to modify toothed edge
When, the value of incoming parameter need to be only modified, so that pattern change is more convenient and flexible.
Further, the determining module is also used to: according to the size of the size of described piece of grade object and the graphic element
Determine the number of the graphic element in toothed edge, also, according to the direction of the size of described piece of grade object and the graphic element
Determine relative position of the toothed edge with respect to block grade object.For example, right when needing that block grade will be attached to by the trapezoidal toothed edge constituted
When the left side of elephant, determining module can be the graphic element that can determine toothed edge according to the height of block grade object and trapezoidal height
Number；Determining module can be that can determine that toothed edge is opposite with respect to block grade object according to the width of block grade object and trapezoidal direction
Position.
In embodiments of the present invention, it is configured, can be obtained by attribute of the graphic element generation module to block grade label
To the graphic element of toothed edge；Multiple graphic elements are spliced to block grade object by splicing module, can be added
There is the figure of toothed edge.The device of the invention can make the production of figure, change more flexible and convenient, effectively reduce page reference
Number of pictures, improve page loading velocity, realize better user experience.
Fig. 5, which is shown, can generate the method for figure based on web front end or based on web front end using the embodiment of the present invention
Generate the exemplary system architecture 500 of the device of figure.System architecture shown in Fig. 5 is only an example, should not be to this hair
The function and use scope of bright embodiment bring any restrictions.
As shown in figure 5, system architecture 500 may include terminal device 501,502,503, network 504 and server 505.
Network 504 between terminal device 501,502,503 and server 505 to provide the medium of communication link.Network 504 can be with
Including various connection types, such as wired, wireless communication link or fiber optic cables etc..
User can be used terminal device 501,502,503 and be interacted by network 504 with server 505, to receive or send out
Send message etc..Various telecommunication customer end applications, such as the application of shopping class, net can be installed on terminal device 501,502,503
The application of page browsing device, searching class application, instant messaging tools, mailbox client, social platform software etc..
Terminal device 501,502,503 can be the various electronic equipments with display screen and supported web page browsing, packet
Include but be not limited to smart phone, tablet computer, pocket computer on knee and desktop computer etc..
Server 505 can be to provide the server of various services, such as utilize terminal device 501,502,503 to user
The shopping class website browsed provides the back-stage management server supported.Back-stage management server can believe the product received
The numbers such as breath inquiry request carry out the processing such as analyzing, and processing result is fed back to terminal device.
It should be noted that generating the method for figure generally by terminal based on web front end provided by the embodiment of the present invention
Equipment executes, and correspondingly, the device for generating figure based on web front end is generally positioned in terminal device.
It should be understood that the number of terminal device, network and server in Fig. 5 is only schematical.According to realization need
It wants, can have any number of terminal device, network and server.
Below with reference to Fig. 6, it illustrates the computer systems 600 for the electronic equipment for being suitable for being used to realize the embodiment of the present invention
Structural schematic diagram.Electronic equipment shown in Fig. 6 is only an example, function to the embodiment of the present invention and should not use model
Shroud carrys out any restrictions.
As shown in fig. 6, computer system 600 includes central processing unit (CPU) 601, it can be read-only according to being stored in
Program in memory (ROM) 602 or be loaded into the program in random access storage device (RAM) 603 from storage section 608 and
Execute various movements appropriate and processing.In RAM 603, also it is stored with system 600 and operates required various programs and number.
CPU 601, ROM 602 and RAM 603 are connected with each other by bus 604.Input/output (I/O) interface 605 is also connected to always
Line 604.
I/O interface 605 is connected to lower component: the importation 606 including keyboard, mouse etc.；It is penetrated including such as cathode
The output par, c 607 of spool (CRT), liquid crystal display (LCD) etc. and loudspeaker etc.；Storage section 608 including hard disk etc.；
And the communications portion 609 of the network interface card including LAN card, modem etc..Communications portion 609 via such as because
The network of spy's net executes communication process.Driver 610 is also connected to I/O interface 605 as needed.Detachable media 611, such as
Disk, CD, magneto-optic disk, semiconductor memory etc. are mounted on as needed on driver 610, in order to read from thereon
Computer program be mounted into storage section 608 as needed.
Particularly, disclosed embodiment, the process described above with reference to flow chart may be implemented as counting according to the present invention
Calculation machine software program.For example, embodiment disclosed by the invention includes a kind of computer program product comprising be carried on computer
Computer program on readable medium, the computer program include the program code for method shown in execution flow chart.?
In such embodiment, which can be downloaded and installed from network by communications portion 609, and/or from can
Medium 611 is dismantled to be mounted.When the computer program is executed by central processing unit (CPU) 601, system of the invention is executed
The above-mentioned function of middle restriction.
It should be noted that computer-readable medium shown in the present invention can be computer-readable signal media or meter
Calculation machine readable storage medium storing program for executing either the two any combination.Computer readable storage medium for example can be --- but not
Be limited to --- electricity, magnetic, optical, electromagnetic, infrared ray or semiconductor system, device or device, or any above combination.Meter
The more specific example of calculation machine readable storage medium storing program for executing can include but is not limited to: have the electrical connection, just of one or more conducting wires
Taking formula computer disk, hard disk, random access storage device (RAM), read-only memory (ROM), erasable type may be programmed read-only storage
Device (EPROM or flash memory), optical fiber, portable compact disc read-only memory (CD-ROM), light storage device, magnetic memory device,
Or above-mentioned any appropriate combination.In the present invention, computer readable storage medium can be it is any include or storage journey
The tangible medium of sequence, the program can be commanded execution system, device or device use or in connection.And at this
In invention, computer-readable signal media may include in a base band or as carrier wave a part propagate number signal,
Wherein carry computer-readable program code.The number signal of this propagation can take various forms, including but unlimited
In electromagnetic signal, optical signal or above-mentioned any appropriate combination.Computer-readable signal media can also be that computer can
Any computer-readable medium other than storage medium is read, which can send, propagates or transmit and be used for
By the use of instruction execution system, device or device or program in connection.Include on computer-readable medium
Program code can transmit with any suitable medium, including but not limited to: wireless, electric wire, optical cable, RF etc. are above-mentioned
Any appropriate combination.
Flow chart and block diagram in attached drawing are illustrated according to the system of various embodiments of the invention, method and computer journey
The architecture, function and operation in the cards of sequence product.In this regard, each box in flowchart or block diagram can generation
A part of one module, program segment or code of table, a part of above-mentioned module, program segment or code include one or more
Executable instruction for implementing the specified logical function.It should also be noted that in some implementations as replacements, institute in box
The function of mark can also occur in a different order than that indicated in the drawings.For example, two boxes succeedingly indicated are practical
On can be basically executed in parallel, they can also be executed in the opposite order sometimes, and this depends on the function involved.Also it wants
It is noted that the combination of each box in block diagram or flow chart and the box in block diagram or flow chart, can use and execute rule
The dedicated hardware based systems of fixed functions or operations is realized, or can use the group of specialized hardware and computer instruction
It closes to realize.
Being described in module involved in the embodiment of the present invention can be realized by way of software, can also be by hard
The mode of part is realized.Described module also can be set in the processor, for example, can be described as: a kind of processor packet
Include graphic element generation module, splicing module.Wherein, the title of these modules is not constituted under certain conditions to the module sheet
The restriction of body, for example, graphic element generation module is also described as " generating the module of the graphic element of toothed edge ".
As on the other hand, the present invention also provides a kind of computer-readable medium, which be can be
Included in equipment described in above-described embodiment；It is also possible to individualism, and without in the supplying equipment.Above-mentioned calculating
Machine readable medium carries one or more program, when said one or multiple programs are executed by the equipment, makes
It obtains the equipment and executes following below scheme: the attribute of block grade label being configured, to obtain the graphic element of toothed edge；By multiple institutes
It states graphic element to splice to block grade object, to obtain the figure for being attached with toothed edge.
Above-mentioned specific embodiment, does not constitute a limitation on the scope of protection of the present invention.Those skilled in the art should be bright
It is white, design requirement and other factors are depended on, various modifications, combination, sub-portfolio and substitution can occur.It is any
Made modifications, equivalent substitutions and improvements etc. within the spirit and principles in the present invention, should be included in the scope of the present invention
Within.
Claims (10)
1. a kind of method for generating figure based on web front end, which is characterized in that the described method includes:
The attribute of block grade label is configured, to obtain the graphic element of toothed edge；
Multiple graphic elements are spliced to block grade object, to obtain the figure for being attached with toothed edge.
2. the method according to claim 1, wherein the method also includes:
Before the step of attribute to block grade label is configured, determines block grade object and determine the sample of the graphic element
Formula Configuration Values；Wherein, the style configuration value of the graphic element includes: the color of graphic element, the direction of graphic element, figure
The size of unit, background color.
3. the method according to claim 1, wherein the step of being configured to the attribute of block grade label includes:
The frame attribute of block grade label is configured.
4. the method according to claim 1, wherein the method also includes:
Before the step of splicing multiple graphic elements to block grade object, according to the size of described piece of grade object and described
The size of graphic element determines the number of graphic element in toothed edge, also, according to the size of described piece of grade object and the figure
The direction of shape unit determines relative position of the toothed edge with respect to block grade object.
5. a kind of device for generating figure based on web front end, which is characterized in that described device includes:
Graphic element generation module is configured for the attribute to block grade label, to obtain the graphic element of toothed edge；
Splicing module, for splicing multiple graphic elements to block grade object, to obtain the figure for being attached with toothed edge.
6. device according to claim 5, which is characterized in that described device further include:
Determining module, for determining block grade object and determining the style configuration value of the graphic element；
Wherein, the style configuration value of the graphic element includes: the color of graphic element, the direction of graphic element, graphic element
Size, background color.
7. device according to claim 5, which is characterized in that attribute of the graphic element generation module to block grade label
It is configured, comprising: the frame attribute of block grade label is configured.
8. device according to claim 6, which is characterized in that the determining module is also used to: according to described piece of grade object
Size and the size of the graphic element determine the number of graphic element in toothed edge, also, according to described piece of grade object
The direction of size and the graphic element determines relative position of the toothed edge with respect to block grade object.
9. a kind of electronic equipment characterized by comprising
One or more processors；
Storage device, for storing one or more programs,
When one or more of programs are executed by one or more of processors, so that one or more of processors are real
The now method as described in any in Claims 1-4.
10. a kind of computer-readable medium, is stored thereon with computer program, which is characterized in that described program is held by processor
The method as described in any in Claims 1-4 is realized when row.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710804941.4A CN109472740A (en) | 2017-09-08 | 2017-09-08 | The method and apparatus for generating figure based on web front end |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710804941.4A CN109472740A (en) | 2017-09-08 | 2017-09-08 | The method and apparatus for generating figure based on web front end |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN109472740A true CN109472740A (en) | 2019-03-15 |
Family
ID=65658094
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710804941.4A Pending CN109472740A (en) | 2017-09-08 | 2017-09-08 | The method and apparatus for generating figure based on web front end |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109472740A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112445478A (en) * | 2020-12-09 | 2021-03-05 | 北京有竹居网络技术有限公司 | Graphic file processing method, device, equipment and medium |
| CN112749356A (en) * | 2019-10-30 | 2021-05-04 | 北京国双科技有限公司 | Webpage graph display method and device |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104793837A (en) * | 2014-01-20 | 2015-07-22 | 腾讯科技（深圳）有限公司 | Picture generation method and device |
| CN205964955U (en) * | 2016-06-27 | 2017-02-22 | 曾子木 | Picture arragement device based on mode of pasting |
-
2017
- 2017-09-08 CN CN201710804941.4A patent/CN109472740A/en active Pending
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104793837A (en) * | 2014-01-20 | 2015-07-22 | 腾讯科技（深圳）有限公司 | Picture generation method and device |
| CN205964955U (en) * | 2016-06-27 | 2017-02-22 | 曾子木 | Picture arragement device based on mode of pasting |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112749356A (en) * | 2019-10-30 | 2021-05-04 | 北京国双科技有限公司 | Webpage graph display method and device |
| CN112445478A (en) * | 2020-12-09 | 2021-03-05 | 北京有竹居网络技术有限公司 | Graphic file processing method, device, equipment and medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN107832045A (en) | Across the method and apparatus of programming language interface conversion | |
| CN107844371A (en) | Task processing method, system and electronic equipment | |
| CN106980508A (en) | Method and apparatus for generating the page | |
| CN110020329A (en) | For generating the methods, devices and systems of webpage | |
| CN113031946B (en) | Method and device for rendering page component | |
| CN110458173A (en) | Method and apparatus for generating article color value | |
| CN110263279B (en) | Page generation method and device, electronic equipment and computer readable storage medium | |
| CN109857971A (en) | Page rendering method and apparatus | |
| CN106874519A (en) | Webpage representation method and apparatus | |
| CN106896937A (en) | Method and apparatus for being input into information | |
| CN109981719A (en) | Information processing method and its system, computer system and computer readable medium | |
| CN110020376A (en) | Data linkage method and system | |
| CN110134427A (en) | A kind of method and apparatus generating code file | |
| CN108805379A (en) | Support that multi-mode is honoured an agreement the system and method for flow | |
| CN109002282A (en) | A kind of method and apparatus for realizing animation effect in web page exploitation | |
| CN109582317A (en) | Method and apparatus for debugging boarding application | |
| CN110007936A (en) | Data processing method and device | |
| CN110489106A (en) | A kind of generation method, device, medium and the electronic equipment of project initial code | |
| CN109597956A (en) | Page display method and device | |
| CN109271160A (en) | Active rule construction method, device and computer system, medium | |
| CN109062560A (en) | Method and apparatus for generating information | |
| CN109992177A (en) | User interaction approach, system, electronic equipment and the computer media of electronic equipment | |
| CN109472740A (en) | The method and apparatus for generating figure based on web front end | |
| CN107515947A (en) | picture loading method and its system | |
| CN112486482A (en) | Page display method and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20190315 |
|
| RJ01 | Rejection of invention patent application after publication |