Component display method, device, electronic device and storage medium

Abstract

The present disclosure relates to a component display method, device, electronic device and storage medium, which are applied to electronic devices, including: displaying an image to be operated on an image operation page, displaying a target panel in a component display area of ​​the image operation page, and if an obscured area is detected in the image to be operated, and the obscured area is located in the lower layer of the component display area, displaying the target panel in the component display area based on the image feature information of the obscured area and / or the image to be operated. Unlike the prior art, the target panel of the embodiment of the present application is not always a single color, but can realize adaptive changes in the display of the target panel based on the image feature information of the obscured area and / or the image to be operated, so as to pave the way for subsequent users to better distinguish between the image and the target panel, which is simple and convenient, and improves the user experience.

Description

Technical Field

[0001] The present disclosure relates to the field of Internet technology, and in particular to a component display method, device, electronic device and storage medium. Background Art

[0002] Design trends continue to change. After the popularity of flat design has gradually weakened in recent years, the trend of simulated design has once again returned to the design circle. New mockup has re-innovated the old mockup style and has become popular again.

[0003] At present, the operation panel area of ​​known image editors is filled with a single color, such as white or black. This may cause problems in the following scenarios: if the color of the image input to the image editor is the same as the color of the operation panel area, then when the user operates the image, because the hierarchical relationship between the image and the operation surface in the overall interface is not obvious, this may cause the user to be unable to distinguish where the dividing line between the enlarged image and the operation panel is, thereby affecting the user's operation of the image and reducing the user experience. Summary of the invention

[0004] The present disclosure provides a component display method, device, electronic device and storage medium. The technical solution of the present disclosure is as follows:

[0005] According to a first aspect of an embodiment of the present disclosure, a component display method is provided, which is applied to an electronic device, including:

[0006] The image to be operated is displayed on the image operation page;

[0007] Display the target panel in the component display area of ​​the image operation page;

[0008] If it is detected that there is an obstructed area in the image to be operated, and the obstructed area is located in the lower layer of the component display area, the target panel is displayed in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

[0009] In some possible embodiments, if it is detected that there is an obstructed area in the image to be operated, and the obstructed area is located in the lower layer of the component display area, displaying the target panel in the component display area based on the image feature information of the obstructed area and / or the image to be operated includes:

[0010] In response to a preset operation instruction on the image to be operated, performing a preset operation on the image to be operated; the preset operation includes but is not limited to one or more of moving, enlarging and flipping;

[0011] If it is detected that there is an obstructed area in the image to be operated after the preset operation, and the obstructed area is located in the lower layer of the component display area, the target panel is displayed in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

[0012] In some possible embodiments, the image feature information of the blocked area and / or the image to be operated includes hue, brightness and / or saturation, and displaying the target panel in the component display area based on the image feature information of the blocked area and / or the image to be operated includes:

[0013] Determine characteristic information of the target panel based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated;

[0014] The target panel is displayed in the component display area based on the characteristic information of the target panel.

[0015] In some possible embodiments, the characteristic information of the target panel includes color, transparency and / or blur level, and displaying the target panel in the component display area based on the characteristic information of the target panel includes:

[0016] The target panel is displayed in the component display area with a frosted glass effect based on the color, transparency and / or blur level of the target panel.

[0017] In some possible embodiments, determining the characteristic information of the target panel based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated includes:

[0018] Determine a target image feature level from N image feature levels based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated;

[0019] Determine a target panel feature level corresponding to a target image feature level from the N panel feature levels;

[0020] Obtaining feature information of a target panel from a target panel feature level;

[0021] Wherein, N is an integer greater than or equal to 2, and the values ​​of hue, brightness and / or saturation in each of the N image feature levels are respectively within different N preset ranges.

[0022] In some possible embodiments, displaying the target panel in the component display area based on the characteristic information of the target panel includes:

[0023] Obtain resource information of the electronic device;

[0024] The target panel is displayed in the component display area based on the characteristic information and resource information of the target panel.

[0025] In some possible embodiments, the target panel is an operation panel including an operation subcomponent.

[0026] In some possible embodiments, the method further includes:

[0027] Displaying a target toolbar in a sub-display area in the component display area;

[0028] Displaying the target panel in the component display area based on the image feature information of the blocked area and / or the image to be operated includes:

[0029] Based on the image feature information of the blocked area and / or the image to be operated, a target panel is displayed in the component display area, and a target toolbar is displayed in the sub-display area;

[0030] The target toolbar is the toolbar that contains the tool component.

[0031] According to a second aspect of an embodiment of the present disclosure, there is provided a component display device, including:

