Mask drawing method and device, equipment and storage medium

Abstract

The embodiment of the invention provides a mask drawing method and device, equipment and a storage medium. The method comprises the following steps: acquiring a style file, wherein the style file indicates a group of mask attributes; generating a group of general drawing instructions based on the style file, the group of general drawing instructions being independent of a target platform for drawing the mask; and converting the group of general drawing instructions into a group of platform drawing instructions corresponding to the target platform to draw the target mask element. According to the embodiment of the invention, a group of general drawing instructions can be generated based on the style file, and the group of general drawing instructions are independent of the target platform, so that the consistency of mask effects on different platforms is ensured. Besides, different platforms can be supported to directly multiplex the mask attributes, so that the mask drawing efficiency is improved, and the workload and the cost of multi-terminal adaptation are also reduced.

Description

Technical Field

[0001] Example embodiments of the present disclosure generally relate to the field of computers, and more particularly, to a method, apparatus, device, and computer-readable storage medium for drawing a mask. Background Art

[0002] With the continuous development of mobile application development, achieving complex visual effects has become a key link in improving user experience. Masking technology, as a means of controlling the graphic display area through transparency information, is widely used in image processing, animation effects and user interface design. How to draw a mask is a focus of attention. Summary of the invention

[0003] In a first aspect of the present disclosure, a method for drawing a mask is provided. The method comprises: obtaining a style file, the style file indicating a set of mask attributes; generating a set of general drawing instructions based on the style file, the set of general drawing instructions being independent of a target platform for drawing the mask; and converting the set of general drawing instructions into a set of platform drawing instructions corresponding to the target platform to draw a target mask element.

[0004] In a second aspect of the present disclosure, a device for drawing a mask is provided. The device includes: an acquisition module configured to acquire a style file indicating a set of mask attributes; a generation module configured to generate a set of general drawing instructions based on the style file, the set of general drawing instructions being independent of a target platform for drawing the mask; and a conversion module configured to convert the set of general drawing instructions into a set of platform drawing instructions corresponding to the target platform to draw a target mask element.

[0005] In a third aspect of the present disclosure, an electronic device is provided. The device includes at least one processing unit; and at least one memory, the at least one memory is coupled to the at least one processing unit and stores instructions for execution by the at least one processing unit. When the instructions are executed by the at least one processing unit, the device executes the method of the first aspect.

[0006] In a fourth aspect of the present disclosure, a computer-readable storage medium is provided, wherein a computer program is stored on the computer-readable storage medium, and the computer program can be executed by a processor to implement the method of the first aspect.

[0007] In a fifth aspect of the present disclosure, a computer program product is provided, which includes computer executable instructions, and when the instructions are executed by a processor, the method according to the first aspect of the present disclosure is implemented.

[0008] It should be understood that the contents described in this content section are not intended to limit the key features or important features of the embodiments of the present disclosure, nor are they intended to limit the scope of the present disclosure. Other features of the present disclosure will become easily understood through the following description. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] The above and other features, advantages and aspects of the embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. In the accompanying drawings, the same or similar reference numerals represent the same or similar elements, wherein:

[0010] Figure 1 A schematic diagram showing an example environment in which embodiments of the present disclosure can be implemented;

[0011] Figure 2 A flowchart showing a process of drawing a mask according to some embodiments of the present disclosure is shown;

[0012] Figure 3A A schematic diagram showing a second layer according to some embodiments of the present disclosure is shown;

[0013] Figure 3B A schematic diagram of a first layer according to some embodiments of the present disclosure is shown;

[0014] Figure 3C A schematic diagram showing an output graph according to some embodiments of the present disclosure;

[0015] Figure 4 A drawing effect diagram according to some embodiments of the present disclosure is shown;

[0016] Figure 5 A schematic structural block diagram of an apparatus for drawing a mask according to some embodiments of the present disclosure is shown;

[0017] Figure 6 A block diagram of an electronic device capable of implementing various embodiments of the present disclosure is shown. DETAILED DESCRIPTION

[0018] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments set forth herein. On the contrary, these embodiments are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are only for exemplary purposes and are not intended to limit the scope of protection of the present disclosure.

[0019] It should be noted that the titles of any sections / subsections provided herein are not restrictive. Various embodiments are described throughout this article, and any type of embodiment may be included under any section / subsection. In addition, the embodiments described in any section / subsection may be combined in any manner with any other embodiments described in the same section / subsection and / or different sections / subsections.

[0020] In the description of the embodiments of the present disclosure, the term "including" and similar terms should be understood as open inclusion, that is, "including but not limited to". The term "based on" should be understood as "based at least in part on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may be included below. The terms "first", "second", etc. may refer to different or the same objects. Other explicit and implicit definitions may be included below.

