WO2023036089A1

WO2023036089A1 - Shadow generation method and apparatus, electronic device and storage medium

Info

Publication number: WO2023036089A1
Application number: PCT/CN2022/117107
Authority: WO
Inventors: 叶嘉堂
Original assignee: Oppo广东移动通信有限公司
Priority date: 2021-09-07
Filing date: 2022-09-05
Publication date: 2023-03-16
Also published as: CN115774590A

Abstract

A shadow generation method and apparatus, an electronic device, and a storage medium. The method may comprise: acquiring, in a graphical user interface (GUI), contour data of a target control to be drawn; according to the contour data, determining, outside of a contour range corresponding to the target control, a shadow drawing path corresponding to the target control; and according to the shadow drawing path, drawing a shadow image corresponding to the target control by means of a blur mask filter, the shadow image being used to achieve a shadow effect on a view object corresponding to the target control. The implementation of embodiments of the present application may improve the convenience and efficiency of achieving a shadow effect on a GUI of an electronic device.

Description

Shadow generation method and device, electronic device, storage medium

This application claims the priority of the Chinese patent application filed on September 7, 2021 with the application number 202111044692.6 and the title of the invention is "shadow generation method and device, electronic equipment, storage medium", the entire content of which is incorporated by reference in this application middle.

technical field

The present application relates to the technical field of graphical user interface, and in particular to a method and device for generating a shadow, electronic equipment, and a storage medium.

Background technique

At present, when an electronic device (such as a smart phone, a computer, a television, etc.) outputs and displays through its screen, it usually presents different display effects according to different settings of its GUI (Graphical User Interface, Graphical User Interface). However, in practice, it is found that when realizing the shadow effect, the drawing process required by the electronic device is often complicated, which reduces the convenience and efficiency of the electronic device to realize the shadow effect on the GUI.

Contents of the invention

The embodiment of the present application discloses a method and device for generating a shadow, an electronic device, and a storage medium, which can improve the convenience and efficiency of realizing a shadow effect on a graphical user interface of the electronic device.

The first aspect of the embodiment of the present application discloses a shadow generation method, including:

Obtain the outline data of the target control to be drawn in the GUI;

According to the outline data, determine a shadow drawing path corresponding to the target control outside the outline range corresponding to the target control;

According to the shadow drawing path, a shadow image corresponding to the target control is drawn through a blur mask filter, and the shadow image is used to realize a shadow effect on a view object corresponding to the target control.

The second aspect of the embodiment of the present application discloses a shadow generation device, including:

an outline acquiring unit, configured to acquire outline data of the target control to be drawn in the graphical user interface;

a path determining unit, configured to determine a shadow drawing path corresponding to the target control outside the range of the contour corresponding to the target control according to the contour data;

The shadow drawing unit is configured to draw a shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path, and the shadow image is used to realize a shadow effect on a view object corresponding to the target control.

The third aspect of the embodiment of the present application discloses an electronic device, including a memory and a processor, the memory stores a computer program, and when the computer program is executed by the processor, the processor realizes the All or part of the steps in any shadow generating method disclosed in the first aspect of the embodiment.

The fourth aspect of the embodiment of the present application discloses a computer-readable storage medium, which stores a computer program, wherein, when the computer program is executed by a processor, any shadow generation method as disclosed in the first aspect of the embodiment of the present application is implemented All or some of the steps in .

The details of one or more embodiments of the application are set forth in the accompanying drawings and the description below. Other features and beneficial effects of the present application will appear from the description, drawings and claims.

Description of drawings

In order to more clearly illustrate the technical solutions in the embodiments of the present application, the accompanying drawings that need to be used in the embodiments will be briefly introduced below. Obviously, the accompanying drawings in the following description are only some embodiments of the present application. For Those of ordinary skill in the art can also obtain other drawings based on these drawings without making creative efforts.

FIG. 1 is a schematic diagram of an application scenario of a shadow generation method disclosed in an embodiment of the present application;

Fig. 2 is a schematic flowchart of a shadow generation method disclosed in the embodiment of the present application;

FIG. 3 is a schematic diagram of a target control displayed on a graphical user interface disclosed in an embodiment of the present application;

FIG. 4 is a schematic diagram of another target control displayed on a graphical user interface disclosed in an embodiment of the present application;

Fig. 5 is a schematic flowchart of another shadow generation method disclosed in the embodiment of the present application;

FIG. 6A is a schematic diagram of a shadow effect implemented on a view object corresponding to a target control disclosed in an embodiment of the present application;

FIG. 6B is a schematic diagram of a shadow effect implemented on a view object corresponding to another target control disclosed in the embodiment of the present application;

FIG. 6C is a schematic diagram of a shadow effect implemented on a view object corresponding to another target control disclosed in the embodiment of the present application;

Fig. 7 is a schematic flowchart of another shadow generation method disclosed in the embodiment of the present application;

Fig. 8 is a schematic diagram of different blur processing modes of the blur mask filter disclosed in the embodiment of the present application;

Fig. 9 is a schematic modular diagram of a shadow generating device disclosed in an embodiment of the present application;

Fig. 10 is a schematic modular diagram of an electronic device disclosed in an embodiment of the present application.

Detailed ways

The technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of them. Based on the embodiments in this application, all other embodiments obtained by persons of ordinary skill in the art without making creative efforts belong to the scope of protection of this application.

It should be noted that the terms "comprising" and "having" and any variations thereof in the embodiments of the present application are intended to cover a non-exclusive inclusion, for example, a process, method, system, product, or process that includes a series of steps or units. The apparatus is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to the process, method, product or apparatus.

A detailed description will be given below in conjunction with the accompanying drawings.