[0032] A first display module is configured to display the image to be operated on the image operation page;

[0033] A second display module is configured to display a target panel in a component display area of ​​the image operation page;

[0034] The third display module is configured to execute, if it is detected that there is an obstructed area in the image to be operated, and the obstructed area is located in the lower layer of the component display area, display the target panel in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

[0035] In some possible embodiments, the third display module includes:

[0036] The operation module is configured to execute a preset operation on the image to be operated in response to a preset operation instruction on the image to be operated; the preset operation includes but is not limited to one or more of moving, enlarging and flipping; the display submodule is configured to execute if it is detected that there is an obscured area in the image to be operated after the preset operation, and the obscured area is located in the lower layer of the component display area, and the target panel is displayed in the component display area based on the image feature information of the obscured area and / or the image to be operated.

[0037] In some possible embodiments, the image feature information of the blocked area and / or the image to be operated includes hue, brightness and / or saturation, and the third display module includes:

[0038] An information determination module is configured to determine characteristic information of a target panel based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated;

[0039] The display submodule is configured to display the target panel in the component display area based on the characteristic information of the target panel.

[0040] In some possible embodiments, the characteristic information of the target panel includes color, transparency and / or blur level, and the display submodule is configured to execute:

[0041] The target panel is displayed in the component display area with a frosted glass effect based on the color, transparency and / or blur level of the target panel.

[0042] In some possible embodiments, the information determination module is configured to execute:

[0043] Determine a target image feature level from N image feature levels based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated;

[0044] Determine a target panel feature level corresponding to a target image feature level from the N panel feature levels;

[0045] Obtaining feature information of a target panel from a target panel feature level;

[0046] Wherein, N is an integer greater than or equal to 2, and the values ​​of hue, brightness and / or saturation in each of the N image feature levels are respectively within different N preset ranges.

[0047] In some possible embodiments, the display submodule is configured to execute:

[0048] Obtain resource information of the electronic device;

[0049] The target panel is displayed in the component display area based on the characteristic information and resource information of the target panel.

[0050] In some possible embodiments, the target panel is an operation panel including an operation subcomponent.

[0051] In some possible embodiments, the device further includes:

[0052] A fourth display module is configured to execute displaying a target toolbar in a sub-display area in the component display area;

[0053] The third display module is configured to execute:

[0054] Based on the image feature information of the blocked area and / or the image to be operated, a target panel is displayed in the component display area, and a target toolbar is displayed in the sub-display area;

[0055] The target toolbar is the toolbar that contains the tool component.

[0056] According to a third aspect of an embodiment of the present disclosure, there is provided an electronic device, comprising: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to execute instructions to implement a method as described in any one of the first aspects above.

[0057] According to a fourth aspect of an embodiment of the present disclosure, a computer-readable storage medium is provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute any one of the methods in the first aspect of the embodiment of the present disclosure.

[0058] According to the fifth aspect of an embodiment of the present disclosure, a computer program product is provided, the computer program product comprising a computer program, the computer program being stored in a readable storage medium, at least one processor of a computer device reading and executing the computer program from the readable storage medium, so that the computer device performs any one of the methods in the first aspect of the embodiment of the present disclosure.

[0059] The technical solution provided by the embodiments of the present disclosure brings at least the following beneficial effects:

[0060] The image to be operated is displayed on the image operation page, and the target panel is displayed in the component display area of ​​the image operation page. If it is detected that there is an obscured area in the image to be operated, and the obscured area is located in the lower layer of the component display area, the target panel is displayed in the component display area based on the image feature information of the obscured area and / or the image to be operated. Unlike the prior art, the target panel is not always a single color, but the display of the target panel can be adaptively changed based on the image feature information of the obscured area and / or the image to be operated, so as to pave the way for subsequent users to better distinguish between the image and the target panel, which is simple and convenient, and improves the user experience.

[0061] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0062] The drawings herein are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the description are used to explain the principles of the present disclosure, and do not constitute improper limitations on the present disclosure.

[0063] Figure 1 is a schematic diagram of an application environment according to an exemplary embodiment;

[0064] Figure 2 is a flow chart of a component display method according to an exemplary embodiment;

[0065] Figure 3 is a flow chart of a component display method according to an exemplary embodiment;

[0066] Figure 4 is a schematic diagram of an image operation page according to an exemplary embodiment;

[0067] Figure 5 is a schematic diagram of an image operation page according to an exemplary embodiment;

[0068] Figure 6 is a schematic diagram showing a comparison of various components according to an exemplary embodiment;