[0021] The embodiments of the present disclosure may involve user data, data acquisition and / or use, etc. These aspects are subject to the corresponding laws, regulations and relevant provisions. In the embodiments of the present disclosure, all data collection, acquisition, processing, processing, forwarding, use, etc. are carried out on the premise that the user knows and confirms. Accordingly, when implementing each embodiment of the present disclosure, the type, scope of use, usage scenario, etc. of the data or information that may be involved should be informed to the user and the user's authorization should be obtained in an appropriate manner in accordance with the relevant laws and regulations. The specific notification and / or authorization method can vary according to the actual situation and application scenario, and the scope of the present disclosure is not limited in this respect.

[0022] In this specification and the embodiments, if personal information processing is involved, it will be processed on the premise of having a legal basis (such as obtaining the consent of the subject of personal information, or it is necessary to perform a contract, etc.), and will only be processed within the scope of regulations or agreements. If a user refuses to process personal information other than the necessary information for basic functions, it will not affect the user's use of basic functions.

[0023] Traditionally, direct masking functionality has not been provided on various platforms. Developers usually need to use 2D graphics libraries to draw masking effects themselves, and there are large differences in the capabilities of different platforms, making it difficult to directly achieve cross-platform consistency. In addition, various platforms have not yet provided a unified interface similar to the Web standard, which further increases development costs and complexity.

[0024] Existing platform frameworks have very limited support for masking functions. For example, some cross-platform frameworks based on the system's native drawing capabilities can rely on third-party components to implement masking functions. For example, developers need to embed mask elements into Scalable Vector Graphics (SVG) structures and achieve masking effects through SVG drawing. Since mask elements often cannot be directly converted into SVG structures, this traditional masking method is not only complicated, but also not applicable to most business scenarios.

[0025] In addition, some cross-platform frameworks can implement masking functions through Open Graphics Library (OpenGL) self-rendering. Although this method provides strong rendering capabilities, it is too cumbersome to be directly embedded in native pages and cannot mask native node content at the same time. In addition, this non-native rendering process also increases performance overhead and integration difficulty, making it difficult to meet the needs of complex business scenarios.

[0026] The embodiment of the present disclosure proposes a scheme for drawing a mask. According to the scheme, a style file is obtained, the style file indicates a set of mask attributes; based on the style file, a set of general drawing instructions is generated, the set of general drawing instructions is independent of the target platform for drawing the mask; and the set of general drawing instructions is converted into a set of platform drawing instructions corresponding to the target platform to draw the target mask element.

[0027] Based on this approach, the embodiments of the present disclosure can generate a set of general drawing instructions based on the style file, so that different platforms can draw mask elements based on this set of general drawing instructions, ensuring the consistency of mask effects on different platforms. In addition, the embodiments of the present disclosure can support different platforms to directly reuse mask attributes, improve the efficiency of drawing masks, and reduce the workload and cost of multi-terminal adaptation. In addition, the embodiments of the present disclosure can draw target mask elements based on the native mask drawing capabilities of each platform, which can effectively reduce the difficulty of development and save development costs.

[0028] Example Environment

[0029] Figure 1 1 is a schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented. Figure 1 As shown, example environment 100 may include electronic device 110 .

[0030] In the example environment 100, the electronic device 110 may generate a set of general drawing instructions based on the style file. The set of general drawing instructions may be provided to any appropriate platform (such as the target platform 120-1) to draw the mask element.

[0031] Specifically, for any platform from platform 120 - 1 to platform 120 -N, the platform may convert the set of general drawing instructions into a set of platform drawing instructions applicable to the platform, and then the platform may draw the mask element based on the platform's native drawing capability or drawing tool.

[0032] In some embodiments, platforms 120 - 1 to 120 -N may correspond to different operating systems, for example, platform 120 - 1 may correspond to system 1 , platform 120 - 2 may correspond to system 2 , 120 - 3 may correspond to system 3 , and so on.

[0033] In some embodiments, the electronic device 110 may be coupled with a parser of a predetermined development framework, specifically, a parser for analyzing a style file and for generating cross-platform drawing instructions.

[0034] It should be understood that the structure and function of the various elements in the environment 100 are described for exemplary purposes only and do not imply any limitation on the scope of the present disclosure.

[0035] Some example embodiments of the present disclosure will be described below with continued reference to the accompanying drawings.

[0036] Example Process

[0037] Figure 2 FIG. 2 is a flowchart of a process 200 for drawing a mask according to some embodiments of the present disclosure. The process 200 may be implemented at the electronic device 110. Figure 1 Process 200 is described.

[0038] In block 210 , the electronic device 110 obtains a style file indicating a set of mask properties.