Please refer to FIG. 1 . FIG. 1 is a schematic diagram of an application scenario of a shadow generation method disclosed in an embodiment of the present application. As shown in FIG. 1 , the electronic device 100 may include a screen 101, on which a graphical user interface (Graphical User Interface, GUI) 20 may be output and displayed, and the user may obtain an image output by the electronic device 100 through the graphical user interface 20, Text and other information, and at the same time, the control of the electronic device 100 can be realized through the graphical user interface 20 . Exemplarily, the graphical user interface 20 can be provided with different controls 21, such as button controls, text box controls, etc., and each control 21 can be displayed in the form of a view (View) object on the graphical user interface 20, and the user The electronic device 100 can be controlled by interacting with the selected view object (such as clicking a button, inputting text into a text box, etc.) to call the data or method encapsulated by the corresponding control 21 .

It should be noted that, when the electronic device 100 performs output display through its screen 101 , it usually presents different display effects according to different settings of its graphical user interface 20 . Wherein, for the controls 21 provided on the GUI 20, various shadow effects can be realized on the view objects corresponding to the controls 21, so as to enhance the three-dimensionality and layering of the view objects and optimize the visual effect of the GUI 20. Expressive effect.

In the embodiment of the present application, in order to realize the shadow effect corresponding to the control 21 on the GUI 20, the electronic device 100 can obtain the outline data of the target control 21 to be drawn in the GUI 20, and according to the outline data, in the The shadow drawing path corresponding to the target control is determined outside the outline range corresponding to the target control 21 . On this basis, the electronic device 100 can draw the shadow image corresponding to the target control 21 through the blur mask filter (BlurMaskFilter) according to the above-mentioned shadow drawing path, and the shadow image is used on the view object corresponding to the above-mentioned target control 21 Realize the shadow effect. It can be seen that, implementing the embodiment of the present application, when the electronic device 100 draws the target control 21 on the GUI 20, it can draw the shadow image of the target control 21 based on the blur mask filter, so that it can draw the target control 21 on the GUI 20. Implement a control 21 with a shadow effect. Compared with the shadow effect in the related art, it is often necessary to draw shadows with four sides and rounded corners according to the size of the control, and the overall drawing process is more complicated. The embodiment of the present application can quickly and simply complete the shadow image through the blur mask filter drawing, so as to effectively improve the convenience and efficiency of the electronic device 100 in realizing the shadow effect on the GUI 20 .

Among them, the above-mentioned electronic device 100 may include various devices or systems with screen display functions, such as mobile phones, smart wearable devices, vehicle-mounted terminals, tablet computers, PCs (Personal Computers, personal computers), PDAs (Personal Digital Assistants, personal digital Assistant), TV, etc., which are not specifically limited in this embodiment of the present application. Further, the electronic device 100 may be equipped with an operating system, such as an Android operating system, an iOS operating system, a Symbian operating system, a Windows operating system, etc. In the embodiments of the present application, the Android operating system is used as an example . It can be understood that the electronic device 100 shown in FIG. 1 is a TV, which is only an example and should not be regarded as a limitation on the type of the electronic device 100 in the embodiment of the present application.

Exemplarily, the screen 101 of the electronic device 100 may include a backlight layer and a display layer not shown in the figure. The backlight layer may be used to emit a white backlight, and the display layer may be used to adjust the filters of different pixels according to the above-mentioned output image signal. The color of the light and the degree of filtering are used to filter the above-mentioned white backlight to achieve color output of different colors and different brightnesses. Taking a liquid crystal TV as an example, it may have a liquid crystal display (Liquid Crystal Display, LCD), and the display layer may specifically be a combination of a TFT (Thin Film Transistor, thin film transistor) layer, a liquid crystal layer, and a filter layer. By controlling the voltage signal on the TFT layer through the built-in processor of the LCD TV, the arrangement state of the liquid crystal molecules in the liquid crystal layer can be adjusted accurately, so as to distribute the corresponding light transmission for different pixels and filters of different colors in the filter layer. In this way, the brightness of each pixel on different color channels can be adjusted, and the color effect corresponding to the output image signal can be displayed on the screen 101, so as to realize the corresponding display image output, so that on this basis, the graphical user interface 20 can be accurately displayed. The shadow effect corresponding to each control 21 in .

Optionally, the screen 101 of the above-mentioned electronic device 100 may also only include a display layer, and the display layer may emit light by itself, so as to directly adjust the color effect displayed on the screen 101 under the control of the built-in processor of the electronic device 100, To achieve the corresponding display image output. Exemplarily, taking an OLED (Organic Light Emitting Diodes, Organic Light Emitting Diodes) TV as an example, it may have an OLED display screen, and the above-mentioned display layer may specifically be an OLED layer.

Please refer to FIG. 2 . FIG. 2 is a schematic flowchart of a method for generating a shadow disclosed in an embodiment of the present application. As shown in Figure 2, the shadow generation method may include the following steps:

202. Acquire outline data of a target control to be drawn in a graphical user interface.

In the embodiment of the present application, when the electronic device outputs and displays a graphical user interface through its screen, the graphical user interface may be provided with different controls, such as button controls, text box controls, etc., each control on the graphical user interface Both can be displayed in the form of view objects. On this basis, in order to realize the shadow effect on the GUI (specifically, realize the shadow effect on the view objects corresponding to each control), the electronic device may first obtain the outline data of the target control to be drawn.

Exemplarily, the above-mentioned contour data may include contour shape (such as contour shape, contour size, etc.), contour attributes (such as whether the corresponding target control belongs to a container control, a non-container control, etc.) and the like. Please refer to Figure 3 and Figure 4 together, Figure 3 is a schematic diagram of a target control displayed on the graphical user interface disclosed in the embodiment of the application, and Figure 4 is a schematic diagram of the target control displayed on the graphical user interface disclosed in the embodiment of the application Schematic diagram of another target control. As shown in Figure 3, the target control 21a can be a non-container control (its corresponding view object does not contain or combine other view objects), and on the graphical user interface 20, the target control 21a can be displayed as a view object in the form of an icon, which The profile shape can be a rounded rectangle. In some embodiments, the outline shape of the target control 21a may also be a circle, an ellipse, a triangle with rounded corners, and the like. In some other embodiments, as shown in FIG. 4, the target control 21b can be a container control (its corresponding view object can contain or combine other view objects 21a), and on the graphical user interface 20, the target control 21b can be displayed as The outline shape of the view object in the form of a card can also be a rounded rectangle.