[0069] Figure 7 is a schematic diagram showing a comparison of various components according to an exemplary embodiment;

[0070] Figure 8 is a block diagram of a component display device according to an exemplary embodiment;

[0071] Fig. 9 It is a block diagram of an electronic device for component display according to an exemplary embodiment. DETAILED DESCRIPTION

[0072] In order to enable ordinary persons in the art to better understand the technical solutions of the present disclosure, the technical solutions in the embodiments of the present disclosure will be clearly and completely described below in conjunction with the accompanying drawings.

[0073] It should be noted that the terms "first", "second", etc. in the specification and claims of the present disclosure and the above-mentioned drawings are used to distinguish similar first objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchanged where appropriate, so that the embodiments of the present disclosure described herein can be implemented in an order other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with the present disclosure. Instead, they are merely examples of devices and methods consistent with some aspects of the present disclosure as detailed in the appended claims.

[0074] See also Figure 1 , Figure 1 is a schematic diagram showing an application environment of a component display method according to an exemplary embodiment. Figure 1 As shown, the application environment may include an electronic device displaying an image to be operated 101 and a target panel 102 , and the electronic device may display an image operation page 10 , as well as the image to be operated 101 and the target panel 102 displayed on the image operation page 10 .

[0075] In an optional embodiment, the electronic device can display the image to be operated on the image operation page, and display the target panel in the component display area of ​​the image operation page. If it is detected that there is an obscured area in the image to be operated, and the obscured area is located in the lower layer of the component display area, the target panel is displayed in the component display area based on the image feature information of the obscured area and / or the image to be operated. Among them, the electronic device can include but is not limited to smart phones, desktop computers, tablet computers, laptops, smart speakers, digital assistants, augmented reality (AR) / virtual reality (VR) devices, smart wearable devices and other types of electronic devices. It can also be software running on the electronic device, such as applications, applets, etc. Optionally, the operating system running on the electronic device can include but is not limited to Android system, IOS system, linux, windows, Unix, etc.

[0076] In addition, it should be noted that Figure 1 What is shown is only one application environment of the object playback method provided by the present disclosure. In actual applications, other application environments may also be included. For example, in actual applications, a server may exist. Among them, the image to be operated displayed by the electronic device may be obtained from the server, and when the image editing application of the electronic device is started, the server may send the image to be operated to the electronic device. Optionally, the server may include an independent physical server, or a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communications, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0077] In some optional embodiments, the electronic device and the server may be connected via a wired link or a wireless link.

[0078] Figure 2 is a flowchart of a component display method according to an exemplary embodiment. Figure 2 As shown, the component display method can be applied to electronic devices and other node devices, and includes the following steps:

[0079] In step S201, an image to be operated is displayed on an image operation page.

[0080] In the embodiment of the present application, the electronic device may be loaded with an image editing application, a video editing application, or other application that can operate and process an image or a frame image in a video. Taking the image editing application as an example, when the electronic device starts the image editing application, an image operation page may be displayed. The image operation page may include an image import component.

[0081] In some possible embodiments, when the user touches the image import component, the electronic device can detect the image import instruction triggered by the image import component, and optionally, the electronic device can jump to the image library. Subsequently, when the user touches an image, the electronic device can detect a confirmation instruction for the image, and the electronic device can import the image into the image editing application and display it on the image operation page.

[0082] In step S203, the target panel is displayed in the component display area of ​​the image operation page.

[0083] In the present application embodiment, Figure 1 As shown, the target panel can be a built-in image editing application. The component display area 102 can be set at the bottom of the image operation page. Optionally, the component display area 102 can also be set at the top, left or right of the image operation page. The actual position to be set can be determined according to the user's usage habits.

[0084] Optionally, the component display area is not fixed, but can be adjusted based on the user's usage habits. Optionally, the image operation page can also include a region adjustment component, and when the electronic device detects a region adjustment instruction triggered by the region adjustment component, the component display area can be adjusted according to the adjustment track corresponding to the region adjustment instruction.

[0085] In some possible embodiments, the target panel and the image to be operated in the embodiment of the present application can be as follows: Figure 1 As shown, in the initial stage of importing the image to be operated into the image operation page, there is no overlapping part. Alternatively, in the initial stage of importing the image to be operated into the image operation page, the image to be operated can cover the entire image operation page, so the component display area can be located on the upper layer of the image to be operated. In order to clearly and comprehensively convey this application, the example of no overlapping part between the target panel and the image to be operated will be used for explanation.