[0039] In some embodiments, the style file may be a Cascading Style Sheets (CSS). Cascading Style Sheets is a language used to describe web page styles, and the base style file may be a code file defined based on the CSS standard. In some embodiments, a set of mask attributes may include at least one of the following: the source of the mask, the position of the mask, the size of the mask, the tiling mode of the mask, the clipping range of the mask, and the reference frame for positioning the mask.

[0040] In some embodiments, the source of the mask may include an image and / or a gradient, that is, the mask element may be determined based on an image, may be determined based on a gradient texture, or may be determined based on a superposition of an image and a gradient texture.

[0041] In some embodiments, the position of the mask is used to represent the position information of the mask element in the visual node. The visual node may be a display range corresponding to the web page.

[0042] In some embodiments, the size of the mask is used to characterize the drawing size and / or scaling method of the mask. The specific size of the mask may include but is not limited to: a first size, a second size, a third size, a fourth size, and a fifth size. The first size can characterize that the mask element uses the original size corresponding to the image or gradient texture corresponding to the mask source, that is, no scaling is performed and the aspect ratio remains unchanged, wherein the first size can be called auto. The second size can characterize the scaling of the mask element so that it fully adapts to the view node size while maintaining the aspect ratio, and the mask does not exceed the view node boundary, wherein the second size can also be called contain. The third size can characterize the scaling of the mask element so that it covers the entire view node while maintaining the aspect ratio, and ensures that some mask elements may exceed the view node boundary, wherein the third size can also be called cover. The fourth size table can characterize setting the mask element to a predetermined size, wherein the fourth size can also be called an absolute size. For example, when the size of the mask is 100px in width and 200px in height, it characterizes that the width of the mask element is 100px and the height is 200px. The fifth size can represent the final size of the mask calculated according to the aspect ratio of the view node. The fifth size can also be called an absolute size. For example, when the size of the mask is 50%, if the width of the view node is a and the height is b, the width of the mask element is a / 2, and the width of the mask element is b / 2.

[0043] In some embodiments, the mask tiling mode may indicate whether to duplicate the mask element when the mask element does not fill the view node, that is, to determine whether to display the duplicated mask element on the view node. If the mask element is duplicated, the mask tiling mode further indicates the direction of the duplicated direction.

[0044] Specifically, the tiling mode of the mask may include but is not limited to no-repeat, repeat-x in the horizontal direction, repeat-y in the vertical direction, and repeat in both the horizontal and vertical directions. No-repeat means that the mask element is drawn only once in the view node, and other mask elements are not drawn repeatedly. Repeat-x in the horizontal direction means that the mask element is only repeated in the horizontal direction, and not repeated in the vertical direction. Repeat-y in the vertical direction means that the mask element is only repeated in the vertical direction, and not repeated in the horizontal direction. Repeat-y in both the horizontal and vertical directions means that the mask element is repeated in both the horizontal and vertical directions.

[0045] As an example, the style file can be as follows:

[0046]

[0047] As can be seen from the above example, a class named .masked is defined in the style file to create a mask element with specific mask attributes. Width represents the width of the mask element, and height represents the height of the mask element. Specifically, the style file indicates that the width and height of the mask element are both 200 pixels. Mask-repeat represents the tiling mode of the mask. Specifically, the style file indicates that the mask element will not be duplicated in the view node. Mask-size represents the size and scaling mode of the mask element. Specifically, the style file indicates that mask-size is 100%, that is, the size of the mask element is the same as the size of the view node. Background represents the background color of the mask element. Specifically, the style file indicates that the background color of the mask element is red. Mask-image defines the source of the mask. Specifically, mask-image:url(*******) in the style file represents that the image pointed to by the uniform resource locator (url) of "*******" is used as the mask source. Radial-gradient(transparent 50%,black) represents that a radial gradient is used as the mask source. Specifically, this radial gradient fades from transparent to black.

[0048] In block 220 , the electronic device 110 generates a set of generic drawing instructions based on the style file, the set of generic drawing instructions being independent of the target platform 120 - 1 for drawing the mask.

[0049] In some embodiments, the target platform 120 - 1 may indicate an operating system for drawing the mask element. Specifically, the operating system may be any appropriate system.

[0050] To increase the efficiency of drawing instruction generation, in some embodiments, the electronic device 110 may encode the style file into a binary file, wherein the binary file is smaller than the style file and has a faster parsing speed. Further, the electronic device 110 may generate a set of general drawing instructions by parsing the binary file.

[0051] In some embodiments, each general drawing instruction in the set of general drawing instructions may indicate any appropriate mask attribute, such as the source of the mask, the position of the mask, the size of the mask, the tiling method of the mask, the clipping range of the mask, the reference frame for positioning the mask, etc. The set of general drawing instructions may be general upper-level abstract instructions that may support mask drawing on various platforms.