On this basis, based on the above acquired outline data, the electronic device can determine the outline range corresponding to the target control in a subsequent step, so that a shadow image can be further drawn outside the outline range to achieve a shadow effect.

204. According to the outline data, determine a shadow drawing path corresponding to the target control outside the range of the outline corresponding to the target control.

In the embodiment of this application, since the view object corresponding to the target control occupies a certain area on the GUI, that is, covers a certain area of pixels, the shadow image used to realize its shadow effect is outside the outline range corresponding to the target control It also covers pixels in a certain area. In order to obtain the above-mentioned shadow image, the electronic device can call a brush object (such as realized by the Paint() class in the Android operating system) to draw according to a certain shadow drawing path (such as realized by the Path() class in the Android operating system) .

Exemplarily, after acquiring the outline data, the electronic device may determine the outline range corresponding to the target control based on the outline data, and then determine the shadow drawing path corresponding to the target control outside the outline range.

In some embodiments, the electronic device may determine a shadow drawing path corresponding to the target control according to a shadow range parameter, wherein the shadow range parameter may be used to define a shadow drawing range including the shadow drawing path. Exemplarily, still taking the Android operating system as an example, the shadow range parameters may include android:clipToPadding (used to determine whether the shadow drawing range is within the outline range corresponding to the target control), android:clipChildren (used to determine whether the shadow drawing range beyond the outline range corresponding to the parent control of the target control), etc.

In some other embodiments, the electronic device may determine a shadow drawing path corresponding to the target control according to a shadow effect parameter, wherein the shadow effect parameter may be used to define a shadow effect that can be achieved by the drawn shadow image. Exemplarily, the shadow effect parameters may at least include shadow color, shadow blur radius (used to characterize the shadow diffusion range), shadow offset parameters (used to characterize the degree of shifting of the shadow image on the X or Y axis), shadow circle Any one of the corner parameters (the size of the rounded corner, the radian, etc. used to characterize the shadow image) can usually include multiple kinds at the same time, which is not specifically limited in the embodiment of the present application.

206. According to the shadow drawing path, draw a shadow image corresponding to the above-mentioned target control through a blur mask filter, where the shadow image is used to realize a shadow effect on the view object corresponding to the above-mentioned target control.

Among them, the above-mentioned blur mask filter (BlurMaskFilter) can be used to perform a certain Alpha filtering process on the drawn shadow image when the electronic device calls the brush object to draw the shadow image, thereby adjusting the transparency of the shadow image in different regions, realizing Different blur effects.

In the embodiment of this application, taking the Android operating system as an example, after the electronic device determines the above-mentioned shadow drawing path, it can directly call the brush drawing effect interface BlurMaskFilter on the Android SDK, and reset the parameters or use the default parameters. , use this interface to draw the shadow image corresponding to the target control according to the above shadow drawing path, so that the corresponding shadow effect can be realized on the view object corresponding to the above target control through the shadow image.

It can be seen that, by implementing the shadow generation method described in the above embodiments, the electronic device can draw the shadow image of the target control based on the blur mask filter when drawing the target control on the GUI, so that the shadow image of the target control can be drawn on the GUI. Realize controls with shadow effects, improve the three-dimensional and layered sense of view objects, and optimize the visual expression effect of the GUI. Compared with the shadow effect in the related art, it is often necessary to draw shadows with four sides and rounded corners according to the size of the control, and the overall drawing process is more complicated. The embodiment of the present application can quickly and simply complete the shadow image through the blur mask filter drawing, thereby effectively improving the convenience and efficiency of electronic devices in realizing shadow effects on GUIs.

Please refer to FIG. 5 . FIG. 5 is a schematic flowchart of another shadow generation method disclosed in the embodiment of the present application. As shown in Figure 5, the shadow generation method may include the following steps:

502. Acquire shape data corresponding to the target control to be drawn in the GUI through the view outline interface.

504. If the shape data includes a custom shape, determine the custom shape as the contour shape of the target control, and if the shape data does not include the custom shape, determine a default shape as the contour shape of the target control.

Wherein, step 502 and step 504 are similar to the above step 202, that is, the outline data acquired by the electronic device may include outline shape. Optionally, the electronic device may acquire shape data corresponding to the target control to be drawn through the view outline interface, and then determine the outline shape of the target control according to the shape data. It should be noted that the aforementioned contour shape may include contour shape, contour size, etc., so that the contour range corresponding to the target control can be uniquely and accurately determined.

In this embodiment of the application, taking the Android operating system as an example, the electronic device can directly call the interface ViewOutlineProvider on the Android SDK as the view outline interface to obtain the shape data corresponding to the target control to be drawn in the GUI. On this basis, if the target control defines its outline shape, the shape data acquired by the electronic device may include the custom shape (such as non-default rounded rectangle, circle, ellipse, rounded triangle, etc.); Otherwise, if the shape data acquired by the electronic device does not include a custom shape, the electronic device may also determine a default shape (usually a rounded rectangle of a certain size) as the outline shape of the target control.

Further, the electronic device may use the above outline shape as the inner border of the shadow image corresponding to the target control in subsequent steps, so that the shadow drawing path corresponding to the target control may be determined outside the inner border, so as to further draw the shadow outside the inner border Image, to realize the shadow effect on the view object corresponding to the target control.

In some embodiments, before the electronic device determines the shadow drawing path corresponding to the target control, it can first define the shadow drawing range including the shadow drawing path based on the shadow range parameter, so as to ensure that the shadow is drawn under the condition of conforming to the shadow drawing range image. For example, the electronic device can obtain preset shadow range parameters (such as the above-mentioned android:clipToPadding, android:clipChildren, etc.), and then can use the above-mentioned outline shape as the inner border of the shadow image corresponding to the target control, and in the Outside the border, and within the shadow drawing range defined by the above shadow range parameter, determine the shadow drawing path corresponding to the target control.