[0086] In some possible embodiments, the target panel can be any component, such as a dialog box, a picture, a table, a button, or an operation panel containing operation subcomponents for modifying an image, wherein the operation subcomponents may include beauty recipes, intelligent optimization, editing, color adjustment, filters, and beauty removal subcomponents.

[0087] In this way, the types of target panels can be enriched to prepare for implementing various possible operations on the image to be operated.

[0088] In step S205, if it is detected that there is an obstructed area in the image to be operated, and the obstructed area is located in the lower layer of the component display area, the target panel is displayed in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

[0089] In the embodiment of the present application, optionally, when the electronic device detects that there is an obscured area in the image to be operated, and the obscured area is located in the lower layer of the component display area, the target panel can be displayed in the component display area based on the image feature information of the obscured area. In other words, if there is a part of the image to be operated that is obscured below the component display area, this part can be called the obscured part. Subsequently, the electronic device can display the target panel in the component display area according to the feature information of the obscured area.

[0090] In another optional embodiment, when the electronic device detects that there is an obstructed area in the image to be operated, and the obstructed area is located in the lower layer of the component display area, the target panel can be displayed in the component display area based on the entire image feature information of the image to be operated.

[0091] In another optional embodiment, when the electronic device detects that there is an occluded area in the image to be operated, and the occluded area is located in the lower layer of the component display area, the target panel can be displayed in the component display area based on a comprehensive consideration of the image feature information of the occluded area and the image feature information of the image to be operated.

[0092] The following will take the example of displaying the target panel in the component display area based on the image feature information of the blocked area to specifically explain how the electronic device displays the target panel in the component display area. The other two methods mentioned above can be implemented with reference to this method.

[0093] In the prior art, the target panel is always a single color. If the color of the imported image to be operated is the same as that of the target panel, when the user operates the image, the hierarchical relationship between the image and the operation surface in the overall interface is not obvious, which may cause the user to be unable to distinguish where the dividing line between the enlarged image and the operation panel is, thereby affecting the user's operation of the image and reducing the user experience. The embodiment of the present application can realize adaptive changes to the display of the target panel based on the image feature information of the blocked area, paving the way for subsequent users to better distinguish between the image and the target panel, which is simple and convenient, and improves the user experience.

[0094] As mentioned above, the present application embodiment will be described by taking the example that the target panel and the image to be operated have no overlapping parts. Therefore, when the user does not operate the image, it is inevitable that part of the image to be operated will not be under the component display area where the target panel is located.

[0095] Based on this, Figure 3 is a flowchart of a component display method according to an exemplary embodiment. Figure 3 As shown, the above step S205 can be updated to the following steps:

[0096] In step S2051, in response to a preset operation instruction for the image to be operated, a preset operation is performed on the image to be operated; the preset operation includes but is not limited to one or more of moving, enlarging and flipping.

[0097] Optionally, the preset operation instruction may include a set of one or more sub-instructions for performing preset operations such as moving, enlarging, flipping, etc. on the image to be operated.

[0098] In the embodiment of the present application, in response to a preset operation instruction such as moving, enlarging and / or flipping the image to be operated, the image to be operated can be moved, enlarged and / or flipped accordingly.

[0099] In step S2053, if it is detected that there is an obstructed area in the image to be operated after the preset operation, and the obstructed area is located in the lower layer of the component display area, the electronic device can display the target panel in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

[0100] In some possible embodiments, taking movement as an example, after the image to be operated is moved, the following may be obtained: Figure 4 As shown in the figure, Figure 4 It is a schematic diagram of an image operation page according to an exemplary embodiment, comprising an image operation page 10 and an image 101 to be operated whose body part is blocked by a component display area 102 .

[0101] When the electronic device detects that there is an obstructed area in the image to be operated after a preset operation (movement operation), and the obstructed area is located in the lower layer of the component display area, the target panel can be displayed in the component display area based on the image feature information of the obstructed area (body part).

[0102] In some possible embodiments, since the styles of images are ever-changing, pictures of different hues (H), saturations (S), and brightness (B) will affect the recognition of the overall operation panel. In order to provide users with the best user experience, it is proposed to adaptively change the display of the target panel based on the image feature information of the occluded area and / or the image to be operated.

[0103] Optionally, the electronic device may first determine the image feature information of the occluded area and / or the image to be operated. Optionally, the image feature information of the occluded area and / or the image to be operated may include the hue of the occluded area and / or the image to be operated, the brightness of the occluded area and / or the image to be operated, and / or the saturation of the occluded area and / or the image to be operated. In this way, the above-mentioned step S2053 of displaying the target panel in the component display area based on the image feature information of the occluded area and / or the image to be operated can be expanded to: the electronic device can determine the feature information of the target panel based on the hue of the occluded area and / or the image to be operated, the brightness of the occluded area and / or the image to be operated, and / or the saturation of the occluded area and / or the image to be operated, and display the target panel in the component display area based on the feature information of the target panel.

