CN108459856A - Interface icon configuration method, device, computer equipment and storage medium - Google Patents
Interface icon configuration method, device, computer equipment and storage medium Download PDFInfo
- Publication number
- CN108459856A CN108459856A CN201810167613.2A CN201810167613A CN108459856A CN 108459856 A CN108459856 A CN 108459856A CN 201810167613 A CN201810167613 A CN 201810167613A CN 108459856 A CN108459856 A CN 108459856A
- Authority
- CN
- China
- Prior art keywords
- icon
- target
- interface
- region
- parameter
- 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
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The invention discloses a kind of interface icon configuration method, device, computer equipment and storage medium, this method to include：Show that interface to be configured, the interface to be configured include at least one region to be configured；Icon configuring request is obtained, the icon configuring request includes Icon ID and region ID；Based on the Icon ID, operation creates code using the icon corresponding with the Icon ID of the box shadow attribute configurations of CSS3, and Code obtaining target icon is created based on the icon；Based on the region ID, target area corresponding with the region ID is obtained on interface to be configured；The target icon is shown on the target area.The interface icon configuration method realizes the configuration of interface icon by pure CSS3 codes, accelerates system response time, while avoiding client compatibling problem.
Description
Technical field
The present invention relates to field of computer technology more particularly to a kind of interface icon configuration method, device, computer equipments
And storage medium.
Background technology
For the ease of user's operation, the application interface of the application interface of current browser or various APP are each equipped with icon,
User clicks any icon and corresponding operation can be realized.The icon configured on current application interface is typically to use to be introduced directly into
The mode of png pictures or gif pictures configures, and the icon that this mode configures on the application interface come can only match same ruler
Very little interface, cannot achieve Auto-matching.It needs to be directed respectively into the png figures that size matches on various sizes of application interface
Piece or gif pictures, cannot achieve compatibility, to increase additional picture request, influence the allocative efficiency of application interface.And
And the application interface is needed application interface being modified as corresponding size, be needed at this time to application interface when being adapted to different terminals
On icon changed accordingly, to influence system performance, and increase modification maintenance cost.
Invention content
A kind of interface icon configuration method of offer of the embodiment of the present invention, device, computer equipment and storage medium, to solve
When creating icon on current application interface, it is introduced directly into the problem of picture can increase additional picture request and influence system performance.
In a first aspect, the embodiment of the present invention provides a kind of interface icon configuration method, including：
Show that interface to be configured, the interface to be configured include at least one region to be configured；
Icon configuring request is obtained, the icon configuring request includes Icon ID and region ID；
Based on the Icon ID, operation uses the corresponding with the Icon ID of the box-shadow attribute configurations of CSS3
Icon creates code, and Code obtaining target icon is created based on the icon；
Based on the region ID, target area corresponding with the region ID is obtained on interface to be configured；
The target icon is shown on the target area.
Second aspect, the embodiment of the present invention provide a kind of interface icon configuration device, including：
Configuration interface display module, for showing that interface to be configured, the interface to be configured include at least one to be configured
Region；
Configuring request acquisition module, for obtaining icon configuring request, the icon configuring request includes Icon ID and area
Domain ID；
Target icon acquisition module, for being based on the Icon ID, operation uses the box-shadow attribute configurations of CSS3
Icon corresponding with the Icon ID create code, based on the icon create Code obtaining target icon；
Target area acquisition module obtains and ID pairs of the region for being based on the region ID on interface to be configured
The target area answered；
Target icon display module, for showing the target icon on the target area.
The third aspect, the embodiment of the present invention provide a kind of computer equipment, including memory, processor and are stored in institute
The computer program that can be run in memory and on the processor is stated, the processor executes real when the computer program
The step of existing interface icon configuration method.
Fourth aspect, the embodiment of the present invention provide a kind of computer readable storage medium, the computer-readable storage medium
Matter is stored with computer program, and the computer program realizes the step of the interface icon configuration method when being executed by processor
Suddenly.
In interface icon configuration method provided in this embodiment, device, computer equipment and storage medium, according to getting
Icon configuring request in region ID and Icon ID, operation using CSS3 box-shadow attribute configurations with Icon ID phase
Corresponding icon creates code, to acquire target icon, can obtain corresponding target using code means according to Icon ID
Icon advantageously reduces the exploitation deployment cost of interface icon, improves the allocative efficiency of target icon.Simultaneously according to region ID,
Target area corresponding with region ID is obtained on interface to be configured, and shows the target icon on target area, to complete
The configuration of interface icon.In interface icon configuration method, device, computer equipment and the storage medium, pass through pure CSS3 codes
The configuration of interface icon is realized, accelerates icon allocative efficiency, and improve system response time, moreover, because CSS3 can be applied
In different system so that it can be applicable in different system using the target icon of the box-shadow attribute configurations of CSS3, it is compatible
Property is strong.
Description of the drawings
In order to illustrate the technical solution of the embodiments of the present invention more clearly, below by institute in the description to the embodiment of the present invention
Attached drawing to be used is needed to be briefly described, it should be apparent that, the accompanying drawings in the following description is only some implementations of the present invention
Example, for those of ordinary skill in the art, without having to pay creative labor, can also be according to these attached drawings
Obtain other attached drawings.
Fig. 1 is a flow chart of the interface icon configuration method provided in the embodiment of the present invention 1.
Fig. 2 is a specific schematic diagram of step S30 in Fig. 1.
Fig. 3 is a specific schematic diagram of step S50 in Fig. 1.
Fig. 4 is a specific schematic diagram of step S52 in Fig. 3.
Fig. 5 is another flow chart of the interface icon configuration method provided in the embodiment of the present invention 1.
Fig. 6 is a schematic diagram of the interface icon configuration device provided in the embodiment of the present invention 2.
Fig. 7 is a schematic diagram of 4 Computer equipment of the embodiment of the present invention.
Specific implementation mode
Following will be combined with the drawings in the embodiments of the present invention, and technical solution in the embodiment of the present invention carries out clear, complete
Site preparation describes, it is clear that described embodiments are some of the embodiments of the present invention, instead of all the embodiments.Based on this hair
Embodiment in bright, the every other implementation that those of ordinary skill in the art are obtained without creative efforts
Example, shall fall within the protection scope of the present invention.
Embodiment 1
Fig. 1 shows a flow chart of the present embodiment median surface icon configuration method.The interface icon configuration method is applied
On computer equipment, for realizing the web interface to computer equipment or the boundary to installing APP on a computing device
Face carries out interface icon configuration, it is intended to facilitate user to operate, promote user experience.Wherein, the computer equipment be can
The equipment for carrying out human-computer interaction with user, the including but not limited to equipment such as computer, smart mobile phone and tablet.As shown in Figure 1, the boundary
Face icon configuration method includes the following steps：
S10：Show that interface to be configured, interface to be configured include at least one region to be configured.
Interface to be configured refers to the interface for needing to carry out icon configuration.Region to be configured refers to that interface to be configured needs to show
The region of icon or interface content.For example, can configurable size parameter be in the interface to be configured of 720px × 1280px
The region to be configured of 300px × 400px.In the present embodiment, by showing interface to be configured, each in the interface to be configured waits for
It is configurable on configuring area to fill corresponding icon or interface content, it is formed after the completion of by all area fillings to be configured
Interface, as corresponding webpage or APP will finally show interface on a computing device.
S20：Icon configuring request is obtained, icon configuring request includes Icon ID and region ID.
Icon configuring request is for configuring matching for specific icon on specific region to be configured in interface to be configured
Set request.Wherein, specific region to be configured is determined by the region ID in icon configuring request.And specific icon is matched by icon
The Icon ID set in request determines.
Wherein, Icon ID is the mark of icon for identification, and each Icon ID corresponds to an icon.The icon can be
Regular icon can also be irregular icon.Wherein, regular icon can be to some iconic element (such as triangles, square
And figure) by preset element combinations rule it is combined the icon to be formed.Irregular icon refers to that cannot use element combinations
Rule is combined iconic element the icon to be formed.
Wherein, region ID is the mark in the difference regions to be configured on interface to be configured for identification, ID pairs of each region
A region to be configured is answered, in order to quickly find corresponding region to be configured on interface to be configured by region ID.This implementation
In example, it can determine the position in region to be configured by the coordinate of an endpoint or central point in setting region to be configured, such as will
The coordinate of one endpoint in the upper left corner in the region to be configured is waited for as its location parameter to define one on interface to be configured
Configuring area, and each region to be configured is made to correspond to a region ID.
Specifically, server can get the icon configuring request of client transmission, and icon configuring request is to use to be somebody's turn to do
The developer of client is based on actual development demand, after the icon of display interface required for determining, by client to service
The icon configuring request that device is sent carries Icon ID and region ID in the icon configuring request, is asked to be based on icon configuration
It asks, the corresponding icon of Icon ID is shown on the corresponding regions to be configured region ID.
S30：Based on Icon ID, operation uses the icon corresponding with Icon ID of the box-shadow attribute configurations of CSS3
Code is created, Code obtaining target icon is created based on icon.
Wherein, target icon refers to the icon corresponding with Icon ID arrived using CSS3 technical limit spacings.
CSS3 is the upgraded version of CSS technologies, CSS, that is, cascading style sheets (Cascading Style Sheet), in webpage
Cascading style sheets technology is used when making, and effectively the layout of the page, font, color, background and other effects can be realized
It is more accurately controlled, while also adding some new label functions, keep webpage visual presentation aspect better, mainly regard
The rendering of feel.In CSS, as long as modifying to corresponding code, so that it may to change the corresponding portion of the same page, Huo Zhexiu
Change the appearance and/or format of the different page of quantity.Compared with CSS, CSS3 not only contributes to development and maintenance, and can improve
The performance of website, increases the accessibility and availability of website, so that website is adapted to more equipment, or even may be used also where the page
To optimize website SEO, the search rank result of website is improved.Code is created using the icon of CSS3 configurations, can in IOS systems and
It is applied in ANDROID systems, compatibility is strong.
Box-shadow attributes are directed to the one or more shades of addition in frame, have additivity, the essence of effect real
It is the duplication to picture itself on border, and new picture is formed based on replicating.Such as realize the regular icon of a five-pointed star, I
Can copy five angles by introducing a pictures, such as an angle of five-pointed star with box-shadow attributes, be spliced into
Five-pointed star；Or an angle of five-pointed star can be realized with pure CSS3, then copy five angles with box-shadow attributes, into
And it is spliced into five-pointed star.
In the present embodiment, several icons are gone out using the box-shadow attribute configurations of CSS3 in advance and create code, the icon
Create code storage in the database, it is corresponding with Icon ID that each icon creates code.Get icon configuring request it
Afterwards, corresponding icon can be called to create code according to the Icon ID in the icon configuring request, and runs the icon and creates code,
Can obtain needs target icon to be shown.
S40：Based on region ID, target area corresponding with region ID is obtained on interface to be configured.
Wherein, target area is to need display target figure target area.It is waited for configured at least one on interface to be configured
Configuring area, sole zone ID is set to each region to be configured, confirms that icon is wanted by the region ID in icon configuring request
The region to be configured of display.For example, on the interfaces " 58 " APP, using the upper left corners APP as origin, size parameter be 300px ×
The corresponding region ID in region to be configured of 400px is A01, if the region ID carried in icon configuring request is A01, A01 pairs
The region to be configured answered is target area.
S50：The display target icon on target area.
Include on the target area at interface to be configured by target icon, which is one in region to be configured
It is a.It is to be appreciated that the interface configurations to be configured shown on computer equipment have at least one region to be configured, step can be used
S20-S40 gives each region to be configured to configure corresponding target icon respectively, to complete interface configurations process.Further, often
One target icon is configured with to be linked for realizing the code of the function to be realized of the target icon, so that the interface that configuration is completed
Using on a computing device when, user can jump to corresponding code by clicking the target icon and link so that into
Access customer wants the page of browsing, user-friendly, impression that the user experience is improved.
In interface icon configuration method provided in this embodiment, according in the icon configuring request got region ID with
Icon ID, operation create code using the icon corresponding with Icon ID of the box-shadow attribute configurations of CSS3, to obtain
Target icon is obtained, corresponding target icon can be obtained using code means according to Icon ID, advantageously reduce interface icon
Deployment cost is developed, the allocative efficiency of target icon is improved.Simultaneously according to region ID, obtained and region ID on interface to be configured
Corresponding target area, and the target icon is shown on target area, to complete the configuration of interface icon.The interface icon is matched
It sets in method, the configuration of interface icon is realized by pure CSS3 codes, improves icon allocative efficiency, and accelerate system sound
Between seasonable, moreover, because CSS3 can be applicable to different system so that using the target figure of the box-shadow attribute configurations of CSS3
Mark can be applicable in different system (such as IOS systems or ANDROID systems), and compatibility is strong, avoids being introduced directly into picture and causing
Existing compatibility issue during configuring icon.
In a specific embodiment, as shown in Fig. 2, in step S30, Code obtaining target icon is created based on icon,
Specifically comprise the following steps：
S31：Code obtaining at least one iconic element is created based on icon.
Specifically, it is to use the box-shadow attribute configurations of CSS3 to go out in advance for creating icon that icon, which creates code,
Code, it is associated with Icon ID which creates code, each icon for build code be used to create it is corresponding with Icon ID
Icon.Specifically, in step S31, create that the corresponding target icon of Code obtaining Icon ID is included by icon at least one
Kind iconic element.
Wherein, iconic element is the minimum unit of preset composition icon.
S32：Using icon create code in pre-set iconic element rule of combination at least one iconic element into
Row combination, obtains target icon.
Wherein, iconic element rule of combination refers to by least one iconic element according to the placement angle between them, position
Distribution and connection relation are set to carry out the rule of permutation and combination.
It is rectangle and circle respectively for example, in a specific embodiment, there are two types of the iconic elements got, in advance
The iconic element rule of combination of setting is：Radius be 5 circle on, be uniformly distributed 8 length be 4, the rectangle that width is 1,
In, the width on arbitrary one side of rectangle is circumferentially attached with circle, and based on above-mentioned rule, generating a shape isTarget
Icon.
In the present embodiment, by obtaining at least one iconic element corresponding with Icon ID, and code is created using icon
In pre-set iconic element rule of combination these iconic elements are combined, obtain target icon so that target icon
It can be generated by way of being combined the iconic element of acquisition, without importing the icons such as png pictures or gif pictures,
To reduce additional picture request, so as to shorten the acquisition time of target icon, the response speed of server is improved, is promoted
User experience.Specifically, by operation using the icon corresponding with Icon ID of the box-shadow attribute configurations of CSS3
Code is created, the target icon to be formed is combined at least one iconic element using built-in iconic element rule of combination,
IOS systems or ANDROID systems are can be applicable to, compatibility is strong.
In a specific embodiment, as shown in figure 3, step S50, i.e., the display target icon on target area, specifically
Include the following steps：
S51：Obtain the region parameter of target area.
Region parameter refers to location parameter and size parameter of the either objective region at interface to be configured, region parameter foundation
It is actually subjected to depending on showing region to be configured, to determine position and the size in icon region to be configured to be shown.It such as can be in 720px
Configurable size parameter is the region to be configured of 300px × 400px in the interface to be configured of × 1280px, can be by region to be configured
In the coordinate of an endpoint or central point as its location parameter, with the position in determination region to be configured.For example, this can be waited matching
The coordinate of one endpoint in the upper left corner in region is set as its location parameter, to define an area to be configured on interface to be configured
Domain.If it is QY10 that the region to be configured, which is gathered around there are one unique region ID, which sits in the position at interface to be configured
(20,20) are designated as, then location parameter is coordinate (20,20), size in the region parameter in the region to be configured that region ID is QY10
Parameter is 300px × 400px.
S52：Adaptation adjustment is carried out to target icon using region parameter, obtains the target icon after adaptation.
Adaptation adjustment refers to that the positions and dimensions of target icon are modified and adjusted, to adapt to interface dimensions to be configured
It changes and brings icon to show entanglement or show infull situation.If not doing adaptation adjustment, at interface, initialization finishes
Afterwards, target icon can block the content shown on other regions to be configured on interface to be configured or be corresponded on interface to be configured
Region to be configured on the target icon that shows will appear blank parts, influence interfacial effect.
Region parameter refers to the corresponding location parameter in target area and size parameter.In generation, is created based on icon in step S30
The target icon that code obtains has corresponding location parameter and size parameter the two icon parameters.In step S52, pass through acquisition
The size parameter of target area and the size parameter of target icon, the fit scale both calculated, and based on the fit scale into
Row zooms in or out processing accordingly, to obtain the target icon after being adapted to.Specifically, by region parameter and icon parameter
It is calculated, can obtain being adapted to front and back icon ratio, icon is to create code by icon to be created, thus giving
After region parameter, it need to only pass through the attribute value for the size parameter that code Tuning function built-in in CSS3 adjusts in icon parameter
The automatic adaptation to target icon can be realized.
S53：The target icon after adaptation is shown on the target area at interface to be configured.
Include on the target area at interface to be configured, so that the target icon after adaptation by the target icon after adaptation
Icon parameter and the region parameter of target area match, and avoid showing excessive or too small situation because of target icon, ensure boundary
Face effect.In the present embodiment, the position that the location parameter of region parameter is sent to target icon by parameter transfer mode is joined
Number, i.e., the attribute value that the location parameter in icon parameter is adjusted by code Tuning function built-in in CSS3 can be realized and will fit
Target icon after matching is shown on target area.
In the present embodiment, join by obtaining the region parameter and icon parameter of target area, and by region parameter and icon
Number carries out adaptation adjustment by code to target icon, obtains the target icon after adaptation, in the whole process, it is only necessary to according to
Target icon through generation carries out the target icon after adaptation can be obtained adaptation according to corresponding size, is obtained without sending again
It takes various sizes of icon to ask, reduces and send request number of times, without the additional icon file of reception, when shortening response
Between, the user experience is improved.
In a specific embodiment, as shown in figure 4, in step S52, target icon is adapted to using region parameter
Adjustment obtains the target icon after adaptation, specifically comprises the following steps：
S521：Parameter adjustment function corresponding with Icon ID is obtained, parameter adjustment function includes opposite with target icon
The formal parameter answered.
Parameter adjustment function refers to the function being adjusted for pair target icon corresponding with Icon ID.Formal parameter
It is for receiving the parameter being passed in call parameters Tuning function.
For example, parameter adjustment function is represented by：Rule (int size, int position (x, y)), wherein rule
For the function name of parameter adjustment function, size and the formal parameter that position (x, y) is the parameter adjustment function.
S522：Using region parameter as actual parameter Transfer Parameters Tuning function, parameter adjustment function is based on actual parameter
Adaptation adjustment is carried out, the target icon after adaptation is obtained.
In a specific embodiment, it is transmitted the corresponding region parameters of region ID at interface to be configured as actual parameter
To the formal parameter in parameter adjustment function, which is transmitted in parameter adjustment function, parameter adjustment function base
In the region parameter and pre-stored icon parameter, the ratio of the two is calculated as fit scale, and according to fit scale pair
The corresponding target icon of Icon ID carries out adaptation adjustment, the target icon after being adapted to.
Specifically, it is length L1 × width W1, icon parameter packet that region parameter, which includes the corresponding size parameter in target area,
It is respectively length L2 × width W2 to include target icon and correspond to size parameter, to the length and width in region parameter and icon parameter
Calculating ratio, respectively：
A=L1/L2
B=W1/W2
Wherein a is the length ratio of region parameter and icon parameter, and b is the width ratio of region parameter and icon parameter,
Minimum value person in a, b is taken to be used as fit scale k.
Further, the length L2 of icon parameter and width W2 are multiplied by fit scale k, the target icon after being adapted to
Size parameter be respectively：Length L2 × k, width W2 × k, after the adaptation that the code building size parameter is created based on icon
Target icon.
For example, the size parameter of the corresponding region parameters of region ID at interface to be configured is 300px × 400px, and icon
The size parameter of the corresponding target icons of ID is 150px × 100px, and the value that the value that a is obtained by calculation is 2, b is 4.It can manage
Xie Di, fit scale k values are the value of a, and further, the size parameter for calculating the target icon after adaptation is：300px×
200px creates code using icon and target icon is converted to icon that size parameter is 300px × 200px to get to adaptation
Target icon afterwards.
In the present embodiment, after obtaining parameter adjustment function corresponding with Icon ID, by the region at interface to be configured
The corresponding region parameters of ID pass to the formal parameter in parameter adjustment function as actual parameter, which is transmitted
Into parameter adjustment function, adaptation adjustment is carried out based on parameter adjustment function, obtains the target icon after adaptation, whole process is not
The identical icon of target icon after needing introducing and being adapted to reduces additional picture request, accelerates the loading velocity of icon,
Improve Adaption efficiency.
In a specific embodiment, as shown in figure 5, after step S50, i.e., the display target icon on target area
The step of after, which further includes：
S61：Effect configuring request is obtained, effect configuring request includes target icon ID and effect ID.
Effect configuring request is asked for configuring the configuration of certain effects to specific target icon in interface to be configured
It asks.Wherein, specific target icon is determined by the target icon ID in effect configuring request, and certain effects are asked by effect configuration
Effect ID in asking is determined.
Wherein, effect ID is the mark that target icon shows dynamic effect on interface to be configured for identification.Specific effect
Fruit refers to the dynamic effect that target icon is shown on interface to be configured, including but not limited to loads effect, unlimited rotary, forward direction
Broadcasting and reverse-play and other effects can bring aesthetic feeling to user and have intuitive.For example, " load effect " can be intuitive
The load process for the page that ground reflection is loading.
S62：Based on effect ID, the effect corresponding with effect ID of the animation attribute configurations using CSS3 is obtained
Handle code.
Animation attributes are used for for binding animation and div elements in CSS3, specifically,
Animation attributes can change the attribute of Elements C SS3 in the case where that need not trigger any event with time change
Value, to achieve the effect that a kind of animation.The animation attributes of animation can be thus called directly in an element,
Based on this point, the animation attributes of CSS3 just need specific animation attributes value, are belonged to using the animation in CSS3
Property is configured and calls the state for having previously been based on target icon each stage that@keyframes rules define, and passes through
Animation attributes make the dynamic smooth display of the state in target icon each stage that@keyframes rules define.
In the present embodiment, after getting effect ID, the dynamic effect that target icon is shown is specified, then obtain and use
The effect process code corresponding with effect ID of the animation attribute configurations of CSS3, and after running the effect process code,
Certain effects are shown on interface to be configured.The animation attribute values of CSS3 need to only be changed according to effect ID, it will be able to realize
Certain effects improve the rendering capability of target icon.
Specifically, several effect process codes are gone out using the animation attribute configurations of CSS3 in advance, the effect process generation
In the database, each effect process code is corresponding with effect ID for code storage.It, can root after getting effect configuring request
Corresponding effect process code is called according to the effect ID in the effect configuring request, and runs the effect process code, you can is obtained
Target icon is taken to need certain effects to be shown.
S63：It is handled using effect process code pair target icon corresponding with target icon ID, in target area
The certain effects of upper display target icon.
After obtaining effect process code, by handling the corresponding target icons of target icon ID, so as to wait matching
The target icon set on interface calls effect process code, to the display on target icon region and effect process code
Corresponding certain effects, to realize target icon of the display with certain effects on the target area at interface to be configured.
In the present embodiment, after by obtaining target icon ID and effect ID in effect configuring request, based on above-mentioned
Animation attributes generate effect process code corresponding with effect ID, and effect process code pair and target icon ID phases
Corresponding target icon is handled, and the certain effects of display target icon, whole on interface to be configured corresponding with region ID
A realization process does not have additional picture to ask, and reduces maintenance and development cost, shortens the response time.
It should be understood that the size of the serial number of each step is not meant that the order of the execution order in above-described embodiment, each process
Execution sequence should be determined by its function and internal logic, the implementation process without coping with the embodiment of the present invention constitutes any limit
It is fixed.
Embodiment 2
Fig. 6 shows the principle frame with the one-to-one interface icon configuration device of 1 median surface icon configuration method of embodiment
Figure.As shown in fig. 6, the interface icon configuration device includes configuration interface display module 10, configuring request acquisition module 20, target
Icon acquisition module 30, target area acquisition module 40 and target icon display module 50.Wherein, configuration interface display module
10, configuring request acquisition module 20, target icon acquisition module 30, target area acquisition module 40 and target icon display module
50 realization function step corresponding with 1 median surface icon configuration method of embodiment corresponds, to avoid repeating, the present embodiment
It is not described in detail one by one.
Configuration interface display module 10, for showing that interface to be configured, interface to be configured include at least one area to be configured
Domain.
Configuring request acquisition module 20, for obtaining icon configuring request, icon configuring request includes Icon ID and region
ID。
Target icon acquisition module 30, for being based on Icon ID, operation uses the box-shadow attribute configurations of CSS3
Icon corresponding with Icon ID creates code, and Code obtaining target icon is created based on icon.
Target area acquisition module 40 obtains mesh corresponding with region ID for being based on region ID on interface to be configured
Mark region.
Target icon display module 50, for the display target icon on target area.
Preferably, target icon acquisition module 30, specifically includes iconic element acquiring unit 31 and target icon obtains list
Member 32.
Iconic element acquiring unit 31, for creating Code obtaining at least one iconic element based on icon；
Target icon acquiring unit 32 is used for using pre-set element combinations rule in icon establishment code at least
A kind of iconic element is combined, and obtains target icon.
Preferably, target icon display module 50 specifically includes region parameter acquiring unit 51, target icon adaptation unit
52 and target icon display unit 53.
Region parameter acquiring unit 51, the region parameter for obtaining target area.
Target icon adaptation unit 52, for carrying out adaptation adjustment to target icon using region parameter, after obtaining adaptation
Target icon.
Target icon display unit 53, for showing the target icon after being adapted on the target area at interface to be configured.
Specifically, target icon adaptation unit 52 specifically includes Tuning function and obtains subelement 521 and target icon acquisition
Subelement 522.
Tuning function obtains subelement 521, for obtaining parameter adjustment function corresponding with Icon ID, parameter adjustment letter
Number includes formal parameter corresponding with target icon.
Target icon obtains subelement 522, for using region parameter as actual parameter Transfer Parameters Tuning function, parameter
Tuning function carries out adaptation adjustment based on actual parameter, obtains the target icon after adaptation.Preferably, interface icon configuration dress
It further includes effect configuring request acquiring unit 61, processing Code obtaining unit 62 and certain effects display unit 63 to set specific.
Effect configuring request acquiring unit 61, for obtaining effect configuring request, effect configuring request includes target icon
ID and effect ID.
Handle Code obtaining unit 62, for being based on effect ID, obtain using CSS3 animation attribute configurations with
The corresponding effect process codes of effect ID.
Certain effects display unit 63, for using effect process code pair target icon corresponding with target icon ID
It is handled, the certain effects of display target icon on target area.
Embodiment 3
The present embodiment provides a computer readable storage medium, computer journey is stored on the computer readable storage medium
Sequence realizes 1 median surface icon configuration method of embodiment, to avoid repeating, here not when the computer program is executed by processor
It repeats again.Alternatively, when the computer program is executed by processor realize 2 median surface icon configuration device of embodiment in each module/
The function of unit, to avoid repeating, which is not described herein again.
It is to be appreciated that the computer readable storage medium may include：The computer program code can be carried
Any entity or device, recording medium, USB flash disk, mobile hard disk, magnetic disc, CD, computer storage, read-only memory (ROM,
Read-Only Memory), random access memory (RAM, Random Access Memory), electric carrier signal and telecommunications letter
Number etc..
Embodiment 4
Fig. 7 is the schematic diagram of the present embodiment Computer equipment.As shown in fig. 7, computer equipment 70 include processor 71,
Memory 72 and it is stored in the computer program 73 that can be run in memory 72 and on processor 71.Processor 71 executes meter
When calculation machine program 73 realize 1 median surface icon configuration method of embodiment each step step S10, S20 for example shown in FIG. 1,
S30, S40 and S50.Alternatively, processor 71 realizes 2 median surface icon configuration device of above-described embodiment when executing computer program 73
Each module/unit function, such as configuration interface display module shown in Fig. 6 10, configuring request acquisition module 20, target icon
The function of acquisition module 30, target area acquisition module 40 and target icon display module 50.To avoid repeating, herein not one by one
It repeats.
It is apparent to those skilled in the art that for convenience of description and succinctly, only with above-mentioned each work(
Can unit, module division progress for example, in practical application, can be as needed and by above-mentioned function distribution by different
Functional unit, module are completed, i.e., the internal structure of described device are divided into different functional units or module, more than completion
The all or part of function of description.
Embodiment described above is merely illustrative of the technical solution of the present invention, rather than its limitations；Although with reference to aforementioned reality
Applying example, invention is explained in detail, it will be understood by those of ordinary skill in the art that：It still can be to aforementioned each
Technical solution recorded in embodiment is modified or equivalent replacement of some of the technical features；And these are changed
Or replace, the spirit and scope for various embodiments of the present invention technical solution that it does not separate the essence of the corresponding technical solution should all
It is included within protection scope of the present invention.
Claims (10)
1. a kind of interface icon configuration method, which is characterized in that including：
Show that interface to be configured, the interface to be configured include at least one region to be configured；
Icon configuring request is obtained, the icon configuring request includes Icon ID and region ID；
Based on the Icon ID, operation uses the icon corresponding with the Icon ID of the box-shadow attribute configurations of CSS3
Code is created, Code obtaining target icon is created based on the icon；
Based on the region ID, target area corresponding with the region ID is obtained on interface to be configured；
The target icon is shown on the target area.
2. interface icon configuration method as described in claim 1, which is characterized in that described to be obtained based on icon establishment code
The target icon is taken to include：
Code obtaining at least one iconic element is created based on the icon；
Pre-set element combinations rule in code is created using the icon, group is carried out at least one iconic element
It closes, obtains the target icon.
3. interface icon configuration method as described in claim 1, described to show the target icon on the target area
Including：
Obtain the region parameter of the target area；
Adaptation adjustment is carried out to the target icon using the region parameter, obtains the target icon after adaptation；
Target icon after showing the adaptation on the target area at the interface to be configured.
4. interface icon configuration method as claimed in claim 3, which is characterized in that described to use the region parameter to described
Target icon carries out adaptation adjustment, obtains the target icon after adaptation, including：
Parameter adjustment function corresponding with the Icon ID is obtained, the parameter adjustment function includes and the target icon phase
Corresponding formal parameter；
The parameter adjustment function is transmitted using the region parameter as actual parameter, the parameter adjustment function is based on the reality
Border parameter carries out adaptation adjustment, obtains the target icon after adaptation.
5. interface icon configuration method as described in claim 1, which is characterized in that show the mesh on the target area
After target of marking on a map step, the interface icon configuration method further includes：
Effect configuring request is obtained, the effect configuring request includes target icon ID and effect ID；
Based on the effect ID, the effect corresponding with the effect ID of the animation attribute configurations using CSS3 is obtained
Handle code；
It is handled using the effect process code pair target icon corresponding with the target icon ID, in the target
The certain effects of the target icon are shown on region.
6. a kind of interface icon configuration device, which is characterized in that including：
Configuration interface display module, for showing that interface to be configured, the interface to be configured include at least one region to be configured；
Configuring request acquisition module, for obtaining icon configuring request, the icon configuring request includes Icon ID and region ID；
Target icon acquisition module, for be based on the Icon ID, operation using CSS3 box-shadow attribute configurations with
The corresponding icon of Icon ID creates code, and Code obtaining target icon is created based on the icon；
Target area acquisition module obtains corresponding with the region ID for being based on the region ID on interface to be configured
Target area；
Target icon display module, for showing the target icon on the target area.
7. interface icon configuration device as claimed in claim 6, which is characterized in that the target icon acquisition module, specifically
Including：
Iconic element acquiring unit, for creating Code obtaining at least one iconic element based on the icon；
Target icon acquiring unit is used for using pre-set element combinations rule in icon establishment code at least one
The kind iconic element is combined, and obtains the target icon.
8. interface icon configuration device as claimed in claim 6, which is characterized in that the target icon display module, specifically
Including：
Region parameter acquiring unit, the region parameter for obtaining the target area；
Target icon adaptation unit obtains adaptation for carrying out adaptation adjustment to the target icon using the region parameter
Target icon afterwards；
Target icon display unit, for showing the target figure after the adaptation on the target area at the interface to be configured
Mark.
9. a kind of computer equipment, including memory, processor and it is stored in the memory and can be in the processor
The computer program of upper operation, which is characterized in that the processor realized when executing the computer program as claim 1 to
The step of any one of 5 interface icon configuration method.
10. a kind of computer readable storage medium, the computer-readable recording medium storage has computer program, feature to exist
In realizing the interface icon configuration method as described in any one of claim 1 to 5 when the computer program is executed by processor
Step.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810167613.2A CN108459856A (en) | 2018-02-28 | 2018-02-28 | Interface icon configuration method, device, computer equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810167613.2A CN108459856A (en) | 2018-02-28 | 2018-02-28 | Interface icon configuration method, device, computer equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN108459856A true CN108459856A (en) | 2018-08-28 |
Family
ID=63217649
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810167613.2A Pending CN108459856A (en) | 2018-02-28 | 2018-02-28 | Interface icon configuration method, device, computer equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN108459856A (en) |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110321190A (en) * | 2019-04-19 | 2019-10-11 | 珠海天燕科技有限公司 | The method and device of icon optimization in a kind of desktop |
| CN111026391A (en) * | 2018-10-10 | 2020-04-17 | 杭州海康威视数字技术股份有限公司 | Icon code generation method and device |
| CN111198684A (en) * | 2018-11-19 | 2020-05-26 | 阿里巴巴集团控股有限公司 | Method, apparatus, device and medium for data processing and graphic engine establishment |
| CN112333517A (en) * | 2020-09-21 | 2021-02-05 | 深圳Tcl新技术有限公司 | Background application information display method and device and readable storage medium |
| CN113970989A (en) * | 2020-07-22 | 2022-01-25 | 宝能汽车集团有限公司 | Icon display method, icon display device and vehicle |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150220496A1 (en) * | 2014-02-06 | 2015-08-06 | Sugarcrm Inc. | Dynamic sprite based theme switching |
| CN105511864A (en) * | 2015-11-30 | 2016-04-20 | 青岛海信移动通信技术股份有限公司 | Resource positioning method and device |
| CN106294504A (en) * | 2015-06-09 | 2017-01-04 | 阿里巴巴集团控股有限公司 | The display packing of a kind of Web page icon and device |
| CN106548504A (en) * | 2015-09-23 | 2017-03-29 | 腾讯科技（深圳）有限公司 | Web animation generation method and device |
| CN107301046A (en) * | 2017-06-15 | 2017-10-27 | 腾讯科技（深圳）有限公司 | Treating method and apparatus, computer equipment and the storage medium of icon |
| CN107357572A (en) * | 2017-06-23 | 2017-11-17 | 努比亚技术有限公司 | A kind of method, terminal and computer-readable recording medium for carrying out icon and showing |
-
2018
- 2018-02-28 CN CN201810167613.2A patent/CN108459856A/en active Pending
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20150220496A1 (en) * | 2014-02-06 | 2015-08-06 | Sugarcrm Inc. | Dynamic sprite based theme switching |
| CN106294504A (en) * | 2015-06-09 | 2017-01-04 | 阿里巴巴集团控股有限公司 | The display packing of a kind of Web page icon and device |
| CN106548504A (en) * | 2015-09-23 | 2017-03-29 | 腾讯科技（深圳）有限公司 | Web animation generation method and device |
| CN105511864A (en) * | 2015-11-30 | 2016-04-20 | 青岛海信移动通信技术股份有限公司 | Resource positioning method and device |
| CN107301046A (en) * | 2017-06-15 | 2017-10-27 | 腾讯科技（深圳）有限公司 | Treating method and apparatus, computer equipment and the storage medium of icon |
| CN107357572A (en) * | 2017-06-23 | 2017-11-17 | 努比亚技术有限公司 | A kind of method, terminal and computer-readable recording medium for carrying out icon and showing |
Non-Patent Citations (2)
| Title |
|---|
| 创客诚品，徐飞，李恒编著: "《HTML5+CSS3从入门到精通 从前端开发、实战演练到网页设计布局一本就够》", 30 November 2017, 北京希望电子出版社 * |
| 张灵芝: "纯CSS3图标技术方案在WebApp中的设计与应用", 《电脑与信息技术》 * |
Cited By (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111026391A (en) * | 2018-10-10 | 2020-04-17 | 杭州海康威视数字技术股份有限公司 | Icon code generation method and device |
| CN111198684A (en) * | 2018-11-19 | 2020-05-26 | 阿里巴巴集团控股有限公司 | Method, apparatus, device and medium for data processing and graphic engine establishment |
| CN110321190A (en) * | 2019-04-19 | 2019-10-11 | 珠海天燕科技有限公司 | The method and device of icon optimization in a kind of desktop |
| CN110321190B (en) * | 2019-04-19 | 2022-04-29 | 珠海天燕科技有限公司 | Method and device for optimizing icons in desktop |
| CN113970989A (en) * | 2020-07-22 | 2022-01-25 | 宝能汽车集团有限公司 | Icon display method, icon display device and vehicle |
| CN112333517A (en) * | 2020-09-21 | 2021-02-05 | 深圳Tcl新技术有限公司 | Background application information display method and device and readable storage medium |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN108459856A (en) | Interface icon configuration method, device, computer equipment and storage medium | |
| US10032484B2 (en) | Digital video builder system with designer-controlled user interaction | |
| US11048484B2 (en) | Automated responsive grid-based layout design system | |
| CN110232162B (en) | HTML 5-based flow definition method and system | |
| US20210034336A1 (en) | Executing a process-based software application in a first computing environment and a second computing environment | |
| US9588650B2 (en) | Online logo tool | |
| US20060225094A1 (en) | Enabling customization and personalization of views in content aggregation frameworks | |
| US20160004515A1 (en) | Method for providing application development environment and device | |
| US20060225091A1 (en) | Customizing and personalizing views in content aggregation frameworks | |
| CN113227972A (en) | Dynamically changing user interfaces for web applications and associated methods | |
| CN112579144A (en) | Data processing method and device | |
| CN116450021A (en) | Large screen building method, system, electronic equipment and storage medium | |
| CN112169313B (en) | Game interface setting method and device, electronic equipment and storage medium | |
| CN110764762A (en) | Page forming method and device, computer readable storage medium and terminal | |
| CN104850298A (en) | Information processing method and electronic equipment | |
| CN110659432A (en) | Information processing method and device and computer storage medium | |
| CN118227110A (en) | Method for laying out page by dragging component | |
| CN114879961A (en) | Component rendering method and device and computer readable storage medium | |
| KR20140115472A (en) | An application developing environment system | |
| KR20140115462A (en) | A method for providing an application developing tool and an apparatus using it | |
| KR20140115460A (en) | A method for providing an application developing tool an apparatus using it | |
| KR20140115002A (en) | A method for providing an application developing tool and an apparatus using it | |
| KR20140115465A (en) | An application developing environment system | |
| KR20140114987A (en) | A method for providing an application developing tool | |
| KR20140114990A (en) | A method for providing an application developing tool and an apparatus using it |
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 | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20180828 |