Exemplarily, by setting the value of the Boolean shadow range parameter android:clipToPadding to false (that is, setting android:clipToPadding=false), the shadow drawing range can exceed the area filled by the target control, that is, the outline shape of the target control As the inner border of the shadow image corresponding to the target control, draw the shadow image outside the inner border. By setting the value of the shadow range parameter android:clipChildren to false (that is, setting android:clipChildren=false), the shadow drawing range is not limited by the outline range corresponding to the parent control of the target control, that is, the drawn shadow image will not be Contains the target control, the contour range cut corresponding to the parent control with a larger contour range, so that it can be extended as far as possible in the GUI to achieve rich and diverse shadow effects.

506. Obtain a shadow effect parameter, where the shadow effect parameter at least includes any one of a shadow color, a shadow blur radius, a shadow offset parameter, and a shadow fillet parameter.

Wherein, the above-mentioned shadow effect parameter may be used to define a shadow effect that can be realized by the electronic device for the shadow image drawn by the view object corresponding to the target control. After obtaining the shadow effect parameters, the electronic device can further determine the shadow drawing path corresponding to the target control in a subsequent step in combination with the outline shape of the target control and the shadow effect parameters, so as to draw a customized shadow image, which is beneficial to Improve the accuracy and flexibility of electronic devices to implement shadow effects on GUIs.

Exemplarily, the above shadow color may be used to represent the range of the shadow image in the color gamut. Optionally, the shadow color may include a single color, or a mixed color, a gradient color (for example, the shadow image gradually changes from the center to the surrounding, from left to right, etc.), which is not specifically limited in this embodiment of the present application.

The shadow blur radius above can be used to characterize the shadow diffusion range, that is, the size of the shadow image itself (for example, the width from the inner border of the shadow image to the outer border), or the size of the shadow image relative to the outline range of the target control (for example, The ratio of the radius of this shadow image relative to the radius of the outline bounds of the target control). As shown in Figure 6A, when drawing shadow images for the view objects of the same target control from left to right (the numbers are a, b, and c), the schematic diagrams of shadow effects from small to large shadow blur radii (the black area represents the shadow image ).

The above-mentioned shadow offset parameter can be used to characterize the offset degree of the shadow image on the X or Y axis, that is, the offset degree of the shadow image relative to the view object of the target control in the horizontal axis direction or the vertical axis direction. Take the shadow image shifted only in the positive direction of the X-axis (to the right) as an example, as shown in Figure 6B, from left to right (the numbers are a, b, c) in order to draw shadow images for the view objects of the same target control , the schematic diagram of the shadow effect from small to large shadow offset parameters (the black area represents the shadow image). It can be understood that when the offset parameters of the shadow image on both the X axis and the Y axis are not 0, the shadow image can also be obliquely offset relative to the view object of the target control.

The above-mentioned shadow rounded corner parameters can be used to characterize the rounded corner size, radian, etc. of the shadow image, so that when the shadow image contains rounded corners (for example, the outline shape of the target control is a rounded rectangle, rounded triangle, etc.), it can be accurately determined. Shape with rounded corners. Take the contour shape of the target control as a rounded rectangle, and the shadow rounded corner parameters include the size of the rounded corners as an example, as shown in Figure 6C, from left to right (the numbers are a, b, c) in turn for the same target control When the view object draws a shadow image, the diagram of the shadow effect from small to large shadow fillet parameters (the black area represents the shadow image).

508. According to the above-mentioned outline shape and shadow effect parameters, determine a shadow drawing path corresponding to the target control outside the range of the outline corresponding to the target control.

Wherein, step 508 is similar to step 204 above. It should be noted that by combining the outline shape of the target control and the shadow effect parameters to determine the shadow drawing path, a customized shadow image can be drawn, thereby effectively improving the accuracy and accuracy of the shadow effect on the graphical user interface of the electronic device. flexibility.

510. Draw a shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path, where the shadow image is used to implement a shadow effect on the view object corresponding to the target control.

Wherein, step 510 is similar to the above-mentioned step 206 and will not be repeated here.

It can be seen that, by implementing the shadow generation method described in the above embodiments, the electronic device can draw the shadow image of the target control based on the blur mask filter when drawing the target control on the GUI, so that the shadow image of the target control can be drawn on the GUI. Realize controls with shadow effects, improve the three-dimensional and layered sense of view objects, and optimize the visual expression effect of the GUI. The drawing of the shadow image can be completed quickly and simply by using the blur mask filter, which can effectively improve the convenience and efficiency of realizing the shadow effect on the graphical user interface of the electronic device. In addition, by setting a series of parameters to limit the drawing range and drawing effect of the shadow image, the electronic device can draw a customized shadow image, which is conducive to improving the accuracy and flexibility of the shadow effect on the graphical user interface of the electronic device sex.

Please refer to FIG. 7 . FIG. 7 is a schematic flowchart of another method for generating a shadow disclosed in an embodiment of the present application. As shown in Figure 7, the shadow generation method may include the following steps:

702. Acquire shape data corresponding to the target control to be drawn in the GUI through the view outline interface.

704. If the shape data includes a custom shape, determine the custom shape as the outline shape of the target control, and if the shape data does not include the custom shape, determine a default shape as the outline shape of the target control.

Wherein, step 702 and step 704 are similar to the above step 502 and step 504, and will not be repeated here.

706. Obtain a shadow effect parameter, where the shadow effect parameter at least includes any one of a shadow color, a shadow blur radius, a shadow offset parameter, and a shadow fillet parameter.

708. According to the above outline shape and shadow effect parameters, determine a shadow drawing path corresponding to the target control outside the range of the outline corresponding to the target control.

Wherein, step 706 and step 708 are similar to the above step 506 and step 508, and will not be repeated here.

710. Acquire a target rendering pipeline corresponding to the GUI.