[0104] In this way, through the embodiments of the present disclosure, it can be achieved that in the process of performing preset operations on different images, the target panel (operation panel) can generate different adaptation effects according to different pictures.

[0105] In an embodiment of the present application, the characteristic information of the target panel includes color, transparency and / or blurriness. The electronic device can display the target panel with a frosted glass effect in the component display area based on the color, transparency and / or blurriness of the target panel.

[0106] In other words, the characteristic information of the target panel can be the same or multiple in color, transparency and blur degree. In order to give users a richer and more exciting visual experience, and at the same time enable users to visually see the obscured area of ​​the image to be operated through the upper component display area, the electronic device can display the target panel with a frosted glass effect.

[0107] In an embodiment of the present application, in order to cover as many different models currently available on the market as possible, different adaptive solutions are proposed for different models and versions. In an embodiment of the present application, the electronic device can obtain the electronic device's own resource information and display the target panel in the component display area based on the feature information and resource information of the target panel.

[0108] Optionally, the resource information includes system information of the electronic device, such as Windows system, Android system, IOS system, and may also include version information of the system in the electronic device, such as IOS 10 version, IOS 11 version, etc. In this way, the present application can cover different models currently available on the market, so that more users can enjoy the convenience of the present application.

[0109] Figure 5It is a schematic diagram of an image operation page according to an exemplary embodiment, including an image operation page 10, an image to be operated 101 displayed on the image operation page 10, and a target panel 102 displayed in a component display area, and further includes a target toolbar 103 displayed in a sub-display area in the component display area.

[0110] Optionally, the content in step S205 that the target panel is displayed in the component display area based on the image feature information of the blocked area and / or the image to be operated can be considered as: the electronic device can display the target panel in the component display area based on the image feature information of the blocked area and / or the image to be operated, and display the target toolbar in the sub-display area. Among them, the target toolbar can be a toolbar containing tool components, of course, it can also be other forms of components. The specific components are determined by the technicians and will not be repeated here.

[0111] Optionally, the tool component may include subcomponents such as skin, portrait, filter, and text editing.

[0112] Specifically, the electronic device can determine the characteristic information of the target panel and the characteristic information of the target toolbar based on the image characteristic information of the obscured area and / or the image to be operated, and display the target panel with a frosted glass effect in the component display area based on the characteristic information of the target panel, and display the target toolbar with a frosted glass effect in the sub-display area based on the characteristic information of the target toolbar.

[0113] It can be seen from the above embodiments that the embodiments of the present application can superimpose other areas on the component display area and display the corresponding components with a frosted glass effect, so that the hierarchical relationship between the image to be operated, the operation panel, and the toolbar is clearly displayed, thereby improving the sense of hierarchy.

[0114] In some possible embodiments, the electronic device may be pre-set with N image feature levels, wherein the values ​​of hue, brightness and / or saturation in each of the N image feature levels are respectively within different N preset ranges. The following takes the image feature information including brightness as an example. Assuming N=4, the electronic device may be pre-set with 4 image feature levels, a first level, a second level, a third level and a fourth level. Optionally, the brightness in the first level is less than 30, the brightness in the second level is greater than or equal to 30 and less than or equal to 70, the brightness in the third level is greater than 70 and less than or equal to 95, and the brightness in the fourth level is greater than 95.

[0115] In the embodiment of the present application, assuming that the brightness of the currently blocked area is less than 30, the first level can be determined as the target image feature level from the above four image feature levels. Optionally, the image feature level and the panel feature level can be in a one-to-one correspondence.

[0116] When the electronic device determines the target image feature level, it can determine a target panel feature level from the N panel feature levels according to a one-to-one correspondence, and obtain feature information of the target panel from the target panel feature level, such as color, transparency and / or blur.

[0117] The following two embodiments respectively illustrate how the electronic device displays the target panel in the component display area and displays the target toolbar in the sub-display area based on the image feature information of the blocked area:

[0118] Figure 6 is a schematic diagram showing a comparison of various components according to an exemplary embodiment, combined with Figure 6 The image feature information of the brightness of the blocked area sets the feature parameters of the target panel (operation panel) and the target toolbar (toolbar) on the IOS system:

[0119] (a): Brightness is less than 30;

[0120] Target Panel:

[0121] color = 151517;

[0122] Transparency = 40%;