[0052] In some embodiments, this set of general drawing instructions may be independent of the target platform corresponding to the platform layer (eg, a specific operating system). For example, the definition, declaration, and calling method of this set of general drawing instructions may be independent of the target platform corresponding to the platform layer.

[0053] In block 230 , the electronic device 110 converts a set of generic drawing instructions into a set of platform drawing instructions corresponding to the target platform 120 - 1 to draw the target mask element.

[0054] In some embodiments, the electronic device 110 may send this set of general drawing instructions to the target platform 120-1. Further, the target platform 120-1 may convert a set of general drawing instructions into a set of platform drawing instructions that can be recognized and processed by the target platform 120-1 based on the target interface corresponding to the target platform 120-1. Further, the target platform 120-1 may draw the target mask element based on this set of platform drawing instructions. Specifically, the target platform 120-1 may use its own original drawing tools or drawing methods to draw the target mask element based on this set of platform drawing instructions, so as to achieve a lightweight mask effect by reusing native drawing tools or methods.

[0055] In some embodiments, the electronic device 110 may send a first general drawing instruction indicating a source attribute to the target platform 120-1 to generate an initial mask element, where the source attribute is determined based on a style file. The source attribute is also the source of the mask. Specifically, the source attribute includes at least one of an image or a gradient.

[0056] In some embodiments, the target platform 120-1 may obtain an image corresponding to the resource locator in response to the source attribute indicating the resource locator. Taking the above-mentioned style file example, the target platform 120-1 may determine the image corresponding to the URL "*******". Further, the target platform 120-1 may generate an initial mask element based on the image.

[0057] In other embodiments, the target platform 120-1 may indicate a gradient parameter in response to the source attribute, and draw a gradient texture based on the gradient parameter. The gradient parameter may include at least one parameter such as a gradient type, a gradient direction, a gradient color, and a gradient position. Taking the above-mentioned style file example, the target platform 120-1 may generate a radial gradient texture that fades from transparent to black. In some embodiments, the corresponding method of generating a gradient texture may be different for different platforms. Further, the target platform 120-1 may generate an initial mask element based on the gradient texture.

[0058] In some other embodiments, the target platform 120-1 may also obtain an image corresponding to the resource locator and draw a gradient texture based on the gradient parameters in response to the source attribute indicating the resource locator and the gradient parameters. Further, the target platform 120-1 may generate an initial mask element based on the image and the gradient texture.

[0059] The present disclosure can support mask updates for animation, gradient, and dynamic content, and can overlay multiple layers of masks on the same view to achieve complex visual effects. In addition, the present disclosure can ensure rendering smoothness and performance stability in dynamic scenes.

[0060] Further, the electronic device 110 may send at least one additional general drawing instruction to the target platform 120-1 to edit the initial mask element to obtain the target mask element. The at least one additional general drawing instruction may include at least one of the following: a general drawing instruction indicating the position of the mask, a general drawing instruction indicating the size of the mask, a general drawing instruction indicating the tiling mode of the mask, a general drawing instruction indicating the clipping range of the mask, and a general drawing instruction indicating a reference frame for positioning the mask. For example, if the additional general drawing instruction includes that the tiling mode of the mask is to copy in the horizontal direction, the target platform 120-1 may copy a first mask element identical to the initial mask element in the horizontal direction of the initial mask element in the view node to determine the initial mask element and the first mask element as the target mask element.

[0061] Further, the target platform 120-1 can fuse a first layer corresponding to the target mask element and a second layer corresponding to the page content, wherein the second layer includes a content layer and / or a background layer. The first layer includes a target mask element, which is mainly used to control the visibility of other layers, and it mainly affects the display of other layers by defining transparent and opaque areas. In some embodiments, the content layer mainly includes elements such as text, images, and videos. The background layer mainly includes elements such as background images or colors.

[0062] In some implementations, the target platform 120 - 1 may determine a fusion transparency of the plurality of output pixels based on a first transparency corresponding to the plurality of pixels in the first layer and a second transparency corresponding to the plurality of pixels in the second layer.

[0063] As an example, the blending transparency of multiple output pixels may be determined based on the following formula:

[0064] α out =α source *α mask

[0065] where α out is the blend transparency, α sourceis the second transparency corresponding to the pixels in the second layer, α mask It is the first transparency corresponding to the pixels in the first layer.

[0066] In some embodiments, target platform 120 - 1 may determine a blended color of the plurality of output pixels based on colors corresponding to the plurality of pixels in the first layer and a second transparency corresponding to the plurality of pixels in the second layer.

[0067] As an example, the blending transparency of multiple output pixels may be determined based on the following formula:

[0068] C out =C mask *α source

[0069] Among them C out is the blend color, α source is the second transparency corresponding to the pixel in the second layer, c mask is the color corresponding to the pixel in the first layer.