In this embodiment of the present application, different electronic devices may be provided with different rendering pipeline platforms, such as OpenGL, SkiaGL, Skiavk, and the like. Among them, for the pure hardware rendering pipeline, that is, only through the GPU (Graphics Processing Unit, graphics processor) to accelerate the rendering of shadow images, the above-mentioned blur mask filter will be invalid. At this time, other compatible processing operations are required to realize the graphical user interface. Shadow effect on . For the non-hardware rendering pipeline, that is, the situation that the shadow image can also be accelerated through the CPU (Central Processing Unit, central processing unit), the above-mentioned blur mask filter can be used to draw the shadow image. Therefore, before the electronic device actually draws the shadow image, it can obtain the target rendering pipeline correspondingly supported by its GUI, so that the shadow image can be drawn by corresponding measures according to the type of the target rendering pipeline, so as to achieve the same shadow effect.

712. In the case that the aforementioned target rendering pipeline is a non-pure hardware rendering pipeline, draw a shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path.

In the embodiment of the present application, taking the Android operating system as an example, when the electronic device determines that the target rendering pipeline supported by its graphical user interface is a non-pure hardware rendering pipeline (such as SkiaGL, Skiavk, etc.), it can directly call the The brush drawing effect interface BlurMaskFilter is used to use this interface to draw the shadow image corresponding to the target control according to the above shadow drawing path.

Exemplarily, when the electronic device uses the BlurMaskFilter interface, that is, draws the shadow image corresponding to the target control through the blur mask filter, it can realize different blur effects based on the different blur processing modes of the blur mask filter, so that in the above On the basis of customized shadow images, different shadow effects can be further realized. As shown in Figure 8, the aforementioned blur processing modes may include NORMAL (inner and outer blurred drawing), SOLID (inner normal drawing, outer blurring), OUTER (inner no drawing, outer blurring), INNER (inner normal drawing, outer blurring), etc. . It can be understood that with different blur processing modes, due to the continuity of shadow diffusion, even if the area covered by the outline range of the target control in Figure 8 is removed, the shadow images drawn outside the outline range of the target control can still achieve different blur effect.

Optionally, the electronic device may determine a blur processing mode of the blur mask filter according to the above shadow effect parameters, that is, the blur mask filter implements the above different modes of different blur effects. On this basis, the electronic device can draw the shadow image corresponding to the target control through the determined blur processing mode of the blur mask filter according to the above-mentioned shadow drawing path, so as to achieve different blur effects and improve the electronic device's graphics user experience. Realize the diversity of shadow effects on the interface.

714. In the case that the above-mentioned target rendering pipeline is a pure hardware rendering pipeline, perform a compatible processing operation according to the shadow effect parameter, and draw a shadow image corresponding to the target control through the brush object.

In the embodiment of the present application, taking the Android operating system as an example, when the electronic device determines that the target rendering pipeline supported by its GUI is a pure hardware rendering pipeline (such as OpenGL, etc.), it can use other compatible processing operations to Achieves the same shadow effect as achieved by the blur mask filter above.

In some embodiments, when the above-mentioned target rendering pipeline is a pure hardware rendering pipeline, the electronic device can force the use of software rendering to draw shadow images, and at this time, the electronic device can adjust the properties of the brush object according to the above-mentioned shadow effect parameters Parameters, and then can be drawn through the brush object. Wherein, the above attribute parameters can be used to define the drawing effect of the brush object. For example, the electronic device can adjust the shadow blur radius, shadow offset parameter, shadow color, etc. of the shadow image drawn by the brush object through the setShadowLayer interface, so as to obtain a brush object with a customized drawing effect.

In some other embodiments, if the electronic device does not force the use of software drawing to draw the shadow image, the shadow drawing range for the brush object to draw the shadow image may be determined according to the above shadow effect parameters, that is, the boundary of the shadow image is drawn first. On this basis, the electronic device can directly invoke the brush object to draw a shadow image within the shadow drawing range (ie, within the above-mentioned boundary), so as to realize the shadow effect on the GUI.

It can be understood that step 714 can be executed after the above step 710, that is, the above step 712 and this step 714 can be implemented in parallel, so as to be compatible with different rendering pipeline platforms set by different electronic devices.

716. Draw a background image matching the shadow image according to the outline data, and draw a foreground image matching the shadow image within the outline range corresponding to the target control.

In the embodiment of the present application, after drawing the above-mentioned shadow image, the electronic device may respectively draw the foreground and background images compatible with the shadow graphic adaptation, so as to realize a complete drawing process of the target control.

Exemplarily, the electronic device may draw a background image matching the above shadow image based on the outline data of the target control. Wherein, the background image can be defined through the attribute of the background variable. For example, the electronic device can first obtain the background image resource, that is, point the above-mentioned background variable to the preset image resource, and then preprocess the background image resource according to the above-mentioned outline data to obtain the process of matching the outline range corresponding to the target control Image resource. Taking the Android operating system as an example, the background image resource can usually be stored in the form of a bitmap (BitmapDrawable). After the electronic device obtains the background image resource in the form of a bitmap, it can be converted into Handle image resources in the form of rounded bitmaps (RoundBitmapDrawable).

On this basis, the electronic device can draw a background image that matches the above shadow image through the brush object according to the image type of the above processing image resource. Exemplarily, besides the rounded corner bitmap (RoundBitmapDrawable), the image type of the above-mentioned processing image resource may also include a solid color image (ColorDrawable), a gradient color image (GradientDrawable), and the like. For processing image resources of different image types, the electronic device can obtain its corresponding attribute information (such as fillet size, radian, RGB color value, etc.), and then call a brush object to draw a background image that matches the above shadow image. Optionally, the background image may match the outline size of the shadow image, or may be slightly larger than the shadow image, which is not specifically limited in this embodiment of the present application.

Exemplarily, the electronic device may also draw a foreground image matching the shadow image within the contour range corresponding to the target control based on the contour data of the target control. Wherein, the foreground image can be defined through the attribute of the foreground variable. It can be understood that the foreground image can completely match the outline range of the target control, so as to form a complete view object corresponding to the target control with the above shadow image and background image.