[0123] Blur = 10;

[0124] Target Toolbar:

[0125] color = FFFFF;

[0126] Transparency = 5%.

[0127] (b): Brightness is greater than or equal to 30 and less than or equal to 70;

[0128] Target Panel:

[0129] color = 151517;

[0130] Transparency = 60%;

[0131] Blur = 10;

[0132] Target Toolbar:

[0133] color = FFFFF;

[0134] Transparency = 5%.

[0135] (c): Brightness greater than 70 and less than or equal to 95;

[0136] Target Panel:

[0137] color = 151517;

[0138] Transparency = 80%;

[0139] Blur = 10;

[0140] Target Toolbar:

[0141] color = FFFFF;

[0142] Transparency = 5%.

[0143] (d): Brightness greater than 95;

[0144] Target Panel:

[0145] color = 151517;

[0146] Transparency = 80%;

[0147] Blur = 10;

[0148] Target Toolbar:

[0149] color = FFFFF;

[0150] Transparency = 5%.

[0151] Since the Gaussian blur effect cannot be restored on all Android models and the development cost is high, Figure 7 is a schematic diagram showing a comparison of various components according to an exemplary embodiment, which can be combined with Figure 7 The setting of characteristic parameters of the target panel (operation panel) and target toolbar (toolbar) on the Android system based on the brightness of the blocked area:

[0152] (a): Brightness is less than 30;

[0153] Target Panel:

[0154] color = 151517;

[0155] Transparency = 80%;

[0156] Target Toolbar:

[0157] color = FFFFF;

[0158] Transparency = 5%.

[0159] (b): Brightness is greater than or equal to 30 and less than or equal to 70;

[0160] Target Panel:

[0161] color = 151517;

[0162] Transparency = 90%;

[0163] Target Toolbar:

[0164] color = FFFFF;

[0165] Transparency = 5%.

[0166] (c): Brightness greater than 70 and less than or equal to 95;

[0167] Target Panel:

[0168] color = 151517;

[0169] Transparency = 90%;

[0170] Target Toolbar:

[0171] color = FFFFF;

[0172] Transparency = 5%.

[0173] (d): Brightness greater than 95;

[0174] Target Panel:

[0175] color = 151517;

[0176] Transparency = 90%;

[0177] Target Toolbar:

[0178] color = FFFFF;

[0179] Transparency = 5%.

[0180] It can be seen from the above two examples that based on the system information of different electronic devices, the embodiments of the present application can determine the characteristic information of the displayed target panel and the characteristic information of the target toolbar based on the image feature information of different occluded areas (only brightness is illustrated here), thereby achieving display adaptation.

[0181] In summary, the embodiments of the present application can make the target panel (operation panel) have a transparent frosted glass effect, increase the sense of hierarchy of the interface, highlight the upper and lower hierarchical relationships of different components (pictures, target panel and target toolbar), and at the same time, restore the real glass texture through delicate processing of the edges, so that the visual beauty of the frosted glass texture can be brought to the extreme while ensuring the usability and readability of the operation panel.

[0182] Figure 8 is a block diagram of a component display device according to an exemplary embodiment. Figure 8 The device includes a first display module 801, a second display module 802 and a third display module 803.

[0183] The first display module 801 is configured to display the image to be operated on the image operation page;

[0184] The second display module 802 is configured to display a target panel in the component display area of ​​the image operation page;

[0185] The third display module 803 is configured to execute, if it is detected that there is an obstructed area in the image to be operated, and the obstructed area is located in the lower layer of the component display area, display the target panel in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

[0186] In some possible embodiments, the third display module includes:

[0187] The operation module is configured to execute a preset operation on the image to be operated in response to a preset operation instruction on the image to be operated; the preset operation includes but is not limited to one or more of moving, enlarging and flipping; the display submodule is configured to execute if it is detected that there is an obscured area in the image to be operated after the preset operation, and the obscured area is located in the lower layer of the component display area, and the target panel is displayed in the component display area based on the image feature information of the obscured area and / or the image to be operated.

[0188] In some possible embodiments, the image feature information of the blocked area and / or the image to be operated includes hue, brightness and / or saturation, and the third display module includes:

[0189] An information determination module is configured to determine characteristic information of a target panel based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated;

[0190] The display submodule is configured to display the target panel in the component display area based on the characteristic information of the target panel.

[0191] In some possible embodiments, the characteristic information of the target panel includes color, transparency and / or blur level, and the display submodule is configured to execute:

[0192] The target panel is displayed in the component display area with a frosted glass effect based on the color, transparency and / or blur level of the target panel.