[0070] In other embodiments, the target platform 120 - 1 may utilize a graphics processing unit (GPU) blend mode to implement efficient pixel-by-pixel calculations to blend multiple image layers (such as a first image and a second image layer) together.

[0071] The present disclosure can embed the target mask element into the native page, and support masking to the original node, thereby improving the applicability of actual business scenarios.

[0072] Figure 3A shows a schematic diagram of a second layer according to some embodiments of the present disclosure, Figure 3B shows a schematic diagram of a first layer according to some embodiments of the present disclosure, Figure 3C A schematic diagram of an output layer according to some embodiments of the present disclosure is shown, wherein the output layer includes a plurality of output pixels. Figure 3A-3C Provide explanation.

[0073] by Figure 3A As an example, a square 301 is presented in the second layer, and a black border 302 is surrounding the square 301 .

[0074] by Figure 3B As an example, the first layer defines which areas should be displayed and which areas should be hidden. Specifically, area 303 indicates that the corresponding area in the first layer is allowed to be displayed, and areas other than area 303 (such as area 304) indicate that the corresponding area in the first layer is not allowed to be displayed.

[0075] Furthermore, the target platform 120-1 may be based on Figure 3A The second layer shown and Figure 3B The first layer shown, based on the second layer, hides the area that needs to be hidden defined in the first layer, and displays the area that does not need to be hidden. For example, area 305 is the area corresponding to area 304 that needs to be hidden based on the first layer.

[0076] Figure 4 A flowchart of determining a drawing effect according to some embodiments of the present disclosure is shown. Figure 4 Provide explanation.

[0077] In block 401 , the electronic device may decode and parse the binary file to generate a general drawing instruction.

[0078] As an example, the electronic device can encode the style file into a binary file, and the style file can be a code file defined in the cascading style sheet by the front end. Further, the electronic device can parse the binary and parse to generate a set of mask drawing instructions, which is a set of general drawing instructions.

[0079] As an example, this set of general drawing instructions may include at least one of the following: a general drawing instruction indicating the source of the mask, a general drawing instruction indicating the position of the mask, a general drawing instruction indicating the size of the mask, a general drawing instruction indicating the tiling method of the mask, a general drawing instruction indicating the clipping range of the mask, and a general drawing instruction indicating a reference box for positioning the mask.

[0080] In block 402 , the platform 1 of the corresponding system 1 may perform special effect drawing based on a general drawing instruction.

[0081] As an example, platform 1 may receive a set of general drawing instructions, such as a general drawing instruction indicating the source of a mask, a general drawing instruction indicating the position of a mask, a general drawing instruction indicating the size of a mask, a general drawing instruction indicating the tiling mode of a mask, a general drawing instruction indicating the clipping range of a mask, and a general drawing instruction indicating a reference frame for positioning a mask. Further, platform 1 may convert this set of general drawing instructions into a set of drawing instructions that can be used by platform 1 based on the first interface corresponding to platform 1, such as drawing instruction 1 indicating the source of a mask, and additional drawing instructions 2 indicating additional drawing instructions other than the source of the mask, wherein the additional drawing instructions may include at least one of the following: a drawing instruction indicating the position of a mask, a drawing instruction indicating the size of a mask, a drawing instruction indicating the tiling mode of a mask, a drawing instruction indicating the clipping range of a mask, and a drawing instruction indicating a reference frame for positioning a mask.

[0082] Further, the platform 1 may generate an initial mask element 1 based on the drawing instruction 1. Further, the platform 1 may generate a target mask element 1 based on the drawing instruction 2 and the initial mask element 1. Further, the platform 1 may merge the mask layer corresponding to the target mask element 1 with other layers, and the other layers may include a content layer and a background layer.

[0083] In block 403 , the platform 2 corresponding to the system 2 may perform special effect drawing based on the general drawing instruction.

[0084] As an example, platform 2 may receive a set of general drawing instructions, such as a general drawing instruction indicating the source of a mask, a general drawing instruction indicating the position of a mask, a general drawing instruction indicating the size of a mask, a general drawing instruction indicating the tiling mode of a mask, a general drawing instruction indicating the clipping range of a mask, and a general drawing instruction indicating a reference frame for positioning a mask. Further, platform 2 may convert this set of general drawing instructions into a set of drawing instructions that can be used by platform 2 based on a second interface corresponding to platform 2, such as drawing instruction 3 indicating the source of a mask, and additional drawing instructions 4 indicating additional drawing instructions other than the source of the mask, wherein the additional drawing instructions may include at least one of the following: a drawing instruction indicating the position of a mask, a drawing instruction indicating the size of a mask, a drawing instruction indicating the tiling mode of a mask, a drawing instruction indicating the clipping range of a mask, and a drawing instruction indicating a reference frame for positioning a mask.