It can be seen that, by implementing the shadow generation method described in the above embodiments, the electronic device can draw the shadow image of the target control based on the blur mask filter when drawing the target control on the GUI, so that the shadow image of the target control can be drawn on the GUI. Realize controls with shadow effects, improve the three-dimensional and layered sense of view objects, and optimize the visual expression effect of the GUI. The drawing of the shadow image can be completed quickly and simply by using the blur mask filter, which can effectively improve the convenience and efficiency of realizing the shadow effect on the graphical user interface of the electronic device. In addition, by using different blur processing modes of the blur mask filter, different blur effects can be achieved, so that on the basis of the above-mentioned customized shadow image, different shadow effects can be further realized, and the electronic device can realize shadows on the graphical user interface. Variety of effects. In addition, according to the type of the target rendering pipeline supported by the GUI, corresponding measures are used to draw the shadow image to achieve the same shadow effect, which can further improve the compatibility, flexibility and reliability. In addition, by drawing the foreground and background images compatible with the above-mentioned shadow graphics adaptation, the complete drawing process of the target control can be conveniently realized, so that the card layout with shadow effect can be realized on the graphical user interface of the electronic device, and unified shadow visual effect.

Please refer to FIG. 9 . FIG. 9 is a schematic modular diagram of a shadow generating device disclosed in an embodiment of the present application. As shown in FIG. 9, the shadow generation device may include contour acquisition 901, path determination 902, and shadow drawing unit 903, wherein:

an outline acquisition unit 901, configured to acquire outline data of the target control to be drawn in the GUI;

A path determining unit 902, configured to determine a shadow drawing path corresponding to the target control outside the contour range corresponding to the target control according to the contour data;

The shadow drawing unit 903 is configured to draw the shadow image corresponding to the target control through the blur mask filter according to the shadow drawing path, and the shadow image is used to realize the shadow effect on the view object corresponding to the target control.

It can be seen that by using the shadow generation device described in the above embodiments, the electronic device can draw the shadow image of the target control based on the blur mask filter when drawing the target control on the GUI, so that it can draw the target control on the GUI. Realize controls with shadow effects, improve the three-dimensional and layered sense of view objects, and optimize the visual expression effect of the GUI. Compared with the shadow effect in the related art, it is often necessary to draw shadows with four sides and rounded corners according to the size of the control, and the overall drawing process is more complicated. The embodiment of the present application can quickly and simply complete the shadow image through the blur mask filter drawing, thereby effectively improving the convenience and efficiency of electronic devices in realizing shadow effects on GUIs.

In an embodiment, the above-mentioned contour data may include a contour shape, and the above-mentioned path determination 902 may be specifically used to use the contour shape as an inner frame of a shadow image corresponding to the target control, and determine a shadow drawing path corresponding to the target control outside the inner frame.

On this basis, the above-mentioned outline acquisition unit 901 can be specifically configured to acquire the shape data corresponding to the target control to be drawn in the graphical user interface through the view outline interface;

If the shape data includes a custom shape, the contour acquisition unit 901 may determine the custom shape as the contour shape of the target control; if the shape data does not include a custom shape, the contour acquisition unit 901 may determine the default shape as the contour of the target control shape.

In an embodiment, the path determination unit 902 may specifically include a parameter acquisition subunit and a path determination subunit not shown in the figure, wherein:

The parameter acquisition subunit is used to obtain the shadow range parameter, which is used to define the shadow drawing range, and the shadow drawing range is not limited by the outline range corresponding to the parent control of the target control;

The path determination subunit is used to determine the shadow drawing path corresponding to the target control by using the outline shape as the inner border of the shadow image corresponding to the target control, outside the inner border, and within the shadow drawing range defined by the shadow range parameter.

In one embodiment, the shadow generation device may further include a first acquisition unit not shown in the figure, and the first acquisition unit may be used to acquire shadow effect parameters, the shadow effect parameters at least include shadow color, shadow blur radius, shadow offset Any one of the shift parameter and the shadow fillet parameter;

The above-mentioned path determination unit 902 may specifically be configured to determine a shadow drawing path corresponding to the target control outside the contour range corresponding to the target control according to the contour data and the shadow effect parameters.

In an embodiment, the shadow drawing unit 903 may include a mode determination subunit and a drawing subunit not shown, wherein:

The mode determination subunit is used to determine the blur processing mode of the blur mask filter according to the shadow effect parameter, and the blur processing mode refers to the mode in which the blur mask filter realizes the blur effect;

The drawing subunit is used to draw the path according to the shadow, and draw the shadow image corresponding to the target control through the blur processing mode of the blur mask filter.

It can be seen that by using the shadow generation device described in the above embodiments, by setting a series of parameters to limit the drawing range and drawing effect of the shadow image, the electronic device can draw a customized shadow image, which is beneficial to improve the graphics performance of the electronic device. Accuracy and flexibility in implementing shadow effects on the user interface. In addition, by using different blur processing modes of the blur mask filter, different blur effects can be achieved, so that on the basis of the above-mentioned customized shadow image, different shadow effects can be further realized, and the electronic device can realize shadows on the graphical user interface. Variety of effects.

In one embodiment, the shadow generation device may further include a second acquisition unit not shown, the second acquisition unit is used to draw the above-mentioned target through the blur mask filter according to the shadow drawing path in the above-mentioned shadow drawing unit 903 Get the target rendering pipeline corresponding to the GUI before the shadow image corresponding to the control;

The above-mentioned shadow drawing unit 903 can specifically be used to draw the shadow image corresponding to the target control through the blur mask filter according to the shadow drawing path when the target rendering pipeline is not a pure hardware rendering pipeline.

In an embodiment, the shadow generating device may further include a compatible unit not shown, and the compatible unit may be used to perform compatible processing operations according to shadow effect parameters when the above-mentioned target rendering pipeline is a pure hardware rendering pipeline, And draw the shadow image corresponding to the target control through the brush object;

Among them, compatible processing operations include:

Adjust the attribute parameters of the brush object according to the shadow effect parameters, and the attribute parameters are used to define the drawing effect of the brush object;

Or, determine the shadow drawing range in which the brush object draws the shadow image according to the shadow effect parameter.

It can be seen that, by adopting the shadow generation device described in the above embodiments, corresponding measures are used to draw shadow images according to the type of the target rendering pipeline supported by the GUI, so as to achieve the same shadow effect, and further improve the performance of the electronic device on the graphics user interface. Compatibility, flexibility and reliability for implementing shadow effects on the interface.