[0193] In some possible embodiments, the information determination module is configured to execute:

[0194] Determine a target image feature level from N image feature levels based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated;

[0195] Determine a target panel feature level corresponding to a target image feature level from the N panel feature levels;

[0196] Obtaining feature information of a target panel from a target panel feature level;

[0197] Wherein, N is an integer greater than or equal to 2, and the values ​​of hue, brightness and / or saturation in each of the N image feature levels are respectively within different N preset ranges.

[0198] In some possible embodiments, the display submodule is configured to execute:

[0199] Obtain resource information of the electronic device;

[0200] The target panel is displayed in the component display area based on the characteristic information and resource information of the target panel.

[0201] In some possible embodiments, the target panel is an operation panel including an operation subcomponent.

[0202] In some possible embodiments, the device further includes:

[0203] A fourth display module is configured to execute displaying a target toolbar in a sub-display area in the component display area;

[0204] The third display module is configured to execute:

[0205] Based on the image feature information of the blocked area and / or the image to be operated, a target panel is displayed in the component display area, and a target toolbar is displayed in the sub-display area;

[0206] The target toolbar is the toolbar that contains the tool component.

[0207] Regarding the device in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated here.

[0208] Fig. 9 It is a block diagram of an electronic device 900 for component display according to an exemplary embodiment.

[0209] The electronic device may be a server or a terminal device, and its internal structure diagram may be as follows: Fig. 9 As shown. The electronic device includes a processor, a memory and a network interface connected through a system bus. Among them, the processor of the electronic device is used to provide computing and control capabilities. The memory of the electronic device includes a non-volatile storage medium and an internal memory. The non-volatile storage medium stores an operating system and a computer program. The internal memory provides an environment for the operation of the operating system and the computer program in the non-volatile storage medium. The network interface of the electronic device is used to communicate with an external terminal through a network connection. When the computer program is executed by the processor, a component display method is implemented.

[0210] Those skilled in the art will understand that Fig. 9 The structure shown in the figure is merely a block diagram of a partial structure related to the scheme of the present disclosure, and does not constitute a limitation on the electronic device to which the scheme of the present disclosure is applied. The specific electronic device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0211] In an exemplary embodiment, an electronic device is also provided, including: a processor; and a memory for storing instructions executable by the processor; wherein the processor is configured to execute the instructions to implement the component display method in the embodiment of the present disclosure.

[0212] In an exemplary embodiment, a computer-readable storage medium is further provided. When instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the component display method in the embodiment of the present disclosure.

[0213] In an exemplary embodiment, a computer program product is also provided, which includes a computer program stored in a readable storage medium. At least one processor of a computer device reads and executes the computer program from the readable storage medium, so that the computer device executes the component display method of the embodiment of the present disclosure.

[0214] Those skilled in the art can understand that all or part of the processes in the above-mentioned embodiment methods can be completed by instructing the relevant hardware through a computer program, and the computer program can be stored in a non-volatile computer-readable storage medium. When the computer program is executed, it can include the processes of the embodiments of the above-mentioned methods. Among them, any reference to memory, storage, database or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM) or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. As an illustration and not limitation, RAM is available in many forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), double data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link (Synchlink) DRAM (SLDRAM), memory bus (Rambus) direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM).

[0215] Those skilled in the art will readily appreciate other embodiments of the present disclosure after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art that are not disclosed in the present disclosure. The specification and examples are intended to be exemplary only, and the true scope and spirit of the present disclosure are indicated by the following claims.

[0216] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims

1. A component display method, characterized in that: Image editors used in electronic devices, including: The image to be operated is displayed on the image operation page; Displaying a target panel in the component display area of ​​the image operation page; the target panel and the image to be operated do not overlap; If it is detected that there is an obstructed area in the image to be operated after the preset operation, and the obstructed area is located in the lower layer of the component display area, the target panel is displayed in the component display area based on the image feature information of the obstructed area and / or the image to be operated, so that the obstructed area can be displayed through the target panel; The image feature information of the blocked area and / or the image to be operated includes hue, brightness and / or saturation, and displaying the target panel in the component display area based on the image feature information of the blocked area and / or the image to be operated includes: Determining characteristic information of the target panel based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated; the characteristic information of the target panel includes color, transparency and / or blur degree; The target panel is displayed in the component display area with a frosted glass effect based on the color, transparency and / or blur level of the target panel.