[0085] Further, the platform 2 may generate an initial mask element 2 based on the drawing instruction 3. Further, the platform 2 may generate a target mask element 2 based on the drawing instruction 4 and the initial mask element 2. Further, the platform 2 may merge the mask layer corresponding to the target mask element 2 with other layers, and the other layers may include a content layer and a background layer.

[0086] In block 404 , the platform 3 of the corresponding system 3 may perform special effect drawing based on the general drawing instruction.

[0087] As an example, the platform 3 may receive a set of general drawing instructions, such as a general drawing instruction indicating the source of the mask, a general drawing instruction indicating the position of the mask, a general drawing instruction indicating the size of the mask, a general drawing instruction indicating the tiling mode of the mask, a general drawing instruction indicating the clipping range of the mask, and a general drawing instruction indicating a reference frame for positioning the mask. Further, the platform 3 may, based on the third interface corresponding to the platform 3, convert this set of general drawing instructions into a set of drawing instructions that can be used by the platform 3, such as a drawing instruction 5 indicating the source of the mask, and an additional drawing instruction 6 indicating additional drawing instructions other than the source of the mask, wherein the additional drawing instruction 6 may include at least one of the following: a drawing instruction indicating the position of the mask, a drawing instruction indicating the size of the mask, a drawing instruction indicating the tiling mode of the mask, a drawing instruction indicating the clipping range of the mask, and a drawing instruction indicating a reference frame for positioning the mask.

[0088] Further, the platform 3 may generate an initial mask element 3 based on the drawing instruction 5. Further, the platform 3 may generate a target mask element 3 based on the drawing instruction 6 and the initial mask element 3. Further, the platform 3 may merge the mask layer corresponding to the target mask element 3 with other layers, and the other layers may include a content layer and a background layer.

[0089] Based on this approach, the embodiments of the present disclosure can generate a set of general drawing instructions based on the style file, so that different platforms can draw mask elements based on this set of general drawing instructions, ensuring the consistency of mask effects on different platforms. In addition, the embodiments of the present disclosure can support different platforms to directly reuse mask attributes, improve the efficiency of drawing masks, and reduce the workload and cost of multi-terminal adaptation. In addition, the embodiments of the present disclosure can draw target mask elements based on the native mask drawing capabilities of each platform, which can effectively reduce the difficulty of development and save development costs.

[0090] Example devices and equipment

[0091] The embodiments of the present disclosure also provide corresponding devices for implementing the above methods or processes. Figure 5 A schematic structural block diagram of an apparatus 500 for drawing a mask according to some embodiments of the present disclosure is shown. The apparatus 500 may be implemented as or included in the electronic device 110 discussed above. Each module / component in the apparatus 500 may be implemented by hardware, software, firmware, or any combination thereof.

[0092] like Figure 5As shown, the device 500 includes an acquisition module 510, which is configured to acquire a style file, which indicates a set of mask attributes; a generation module 520, which is configured to generate a set of general drawing instructions based on the style file, and the set of general drawing instructions is independent of the target platform for drawing the mask; and a conversion module 530, which is configured to convert the set of general drawing instructions into a set of platform drawing instructions corresponding to the target platform to draw the target mask element.

[0093] In some embodiments, the conversion module 530 is further configured to: send a first general drawing instruction indicating a source attribute to the target platform to generate an initial mask element, wherein the source attribute is determined based on a style file; and send at least one additional general drawing instruction to the target platform to edit the initial mask element to obtain a target mask element.

[0094] In some embodiments, the target platform is configured to: in response to the source attribute indicating a resource locator, obtain an image corresponding to the resource locator; and generate an initial mask element based on the image.

[0095] In some embodiments, the target platform is configured to: in response to the source attribute indicating a gradient parameter, draw a gradient texture based on the gradient parameter; and generate an initial mask element based on the gradient texture.

[0096] In some embodiments, the target platform is further configured to: merge a first layer corresponding to the mask element and a second layer corresponding to the page content, the second layer including a content layer and / or a background layer.

[0097] In some embodiments, fusing a first layer corresponding to the mask element and a second layer corresponding to the page content includes determining a fusion transparency of multiple output pixels based on a first transparency corresponding to multiple pixels in the first layer and a second transparency corresponding to multiple pixels in the second layer.

[0098] In some embodiments, blending a first layer corresponding to the mask element and a second layer corresponding to the page content includes determining a blended color of multiple output pixels based on colors corresponding to multiple pixels in the first layer and a second transparency corresponding to multiple pixels in the second layer.

[0099] In some embodiments, a set of mask properties includes at least one of the following: the source of the mask; the position of the mask; the size of the mask; the tiling method of the mask; the cropping range of the mask; and the reference frame for positioning the mask.