In one embodiment, the shadow generation device may also include a not-shown foreground and background drawing unit, which may be used to draw the above-mentioned shadow through the blur mask filter according to the shadow drawing path in the shadow drawing unit 903. After the shadow image corresponding to the target control, draw a background image matching the shadow image according to the contour data, and draw a foreground image matching the shadow image within the contour range corresponding to the target control.

Wherein, when the foreground and background drawing unit draws the background image matching the shadow image according to the outline data, it may specifically include the following steps:

Get the background image resource;

Preprocessing the background image resource according to the outline data to obtain a processed image resource matching the outline range corresponding to the target control;

According to the image type of the processed image resource, a background image matching the shadow image is drawn through the brush object.

It can be seen that by using the shadow generation device described in the above embodiments, the electronic device can draw the shadow image of the target control based on the blur mask filter when drawing the target control on the GUI, so that it can draw the target control on the GUI. Realize controls with shadow effects, improve the three-dimensional and layered sense of view objects, and optimize the visual expression effect of the GUI. The drawing of the shadow image can be completed quickly and simply by using the blur mask filter, which can effectively improve the convenience and efficiency of realizing the shadow effect on the graphical user interface of the electronic device. In addition, by drawing the foreground and background images compatible with the above-mentioned shadow graphics adaptation, the complete drawing process of the target control can be conveniently realized, so that the card layout with shadow effect can be realized on the graphical user interface of the electronic device, and unified shadow visual effect.

Please refer to FIG. 10 . FIG. 10 is a schematic modular diagram of an electronic device disclosed in an embodiment of the present application. As shown in Figure 10, the electronic equipment may include:

A memory 1001 storing executable program codes;

a processor 1002 coupled to the memory 1001;

Wherein, the processor 1002 invokes the executable program code stored in the memory 1001 to execute all or part of the steps in any shadow generating method described in the above-mentioned embodiments.

In addition, the embodiment of the present application further discloses a computer-readable storage medium, which stores a computer program for electronic data exchange, wherein the computer program enables the computer to execute any shadow generation method described in the above-mentioned embodiments. all or part of the steps.

In addition, the embodiments of the present application further disclose a computer program product. When the computer program product is run on a computer, the computer can execute all or part of the steps in any shadow generation method described in the above embodiments.

Those of ordinary skill in the art can understand that all or part of the steps in the various methods of the above-mentioned embodiments can be completed by instructing related hardware through a program, and the program can be stored in a computer-readable storage medium, and the storage medium includes read-only Memory (Read-Only Memory, ROM), random access memory (Random Access Memory, RAM), programmable read-only memory (Programmable Read-only Memory, PROM), erasable programmable read-only memory (Erasable Programmable Read Only Memory, EPROM), One-time Programmable Read-Only Memory (OTPROM), Electronically Erasable Programmable Read-Only Memory (EEPROM), Compact Disc (Compact Disc Read-Only Memory, CD-ROM) or other optical disk storage, magnetic disk storage, tape storage, or any other computer-readable medium that can be used to carry or store data.

A shadow generation method and device, electronic equipment, and storage medium disclosed in the embodiments of the present application have been described above in detail. In this paper, specific examples are used to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used To help understand the method and its core idea of this application; at the same time, for those of ordinary skill in the art, according to the idea of this application, there will be changes in the specific implementation and application scope. In summary, this specification The content should not be construed as a limitation of the application.

Claims

A method for generating shadows, comprising:

Obtain the outline data of the target control to be drawn in the GUI;

According to the outline data, determine a shadow drawing path corresponding to the target control outside the outline range corresponding to the target control;

According to the shadow drawing path, a shadow image corresponding to the target control is drawn through a blur mask filter, and the shadow image is used to realize a shadow effect on a view object corresponding to the target control.
The method according to claim 1, wherein the outline data includes an outline shape, and according to the outline data, the shadow drawing path corresponding to the target control is determined outside the outline range corresponding to the target control, include:

The outline shape is used as an inner frame of the shadow image corresponding to the target control, and a shadow drawing path corresponding to the target control is determined outside the inner frame.
The method according to claim 2, wherein said acquiring the outline data of the target control to be drawn in the GUI comprises:

Obtain the shape data corresponding to the target control to be drawn in the GUI through the view outline interface;

If the shape data includes a custom shape, then determine the custom shape as the outline shape of the target control; if the shape data does not include a custom shape, determine a default shape as the outline of the target control shape.
The method according to claim 2, wherein the contour shape is used as an inner frame of the shadow image corresponding to the target control, and a shadow drawing path corresponding to the target control is determined outside the inner frame, include:

Obtain a shadow range parameter, the shadow range parameter is used to define a shadow drawing range, and the shadow drawing range is not limited by the outline range corresponding to the parent control of the target control;

Using the outline shape as the inner border of the shadow image corresponding to the target control, outside the inner border and within the shadow drawing range defined by the shadow range parameter, determine the shadow drawing corresponding to the target control path.
The method according to any one of claims 1 to 4, characterized in that before the shadow drawing path corresponding to the target control is determined outside the contour range corresponding to the target control according to the contour data, the The method also includes:

Acquire shadow effect parameters, where the shadow effect parameters at least include any one of shadow color, shadow blur radius, shadow offset parameters, and shadow fillet parameters;

According to the outline data, determining the shadow drawing path corresponding to the target control outside the outline range corresponding to the target control includes:

According to the outline data and the shadow effect parameters, a shadow drawing path corresponding to the target control is determined outside the outline range corresponding to the target control.
The method according to claim 5, wherein drawing the shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path comprises:

According to the shadow effect parameter, determine the blur processing mode of the blur mask filter, and the blur processing mode refers to the mode in which the blur mask filter realizes a blur effect;

According to the shadow drawing path, the shadow image corresponding to the target control is drawn through the blur processing mode of the blur mask filter.
The method according to claim 5, wherein before drawing the shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path, the method further comprises:

Obtain a target rendering pipeline corresponding to the GUI;