2. The component display method according to claim 1, characterized in that: If it is detected that there is an obstructed area in the image to be operated, and the obstructed area is located in a lower layer of the component display area, displaying the target panel in the component display area based on the image feature information of the obstructed area and / or the image to be operated includes: In response to a preset operation instruction for the image to be operated, performing a preset operation on the image to be operated; the preset operation includes but is not limited to one or more of moving, enlarging and flipping; If it is detected that there is an obstructed area in the image to be operated after the preset operation, and the obstructed area is located in the lower layer of the component display area, the target panel is displayed in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

3. The component display method according to claim 1, characterized in that: The determining of the characteristic information of the target panel based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated includes: Determine a target image feature level from N image feature levels based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated; Determine a target panel feature level corresponding to the target image feature level from the N panel feature levels; Acquire feature information of the target panel from the target panel feature level; Wherein, N is an integer greater than or equal to 2, and the values ​​of hue, brightness and / or saturation in each of the N image feature levels are respectively within different N preset ranges.

4. The component display method according to claim 1, characterized in that: The displaying the target panel in the component display area based on the characteristic information of the target panel comprises: Acquiring resource information of the electronic device; The target panel is displayed in the component display area based on the characteristic information of the target panel and the resource information.

5. The component display method according to any one of claims 1 to 4, characterized in that: The target panel is an operation panel including an operation subcomponent.

6. The component display method according to claim 1, characterized in that: The method further comprises: Displaying a target toolbar in a sub-display area in the component display area; The displaying of the target panel in the component display area based on the image feature information of the blocked area and / or the image to be operated comprises: Displaying the target panel in the component display area and displaying the target toolbar in the sub-display area based on the image feature information of the blocked area and / or the image to be operated; The target toolbar is a toolbar containing tool components.

7. A component display device, characterized in that: Image editors used in electronic devices, including: A first display module is configured to display the image to be operated on the image operation page; A second display module is configured to display a target panel in the component display area of ​​the image operation page; the target panel and the image to be operated do not overlap; A third display module is configured to execute, if it is detected that there is an obstructed area in the image to be operated after a preset operation, and the obstructed area is located in a lower layer of the component display area, displaying the target panel in the component display area based on the image feature information of the obstructed area and / or the image to be operated, so that the obstructed area can be displayed through the target panel; The image feature information of the obscured area and / or the image to be operated includes hue, brightness and / or saturation. The third display module is configured to determine the feature information of the target panel based on the hue, brightness and / or saturation of the obscured area and / or the image to be operated; the feature information of the target panel includes color, transparency and / or blur degree; and the target panel is displayed in the component display area with a frosted glass effect based on the color, transparency and / or blur degree of the target panel.

8. The component display device according to claim 7, characterized in that: The third display module comprises: An operation module is configured to execute a preset operation on the image to be operated in response to a preset operation instruction on the image to be operated; the preset operation includes but is not limited to one or more of moving, enlarging and flipping; a display submodule is configured to execute if it is detected that there is an obstructed area in the image to be operated after the preset operation, and the obstructed area is located in the lower layer of the component display area, and the target panel is displayed in the component display area based on the image feature information of the obstructed area and / or the image to be operated.

9. The component display device according to claim 7, characterized in that: The information determination module is configured to execute: Determine a target image feature level from N image feature levels based on the hue, brightness and / or saturation of the blocked area and / or the image to be operated; Determine a target panel feature level corresponding to the target image feature level from the N panel feature levels; Acquire feature information of the target panel from the target panel feature level; Wherein, N is an integer greater than or equal to 2, and the values ​​of hue, brightness and / or saturation in each of the N image feature levels are respectively within different N preset ranges.

10. The component display device according to claim 7, characterized in that: The display submodule is configured to execute: Acquiring resource information of the electronic device; The target panel is displayed in the component display area based on the characteristic information of the target panel and the resource information.

11. The component display device according to any one of claims 7 to 10, characterized in that: The target panel is an operation panel including an operation subcomponent.

12. The component display device according to claim 7, characterized in that: The device also includes: A fourth display module is configured to execute displaying a target toolbar in a sub-display area in the component display area; The third display module is configured to execute: Displaying the target panel in the component display area and displaying the target toolbar in the sub-display area based on the image feature information of the blocked area and / or the image to be operated; The target toolbar is a toolbar containing tool components.

13. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the component display method according to any one of claims 1 to 6.

14. A computer-readable storage medium, characterized in that: When the instructions in the computer-readable storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the component display method according to any one of claims 1 to 6.

15. A computer program product, characterized in that The computer program product comprises a computer program, which is stored in a readable storage medium. At least one processor of a computer device reads and executes the computer program from the readable storage medium, so that the computer device executes the component display method according to any one of claims 1 to 6.

Images