[0100] In some embodiments, the generation module 520 is further configured to: encode the style file into a binary file; and generate a set of general drawing instructions by parsing the binary file.

[0101] In some embodiments, the style file is a cascading style sheet.

[0102] In some embodiments, the target platform dictates the operating system on which the mask element is drawn.

[0103] The units included in the device 500 can be implemented in various ways, including software, hardware, firmware, or any combination thereof. In some embodiments, one or more units can be implemented using software and / or firmware, such as machine executable instructions stored on a storage medium. In addition to or as an alternative to machine executable instructions, some or all of the units in the device 500 can be implemented at least in part by one or more hardware logic components. As an example and not limitation, exemplary types of hardware logic components that can be used include field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.

[0104] Figure 6 1 shows a block diagram of an electronic device 600 in which one or more embodiments of the present disclosure may be implemented. It should be understood that Figure 6 The electronic device 600 shown is merely exemplary and should not constitute any limitation on the functionality and scope of the embodiments described herein. Figure 6 The electronic device 600 shown can be used to implement Figure 1 An electronic device 110 is shown.

[0105] like Figure 6 As shown, the electronic device 600 is in the form of a general electronic device. The components of the electronic device 600 may include, but are not limited to, one or more processors or processing units 610, a memory 620, a storage device 630, one or more communication units 640, one or more input devices 650, and one or more output devices 660. The processing unit 610 may be an actual or virtual processor and is capable of performing various processes according to a program stored in the memory 620. In a multi-processor system, multiple processing units execute computer executable instructions in parallel to improve the parallel processing capability of the electronic device 600.

[0106] The electronic device 600 typically includes a plurality of computer storage media. Such media may be any accessible media that is accessible to the electronic device 600, including but not limited to volatile and non-volatile media, removable and non-removable media. The memory 620 may be a volatile memory (e.g., a register, a cache, a random access memory (RAM)), a non-volatile memory (e.g., a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. The storage device 630 may be a removable or non-removable medium, and may include a machine-readable medium, such as a flash drive, a disk, or any other medium, which may be capable of being used to store information and / or data (e.g., training data for training) and may be accessed within the electronic device 600.

[0107] The electronic device 600 may further include additional removable / non-removable, volatile / non-volatile storage media. Figure 6 As shown in , a disk drive for reading or writing from a removable, non-volatile disk (e.g., a "floppy disk") and an optical drive for reading or writing from a removable, non-volatile optical disk may be provided. In these cases, each drive may be connected to the bus (not shown) by one or more data media interfaces. The memory 620 may include a computer program product 625 having one or more program modules that are configured to perform various methods or actions of various embodiments of the present disclosure.

[0108] The communication unit 640 implements communication with other electronic devices through a communication medium. Additionally, the functions of the components of the electronic device 600 can be implemented with a single computing cluster or multiple computing machines that can communicate through a communication connection. Therefore, the electronic device 600 can operate in a networked environment using a logical connection with one or more other servers, a network personal computer (PC), or another network node.

[0109] The input device 650 may be one or more input devices, such as a mouse, a keyboard, a tracking ball, etc. The output device 660 may be one or more output devices, such as a display, a speaker, a printer, etc. The electronic device 600 may also communicate with one or more external devices (not shown) through the communication unit 640 as needed, such as a storage device, a display device, etc., communicate with one or more devices that allow a user to interact with the electronic device 600, or communicate with any device that allows the electronic device 600 to communicate with one or more other electronic devices (e.g., a network card, a modem, etc.). Such communication may be performed via an input / output (I / O) interface (not shown).

[0110] According to an exemplary implementation of the present disclosure, a computer-readable storage medium is provided, on which computer-executable instructions are stored, wherein the computer-executable instructions are executed by a processor to implement the method described above. According to an exemplary implementation of the present disclosure, a computer program product is also provided, which is tangibly stored on a non-transitory computer-readable medium and includes computer-executable instructions, and the computer-executable instructions are executed by a processor to implement the method described above.

[0111] Various aspects of the present disclosure are described herein with reference to the flowcharts and / or block diagrams of the methods, devices, equipment, and computer program products implemented according to the present disclosure. It should be understood that each box in the flowchart and / or block diagram and the combination of each box in the flowchart and / or block diagram can be implemented by computer-readable program instructions.

[0112] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable data processing device, thereby producing a machine, so that when these instructions are executed by the processing unit of the computer or other programmable data processing device, a device that implements the functions / actions specified in one or more boxes in the flowchart and / or block diagram is generated. These computer-readable program instructions can also be stored in a computer-readable storage medium, and these instructions cause the computer, programmable data processing device, and / or other equipment to work in a specific manner, so that the computer-readable medium storing the instructions includes a manufactured product, which includes instructions for implementing various aspects of the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0113] Computer-readable program instructions can be loaded onto a computer, other programmable data processing apparatus, or other device so that a series of operational steps are performed on the computer, other programmable data processing apparatus, or other device to produce a computer-implemented process, so that the instructions executed on the computer, other programmable data processing apparatus, or other device implement the functions / actions specified in one or more boxes in the flowchart and / or block diagram.