The step of drawing a shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path includes:

In the case that the target rendering pipeline is a non-pure hardware rendering pipeline, according to the shadow drawing path, a shadow image corresponding to the target control is drawn through a blur mask filter.
The method according to claim 7, wherein after said acquiring the target rendering pipeline corresponding to said GUI, said method further comprises:

When the target rendering pipeline is a pure hardware rendering pipeline, perform compatible processing operations according to the shadow effect parameters, and draw a shadow image corresponding to the target control through a brush object;

Wherein, the compatible processing operations include:

Adjust the attribute parameters of the brush object according to the shadow effect parameters, the attribute parameters are used to define the drawing effect of the brush object;

Or, determine a shadow drawing range in which the brush object draws the shadow image according to the shadow effect parameter.
The method according to any one of claims 1 to 4, characterized in that, after drawing the shadow image corresponding to the target control through the blur mask filter according to the shadow drawing path, the method further includes :

Draw a background image matching the shadow image according to the outline data, and draw a foreground image matching the shadow image within the outline range corresponding to the target control.
The method according to claim 9, wherein said drawing a background image matching said shadow image according to said outline data comprises:

Get the background image resource;

Preprocessing the background image resource according to the outline data to obtain a processed image resource matching the outline range corresponding to the target control;

According to the image type of the processed image resource, a background image matching the shadow image is drawn through a brush object.
A shadow generating device is characterized by comprising:

an outline acquiring unit, configured to acquire outline data of the target control to be drawn in the graphical user interface;

a path determining unit, configured to determine a shadow drawing path corresponding to the target control outside the range of the contour corresponding to the target control according to the contour data;

The shadow drawing unit is configured to draw a shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path, and the shadow image is used to realize a shadow effect on a view object corresponding to the target control.
The shadow generation device according to claim 11, wherein the contour data includes a contour shape, and the path determination unit is used to determine the contour outside the contour range corresponding to the target control according to the contour data. When drawing the path for the shadow corresponding to the target control, it includes:

The outline shape is used as an inner frame of the shadow image corresponding to the target control, and a shadow drawing path corresponding to the target control is determined outside the inner frame.
The shadow generation device according to claim 12, wherein when the outline acquisition unit is used to acquire the outline data of the target control to be drawn in the GUI, it comprises:

Obtain the shape data corresponding to the target control to be drawn in the GUI through the view outline interface;

If the shape data includes a custom shape, then determine the custom shape as the outline shape of the target control; if the shape data does not include a custom shape, determine a default shape as the outline of the target control shape.
The shadow generating device according to claim 12, wherein the path determination unit determines the inner border of the shadow image corresponding to the target control, and determines the inner border outside the inner border. When drawing the path for the shadow corresponding to the target control, it includes:

Obtain a shadow range parameter, the shadow range parameter is used to define a shadow drawing range, and the shadow drawing range is not limited by the outline range corresponding to the parent control of the target control;

Using the outline shape as the inner border of the shadow image corresponding to the target control, outside the inner border and within the shadow drawing range defined by the shadow range parameter, determine the shadow drawing corresponding to the target control path.
The shadow generation device according to any one of claims 11 to 14, wherein the shadow generation device further comprises:

The first acquiring unit is configured to acquire shadow effect parameters before the path determination unit determines the shadow drawing path corresponding to the target control outside the contour range corresponding to the target control according to the contour data, and the shadow effect The parameters include at least any one of shadow color, shadow blur radius, shadow offset parameter, and shadow fillet parameter;

The path determining unit is further configured to determine a shadow drawing path corresponding to the target control outside the range of the outline corresponding to the target control according to the outline data and the shadow effect parameters.
The shadow generating device according to claim 15, wherein the shadow drawing unit is further configured to determine the blur processing mode of the blur mask filter according to the shadow effect parameters, and the blur processing mode refers to is the mode in which the blur mask filter realizes the blur effect; and, according to the shadow drawing path, the shadow image corresponding to the target control is drawn through the blur processing mode of the blur mask filter.
The shadow generation device according to claim 15, wherein the shadow generation device further comprises:

The second acquiring unit is configured to acquire the target rendering pipeline corresponding to the GUI before the shadow drawing unit draws the shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path;

The shadow drawing unit is further configured to draw a shadow image corresponding to the target control through a blur mask filter according to the shadow drawing path when the target rendering pipeline is not a pure hardware rendering pipeline.
The shadow generation device according to claim 17, wherein the shadow generation device further comprises:

A compatibility unit, configured to perform a compatible processing operation according to the shadow effect parameter if the target rendering pipeline is a pure hardware rendering pipeline after the second acquiring unit acquires the target rendering pipeline corresponding to the GUI , and draw the shadow image corresponding to the target control through the brush object;

Wherein, the compatible processing operations include:

Adjust the attribute parameters of the brush object according to the shadow effect parameters, the attribute parameters are used to define the drawing effect of the brush object;

Or, determine a shadow drawing range in which the brush object draws the shadow image according to the shadow effect parameter.
The shadow generation device according to any one of claims 11 to 14, wherein the shadow generation device further comprises:

A foreground and background drawing unit, configured to draw a shadow image matching the shadow image according to the outline data after the shadow drawing unit draws the shadow image corresponding to the target control through the blur mask filter according to the shadow drawing path. and draw a foreground image matching the shadow image within the outline range corresponding to the target control.
The shadow generation device according to claim 19, wherein when the foreground and background drawing unit is used to draw a background image matching the shadow image according to the outline data, it includes:

Get the background image resource;

Preprocessing the background image resource according to the outline data to obtain a processed image resource matching the outline range corresponding to the target control;

According to the image type of the processed image resource, a background image matching the shadow image is drawn through a brush object.
An electronic device, characterized by comprising a memory and a processor, wherein a computer program is stored in the memory, and when the computer program is executed by the processor, the processor realizes any one of claims 1 to 10. The shadow generation method described in Item .
A computer-readable storage medium on which a computer program is stored, wherein the computer program implements the shadow generation method according to any one of claims 1 to 10 when executed by a processor.