CN111381916A - Button masking method, button masking device, button masking medium and computer equipment - Google Patents
Button masking method, button masking device, button masking medium and computer equipment Download PDFInfo
- Publication number
- CN111381916A CN111381916A CN201811644356.3A CN201811644356A CN111381916A CN 111381916 A CN111381916 A CN 111381916A CN 201811644356 A CN201811644356 A CN 201811644356A CN 111381916 A CN111381916 A CN 111381916A
- Authority
- CN
- China
- Prior art keywords
- button
- mask
- masking
- color
- target
- 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
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Color Image Communication Systems (AREA)
Abstract
The invention provides a button masking method, a button masking device, a computer readable storage medium and computer equipment, wherein the method comprises the following steps: setting a target shade color matrix; when the state of the button is switched, generating a color filter according to the target shade color matrix; setting the color filter to a drawable class into which the picture of the button is converted so that a masking effect is produced on the button. According to the method, only one picture in a normal state is needed when the ImageView-based button masking effect is realized, so that the use of resources is reduced, and the development and the rapid realization of the masking effect are facilitated.
Description
Technical Field
The invention relates to the technical field of Internet, in particular to a button masking method, a button masking device, a button masking medium and computer equipment.
Background
When a button is clicked in application interface interaction, a layer of shadow masking effect is usually displayed on the button, and when the shadow masking effect is to be realized, pictures in a normal state and a pressed state need to be provided respectively when a UI is drawn.
In the prior art, to achieve the masking effect, when the UI draws a picture, two pictures need to be provided to respectively correspond to the display effect of the button in the normal state and the display effect of the button in the pressed state to achieve the masking effect, so that the prior art at least has the following defects:
1, two pictures need to be provided, which causes resource waste;
2, the operation is complex and the application range is small.
Disclosure of Invention
The invention provides a button masking method and a corresponding device, which mainly realize the button masking effect based on ImageView only by one picture in a normal state, reduce the use of resources and facilitate the research and development of the button masking effect.
The invention also provides a computer device and a readable storage medium for executing the button masking method of the invention.
In order to solve the problems, the invention adopts the following technical scheme:
in a first aspect, the present invention provides a button masking method, comprising:
setting a target shade color matrix;
when the state of the button is switched, generating a color filter according to the target shade color matrix;
setting the color filter to a drawable class into which the picture of the button is converted so that a masking effect is produced on the button.
Specifically, the setting of the target mask color matrix includes:
setting a floating point type first parameter r;
calculating a second parameter rr according to a preset algorithm;
constructing the target mask color matrix according to r and rr, wherein an algorithm for calculating a second parameter rr according to a preset algorithm is as follows:
float rr＝(1-r)*1.15f。
specifically, the setting the color filter to the drawable class into which the picture of the button is converted so that a mask effect is generated for the button further includes:
and when the button is in a default state, removing the button mask effect corresponding to the target mask color matrix by setting the value of the target mask color matrix to be a null value.
Specifically, the setting the color filter to a drawable class into which a picture of the button is converted so as to generate a mask effect on the button includes:
and multiplying the target mask color matrix with the current color value of the picture of the button to obtain a new color, thereby forming a button mask effect.
Preferably, when the state of the button is switched, generating a color filter according to the target mask color matrix includes:
setting the range of the mask, wherein the range of the mask comprises a foreground image mask, a background image mask and a whole image mask.
Preferably, when the state of the button is switched, generating a color filter according to the target mask color matrix includes:
when the state of the button is switched, packaging the target color matrix into the color filter;
or when the state of the button is switched, detecting the switched state of the button;
changing the designated parameters of the target mask color matrix according to the switched state to generate a new mask color matrix;
encapsulating the new mask color matrix into the color filter.
Specifically, the changing the specified parameter of the target mask color matrix according to the switched state to generate a new mask color matrix includes:
changing transparency or color values in the specified parameters of the target mask color matrix to generate the new color mask matrix.
In a second aspect, the present invention provides a button mask device comprising:
the setting module is used for setting a target mask color matrix;
the generating module is used for generating a color filter according to the target shade color matrix when the state of the button is switched;
a masking module to set the color filter to a drawable class into which the picture of the button is converted so as to produce a masking effect on the button.
In a third aspect, the present invention provides a computer readable storage medium having a computer program stored thereon, wherein the program is configured to, when executed by a processor, implement the button masking method according to any one of the first aspect.
In a fourth aspect, the present invention provides a computer device, comprising:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the button masking method as defined in any one of the first aspects.
Compared with the prior art, the technical scheme of the invention at least has the following advantages:
the invention provides a button masking method, which comprises the steps of setting a target masking color matrix; when the state of the button is switched, generating a color filter according to the target shade color matrix; setting the color filter to a drawable class into which the picture of the button is converted so that a masking effect is produced on the button. According to the method, only one picture in a normal state is needed when the ImageView-based button masking effect is realized, so that the use of resources is reduced, and the development and the rapid realization of the masking effect are facilitated.
2, the invention can set a plurality of mask ranges, specifically including a foreground image mask, a background image mask and a whole picture mask. When setting up the shade effect of various shade ranges, only need provide the button picture under a normal condition, the shade effect passes through the interface setting, can set up respectively foreground picture and background picture, improves research and development efficiency, has solved among the prior art that a picture button need provide two pictures and realize the shade effect, leads to the problem of wasting of resources.
Drawings
The foregoing and/or additional aspects and advantages of the present invention will become apparent and readily appreciated from the following description of the embodiments, taken in conjunction with the accompanying drawings of which:
FIG. 1 is a flowchart illustrating a button masking method according to an embodiment of the present invention;
FIG. 2 is a block diagram of a button masking device according to an embodiment of the present invention;
fig. 3 is a schematic structural diagram of a computer device according to an embodiment of the present invention.
Detailed Description
Reference will now be made in detail to embodiments of the present invention, examples of which are illustrated in the accompanying drawings, wherein like or similar reference numerals refer to the same or similar elements or elements having the same or similar function throughout. The embodiments described below with reference to the drawings are illustrative only and should not be construed as limiting the invention.
In one embodiment, as shown in fig. 1, a button masking method comprises:
and S11, setting a target mask color matrix.
In the embodiment of the invention, the used theoretical basis is as follows:
if a color matrix is defined:
ColorMatrix colorMatrix＝new ColorMatrix(new float[]{
a，b，c，d，e，
f，g，h，i，j，
k，l，m，n，o，
p，q，r，s，t})；
given a color value ARGB, a new color value can be obtained through the above color matrix operation:
int red＝a*R+b*R+c*R+d*R+e；
int green＝f*G+g*G+h*G+i*G+j；
int blue＝k*B+l*B+m*B+n*B+o；
int alpha＝p*A+q*A+r*A+s*A+t；
based on the above theoretical basis, a mask effect is added to the picture, and a color matrix representing the mask effect is defined.
Specifically, the present invention defines a target mask color matrix preferably in the following scheme:
setting a floating point type first parameter r, calculating a second parameter rr according to a preset algorithm, and constructing a target mask color matrix according to the r and the rr, wherein the algorithm for calculating the second parameter rr according to the preset algorithm is as follows: float rr ═ 1-r × 1.15 f.
The specific codes are as follows:
float r＝Color.alpha(maskColor)/255f；
r＝r-(1-r)*0.15f；
float rr ═ 1-r × 1.15 f; wherein, mask color represents the mask color.
Further, the target mask color matrix is set based on r and rr, and the code is as follows:
and S12, when the state of the button is switched, generating a color filter according to the target shade color matrix.
In the embodiment of the invention, when the state of the button is switched, the target color matrix is packaged into the color filter; or when the state of the button is switched, detecting the switched state of the button; changing the designated parameters of the target mask color matrix according to the switched state to generate a new mask color matrix; encapsulating the new mask color matrix into the color filter. Specifically, the new mask color matrix may be generated by changing transparency or color values in the specified parameters of the target mask color matrix.
In the embodiment of the present invention, the states of the buttons include, but are not limited to, a selected state, an available state, a clicked state, a double-clicked state, a long-pressed state, and a short-pressed state. The invention can add different color masks or masks with the same color and different transparencies to the button according to different states of the button to show the difference.
It should be noted that, the color filter is generated according to the target mask color matrix, and specifically, the target mask color matrix may be directly packaged into the color filter. In another embodiment, the target mask color matrix may also be transformed, one or more parameters thereof are changed to generate a new mask color matrix, and the new mask color matrix is encapsulated into the color filter. Specifically, which scheme is adopted is determined according to the number of states of the buttons and design requirements, and is not particularly limited herein. For example, when there are more than 2 switching states of the button, different color filters may be generated by generating a plurality of new mask color matrices using the target mask color matrix, so that the different color filters are set to drawable classes corresponding to the button when the button is in different states, resulting in a masking effect.
In the embodiment of the present invention, the generation of the color filter according to the target mask color matrix can be implemented by the following schemes:
first, when the states of the buttons include only 2 types, a target mask color matrix is preset. When the button is switched from one state to another, the target mask color matrix is directly encapsulated into the color filter so as to be set to a drawable class of pictures of the button, and a mask effect of the button is generated.
Secondly, when the states of the buttons comprise more than 2 types, presetting a target shade color matrix. When the state of a button is switched from a first state to a second state, packaging the target mask color matrix into the color filter so as to set the color filter to a drawable class of pictures of the button; and when the state of the button is switched from the second state to the third state, changing the specified parameters in the target mask color matrix to generate a new mask color matrix, and packaging the new mask color matrix into the color filter.
And thirdly, when the state of the button comprises more than 2 types, presetting one target mask color matrix, generating a plurality of target mask color matrices with different colors or different transparencies according to the target mask color matrix, setting the corresponding relation between different states of the button and different target mask color matrices, acquiring the corresponding target mask color matrix according to the corresponding relation when the state of the button is switched, and generating a color filter.
And fourthly, when the states of the buttons comprise more than 2, presetting a plurality of target mask color matrixes, wherein the target mask color matrixes comprise target mask color matrixes with different colors or the same color and different transparencies, and pre-storing the mapping relation between each target mask color matrix and the state of the button. And when the state of the button is switched, acquiring a target shade color matrix corresponding to the switched state according to the mapping relation, and packaging the target shade color matrix into the color filter.
S13, setting the color filter to the drawable class converted by the picture of the button so as to generate a shading effect on the button.
The ImageView converts the local picture into a Drawable class Drawable object for display, and the Drawable object provides a setColorFilter interface for setting a color filter of the picture, so that the picture of the button can be converted into the Drawable class firstly, and then the color filter is set for the Drawable class Drawable object to generate a mask effect when the button is in a click state for switching.
In the embodiment of the present invention, after the target mask color matrix is set, the color filter is generated according to the target mask color matrix and is set to the drawable class, taking an ImageView foreground image as an example, the used codes are as follows:
getDrawable().setColorFilter(newColorMatrixColorFilter(colorMatrix))；
and when the color filter is set to the drawable class, multiplying the target mask color matrix by the current color value of the picture of the button to obtain a new color value, and setting the new color value to the button to form a button mask effect.
In the embodiment of the present invention, when the button is in a default state, that is, a non-click state, the value of the target mask color matrix is set to be a null value, and the mask effect of the button corresponding to the target mask color matrix is removed, wherein the mask effect is removed when the ImageView button is in the default state, and the used codes are as follows:
getDrawable().setColorFilter(null)；
in the embodiment of the invention, the range of the mask can be set, and the range of the mask can comprise a foreground image mask, a background image mask, a whole picture mask or a non-transparent part. Furthermore, the transparency and the masking color of the target masking color matrix can be set.
In one possible design, the available codes when setting the mask range as foreground image mask or background image mask are as follows:
further, when the mask range is the whole picture, a layer of mask is drawn on the picture directly through canvas.
When the mask is a non-transparent part, then the color filter of the drawable object is set by drawable. The principle is as follows:
referring to fig. 2, in another embodiment, the present invention provides a button mask device, including:
a setting module 11, configured to set a target mask color matrix;
the generating module 12 is configured to generate a color filter according to the target mask color matrix when the state of the button is switched;
a masking module 13 for setting the color filter to the drawable class into which the picture of the button is converted so as to produce a masking effect on the button.
Embodiments of the present application further provide a computer-readable storage medium, on which a computer program is stored, which when executed by a processor implements the button masking method described above. The storage medium includes, but is not limited to, any type of disk (including floppy disks, hard disks, optical disks, CD-ROMs, and magneto-optical disks), ROMs (Read-Only memories), RAMs (Random AcceSS memories), EPROMs (EraSable Programmable Read-Only memories), EEPROMs (Electrically EraSable Programmable Read-Only memories), flash memories, magnetic cards, or optical cards. That is, a storage medium includes any medium that stores or transmits information in a form readable by a device (e.g., a computer). Which may be a read-only memory, magnetic or optical disk, or the like.
The embodiment of the application also provides computer equipment. As shown in fig. 3, the computer apparatus includes:
one or more processors 510;
a storage 520 to store one or more programs 500,
when executed by the one or more processors 510, the one or more programs 500 cause the one or more processors 510 to implement the button masking method of the terminal described above.
Fig. 3 is a schematic structural diagram of a computer apparatus according to the present application, which includes a processor 510, a storage device 520, an input unit 530, a display unit 540, and other devices. Those skilled in the art will appreciate that the structural elements shown in fig. 3 do not constitute a limitation of all computer devices and may include more or fewer components than those shown, or some of the components may be combined. The storage 520 may be used to store the application 500 and various functional modules, and the processor 510 executes the application 500 stored in the storage 520, thereby performing various functional applications of the device and data processing. The storage 520 may be an internal memory or an external memory, or include both internal and external memories. The memory may comprise read-only memory, Programmable ROM (PROM), Electrically Programmable ROM (EPROM), Electrically Erasable Programmable ROM (EEPROM), flash memory, or random access memory. The external memory may include a hard disk, a floppy disk, a ZIP disk, a usb-disk, a magnetic tape, etc. The memory devices disclosed herein include, but are not limited to, these types of memory devices. The memory device 520 disclosed herein is provided by way of example only and not by way of limitation.
The input unit 530 is used for receiving input of signals and receiving related requests of selecting voice files and the like input by users. The input unit 530 may include a touch panel and other input devices. The touch panel can collect touch operations of a user on or near the touch panel (for example, operations of the user on or near the touch panel by using any suitable object or accessory such as a finger, a stylus and the like) and drive the corresponding connecting device according to a preset program; other input devices may include, but are not limited to, one or more of a physical keyboard, function keys (e.g., play control keys, switch keys, etc.), a trackball, a mouse, a joystick, and the like. The display unit 540 may be used to display information input by a user or information provided to a user and various menus of the computer device. The display unit 540 may take the form of a liquid crystal display, an organic light emitting diode, or the like. The processor 510 is a control center of the computer device, connects various parts of the entire computer using various interfaces and lines, and performs various functions and processes data by operating or executing software programs and/or modules stored in the storage device 520 and calling data stored in the storage device.
In an embodiment, a computer device includes one or more processors 510, and one or more storage 520, one or more applications 500, wherein the one or more applications 500 are stored in the storage 520 and configured to be executed by the one or more processors 510, the one or more applications 500 configured to perform the button masking method described in the above embodiments.
It should be understood that, although the steps in the flowcharts of the figures are shown in order as indicated by the arrows, the steps are not necessarily performed in order as indicated by the arrows. The steps are not performed in the exact order shown and may be performed in other orders unless explicitly stated herein. Moreover, at least a portion of the steps in the flow chart of the figure may include multiple sub-steps or multiple stages, which are not necessarily performed at the same time, but may be performed at different times, which are not necessarily performed in sequence, but may be performed alternately or alternately with other steps or at least a portion of the sub-steps or stages of other steps.
It should be understood that each functional unit in the embodiments of the present application may be integrated into one processing module, each unit may exist alone physically, or two or more units may be integrated into one module. The integrated module can be realized in a hardware mode, and can also be realized in a software functional module mode.
The foregoing is only a partial embodiment of the present application, and it should be noted that, for those skilled in the art, several modifications and decorations can be made without departing from the principle of the present application, and these modifications and decorations should also be regarded as the protection scope of the present application.
Claims (10)
1. A button masking method, comprising:
setting a target shade color matrix;
when the state of the button is switched, generating a color filter according to the target shade color matrix;
setting the color filter to a drawable class into which the picture of the button is converted so that a masking effect is produced on the button.
2. The method of button masking according to claim 1, wherein said setting a target mask color matrix comprises:
setting a floating point type first parameter r;
calculating a second parameter rr according to a preset algorithm;
constructing the target mask color matrix according to r and rr, wherein an algorithm for calculating a second parameter rr according to a preset algorithm is as follows:
float rr＝(1-r)*1.15f。
3. the button masking method according to claim 1, wherein said setting the color filter to a drawable class into which the picture of the button is converted so that a masking effect is generated for the button further comprises:
and when the button is in a default state, removing the button mask effect corresponding to the target mask color matrix by setting the value of the target mask color matrix to be a null value.
4. The button masking method according to claim 1, wherein said setting the color filter to a drawable class into which the picture of the button is converted so as to produce a masking effect on the button comprises:
and multiplying the target mask color matrix with the current color value of the picture of the button to obtain a new color, thereby forming a button mask effect.
5. The method of button masking according to claim 1, wherein said generating a color filter from said target masking color matrix when the state of the button is toggled comprises:
setting the range of the mask, wherein the range of the mask comprises a foreground image mask, a background image mask and a whole image mask.
6. The method of button masking according to claim 1, wherein said generating a color filter from said target masking color matrix when the state of the button is toggled comprises:
when the state of the button is switched, packaging the target color matrix into the color filter;
or when the state of the button is switched, detecting the switched state of the button;
changing the designated parameters of the target mask color matrix according to the switched state to generate a new mask color matrix;
encapsulating the new mask color matrix into the color filter.
7. The method of button masking according to claim 6, wherein said modifying specified parameters of said target masking color matrix in accordance with said switched state to generate a new masking color matrix comprises:
changing transparency or color values in the specified parameters of the target mask color matrix to generate the new color mask matrix.
8. A button mask apparatus, comprising:
the setting module is used for setting a target mask color matrix;
the generating module is used for generating a color filter according to the target shade color matrix when the state of the button is switched;
a masking module to set the color filter to a drawable class into which the picture of the button is converted so as to produce a masking effect on the button.
9. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out the button masking method according to any one of claims 1 to 7.
10. A computer device, characterized in that the computer device comprises:
one or more processors;
a storage device for storing one or more programs,
when executed by the one or more processors, cause the one or more processors to implement the button masking method as claimed in any one of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811644356.3A CN111381916A (en) | 2018-12-29 | 2018-12-29 | Button masking method, button masking device, button masking medium and computer equipment |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201811644356.3A CN111381916A (en) | 2018-12-29 | 2018-12-29 | Button masking method, button masking device, button masking medium and computer equipment |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN111381916A true CN111381916A (en) | 2020-07-07 |
Family
ID=71218277
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201811644356.3A Pending CN111381916A (en) | 2018-12-29 | 2018-12-29 | Button masking method, button masking device, button masking medium and computer equipment |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN111381916A (en) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6288703B1 (en) * | 1996-11-25 | 2001-09-11 | Ultimatte Corporation | Method for removing from an image the background surrounding a selected subject by generating candidate mattes |
| CN105378637A (en) * | 2013-04-26 | 2016-03-02 | 三星电子株式会社 | User terminal device for providing animation effect and display method thereof |
| CN106371699A (en) * | 2016-08-31 | 2017-02-01 | 天脉聚源(北京)传媒科技有限公司 | Press button color regulating method and device |
| CN107562447A (en) * | 2016-06-30 | 2018-01-09 | 广州市动景计算机科技有限公司 | Picture processing device, method and user terminal |
-
2018
- 2018-12-29 CN CN201811644356.3A patent/CN111381916A/en active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US6288703B1 (en) * | 1996-11-25 | 2001-09-11 | Ultimatte Corporation | Method for removing from an image the background surrounding a selected subject by generating candidate mattes |
| CN105378637A (en) * | 2013-04-26 | 2016-03-02 | 三星电子株式会社 | User terminal device for providing animation effect and display method thereof |
| CN107562447A (en) * | 2016-06-30 | 2018-01-09 | 广州市动景计算机科技有限公司 | Picture processing device, method and user terminal |
| CN106371699A (en) * | 2016-08-31 | 2017-02-01 | 天脉聚源(北京)传媒科技有限公司 | Press button color regulating method and device |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN105827964B (en) | A kind of image processing method and mobile terminal | |
| CN106502736B (en) | Applied program processing method and device | |
| WO2022048506A1 (en) | Wallpaper displaying method, device, and electronic device | |
| CN106873863B (en) | Method and device for setting interface switching animation | |
| CN106155454B (en) | Interface display method and device and electronic equipment | |
| WO2015143713A1 (en) | Method and apparatus for determining color of interface control, and terminal device | |
| JP2016500175A (en) | Method and apparatus for realizing floating object | |
| CN107635093A (en) | A kind of image processing method, mobile terminal and computer-readable recording medium | |
| EP3822758B1 (en) | Method and apparatus for setting background of ui control | |
| CN108924440A (en) | Paster display methods, device, terminal and computer readable storage medium | |
| CN106033334B (en) | Method and device for drawing interface element | |
| CN109976759B (en) | Page display method and device | |
| WO2019144744A1 (en) | Augmented reality-based image processing method and apparatus, and electronic device | |
| CN104991707B (en) | A kind of display user interface method and device | |
| CN111580912A (en) | Display method and storage medium for multi-level structure resource group | |
| CN111080806A (en) | Map processing method and device, electronic device and storage medium | |
| US8537235B2 (en) | Computer-readable computer program product containing image processing program and digital camera | |
| CN111399965A (en) | User interface compatible display method and device, equipment and storage medium | |
| US20220121325A1 (en) | User interface customization per application | |
| CN101377922A (en) | Method for generating and displaying OSD | |
| CN111381916A (en) | Button masking method, button masking device, button masking medium and computer equipment | |
| CN113885749A (en) | Icon display method and device and electronic equipment | |
| CN115794089A (en) | Icon generation method and device, storage medium and electronic device | |
| US20220129117A1 (en) | Method for generating desktop of mobile terminal, device and electronic device | |
| CN112035210B (en) | Method, apparatus, device and medium for outputting color information |
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 |