[0114] The flow chart and block diagram in the accompanying drawings show the possible architecture, function and operation of the system, method and computer program product according to multiple implementations of the present disclosure. In this regard, each square box in the flow chart or block diagram can represent a part of a module, program segment or instruction, and a part of a module, program segment or instruction includes one or more executable instructions for realizing the logical function of the specification. In some implementations as replacements, the function marked in the square box can also occur in a sequence different from that marked in the accompanying drawings. For example, two continuous square boxes can actually be executed substantially in parallel, and they can sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each square box in the block diagram and / or flow chart, and the combination of the square boxes in the block diagram and / or flow chart can be realized by a special hardware-based system that performs the function or action of the specification, or can be realized by a combination of special hardware and computer instructions.

[0115] The above descriptions of various implementations of the present disclosure are exemplary, non-exhaustive, and not limited to the disclosed implementations. Many modifications and variations will be apparent to those of ordinary skill in the art without departing from the scope and spirit of the described implementations. The selection of terms used herein is intended to best explain the principles of the implementations, practical applications, or improvements to the technology in the market, or to enable other persons of ordinary skill in the art to understand the various implementations disclosed herein.

Claims

1. A method for drawing a mask, comprising: Obtain a style file, wherein the style file indicates a set of mask attributes; Based on the style file, generating a set of general drawing instructions, the set of general drawing instructions being independent of a target platform for drawing the mask; as well as The set of general drawing instructions is converted into a set of platform drawing instructions corresponding to the target platform to draw the target mask element.

2. The method according to claim 1, wherein converting the set of general drawing instructions into a set of platform drawing instructions corresponding to the target platform comprises: Sending a first general drawing instruction indicating a source attribute to the target platform to generate an initial mask element, wherein the source attribute is determined based on the style file; as well as At least one additional general drawing instruction is sent to the target platform to edit the initial mask element to obtain the target mask element.

3. The method according to claim 2, wherein the target platform is configured as: In response to the source attribute indicating a resource locator, acquiring an image corresponding to the resource locator; and Based on the image, the initial mask element is generated.

4. The method according to claim 2, wherein the target platform is configured as: In response to the source attribute indicating a gradient parameter, drawing a gradient texture based on the gradient parameter; and The initial mask element is generated based on the gradient texture.

5. The method according to claim 1, wherein the target platform is further configured to: A first layer corresponding to the target mask element and a second layer corresponding to the page content are merged, wherein the second layer includes a content layer and / or a background layer.

6. The method according to claim 5, wherein fusing the first layer corresponding to the target mask element and the second layer corresponding to the page content comprises: Based on a first transparency corresponding to a plurality of pixels in the first layer and a second transparency corresponding to a plurality of pixels in the second layer, a fusion transparency of a plurality of output pixels is determined.

7. The method according to claim 5, wherein fusing the first layer corresponding to the mask element and the second layer corresponding to the page content comprises: Based on the colors corresponding to the plurality of pixels in the first layer and the second transparency corresponding to the plurality of pixels in the second layer, a fusion color of the plurality of output pixels is determined.

8. The method of claim 1, wherein the set of mask properties comprises at least one of the following: The source of the mask; The position of the mask; The size of the mask; How the mask is tiled; The clipping range of the mask; The reference box for positioning the mask.

9. The method according to claim 1, wherein generating a set of general drawing instructions based on the style file comprises: Encoding the style file into a binary file; as well as The set of general drawing instructions is generated by parsing the binary file.

10. The method according to claim 1, wherein the style file is a cascading style sheet. The method of claim 1 , wherein the target platform indicates an operating system that draws the mask element.

12. A device for drawing a mask, comprising: An acquisition module is configured to acquire a style file, wherein the style file indicates a set of mask attributes; A generating module configured to generate a set of general drawing instructions based on the style file, wherein the set of general drawing instructions is independent of a target platform for drawing the mask; as well as The conversion module is configured to convert the set of general drawing instructions into a set of platform drawing instructions corresponding to the target platform to draw the target mask element.

13. An electronic device comprising: at least one processing unit; as well as At least one memory, the at least one memory being coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method according to any one of claims 1 to 11 when executed by the at least one processing unit.

14. A computer-readable storage medium having a computer program stored thereon, wherein the computer program implements the method according to any one of claims 1 to 11 when executed by a processor.

15. A computer program product comprising computer executable instructions, wherein the computer executable instructions, when executed by a processor, implement the method according to any one of claims 1 to 11.

Images