CN110569453B - Path blurring method and device based on canvas element - Google Patents
Path blurring method and device based on canvas element Download PDFInfo
- Publication number
- CN110569453B CN110569453B CN201810259338.7A CN201810259338A CN110569453B CN 110569453 B CN110569453 B CN 110569453B CN 201810259338 A CN201810259338 A CN 201810259338A CN 110569453 B CN110569453 B CN 110569453B
- Authority
- CN
- China
- Prior art keywords
- path
- sub
- layer
- determining
- width
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
The disclosure relates to a canvas element-based path blurring method and apparatus. The method comprises the following steps: acquiring the width of a path to be processed in the canvas of the canvas element; determining a blurring width corresponding to the path to be processed according to the width of the path to be processed; determining the total number of layers of sub paths in the virtualized path corresponding to the path to be processed; determining the width of each layer of sub-paths in the virtualization path according to the virtualization width and the total layer number; determining the transparency of each layer of sub-paths according to the total number of layers; and overlapping the sub-paths of each layer to obtain the virtual path. The virtual path is obtained by overlapping the multilayer sub-paths with different widths and different transparencies, so that the path can be virtualized in the canvas of the canvas element.
Description
Technical Field
The present disclosure relates to the field of information technologies, and in particular, to a path blurring method and apparatus based on canvas elements.
Background
The Canvas element is an element in HTML5(HyperText Markup Language version 5, 5 of HyperText Markup Language). Using the canvas element, the image may be drawn on the web page. In the canvas element, all graphics are path-based. The path in the Canvas element is a curve formed by connecting points in the Canvas in sequence. In order to make the transition between the path and the background in the canvas softer, the inventor of the present disclosure proposes a path blurring method and apparatus based on canvas elements.
Disclosure of Invention
In view of the above, the present disclosure provides a method and an apparatus for path blurring based on canvas elements.
According to an aspect of the present disclosure, there is provided a canvas element-based path blurring method, including:
acquiring the width of a path to be processed in the canvas of the canvas element;
determining a blurring width corresponding to the path to be processed according to the width of the path to be processed;
determining the total number of layers of sub paths in the virtualized path corresponding to the path to be processed;
determining the width of each layer of sub-paths in the virtualization path according to the virtualization width and the total layer number;
determining the transparency of each layer of sub-paths according to the total number of layers;
and overlapping the sub-paths of each layer to obtain the virtual path.
In a possible implementation manner, determining a blurring width corresponding to the path to be processed according to the width of the path to be processed includes:
determining the width of a first layer of sub-paths in the blurring path according to the brush hardness corresponding to the path to be processed;
and determining the virtualization width corresponding to the path to be processed according to the width of the path to be processed and the width of the first-layer sub-path.
In a possible implementation manner, determining a blurring width corresponding to the path to be processed according to the width of the path to be processed and the width of the first-layer sub-path includes:
calculating a first difference value between the width of the path to be processed and the width of the first-layer sub-path;
and determining the product of the first difference and the first coefficient as the blurring width corresponding to the path to be processed.
In a possible implementation manner, determining a total number of layers of sub-paths in the blurring path corresponding to the path to be processed includes:
and determining the total layer number corresponding to the path to be processed according to the virtualization width corresponding to the path to be processed and the width difference of two adjacent layers of sub-paths in the virtualization path.
In one possible implementation manner, determining the transparency of each layer sub-path according to the total number of layers includes:
determining the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after superposition according to the transparency of the first layer sub-path and the total number of layers, wherein i is a positive integer;
and determining the transparency of the (i + 1) th layer sub-path according to the transparency of the (i) th layer sub-path after being superposed with the (i + 1) th layer sub-path and the transparency of the (i) th layer sub-path.
In a possible implementation manner, determining the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after being superimposed according to the transparency of the first layer sub-path and the total number of layers includes:
determining the transparency C of the i-th layer sub-path and the i + 1-th layer sub-path after superposition by adopting the formula 1i(i+1)，
Wherein G represents the transparency of the first layer sub-path, G is greater than or equal to 0 and less than 1, and D represents the total number of layers.
In a possible implementation manner, determining the transparency of the i +1 th layer sub-path according to the transparency of the i +1 th layer sub-path after the i layer sub-path is superimposed on the i +1 th layer sub-path, includes:
according to Ci(i+1)＝1-(1-Ai)(1-Ai+1) Determining the transparency A of the i +1 th layer sub-pathi+1Wherein, Ci(i+1)Representing the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after superposition, AiRepresenting the transparency of the i-th layer sub-path.
According to another method of the present disclosure, there is provided a canvas element-based path blurring apparatus, including:
the obtaining module is used for obtaining the width of a path to be processed in the canvas of the canvas element;
a first determining module, configured to determine a blurring width corresponding to the path to be processed according to the width of the path to be processed;
a second determining module, configured to determine a total number of layers of sub-paths in the blurring path corresponding to the path to be processed;
a third determining module, configured to determine, according to the virtualization width and the total number of layers, a width of each layer of sub-paths in the virtualization path;
a fourth determining module, configured to determine, according to the total number of layers, a transparency of each layer of sub-paths;
and the superposition module is used for superposing the sub-paths of each layer to obtain the virtual path.
In one possible implementation manner, the first determining module includes:
the first determining submodule is used for determining the width of a first layer of subpath in the blurring path according to the brush hardness corresponding to the path to be processed;
and the second determining submodule is used for determining the virtualization width corresponding to the path to be processed according to the width of the path to be processed and the width of the first layer of sub-paths.
In one possible implementation, the second determining sub-module includes:
the calculating unit is used for calculating a first difference value between the width of the path to be processed and the width of the first layer sub-path;
and the determining unit is used for determining the product of the first difference and the first coefficient as the blurring width corresponding to the path to be processed.
In one possible implementation manner, the second determining module is configured to:
and determining the total layer number corresponding to the path to be processed according to the virtualization width corresponding to the path to be processed and the width difference of two adjacent layers of sub-paths in the virtualization path.
In one possible implementation manner, the fourth determining module includes:
the third determining sub-module is used for determining the transparency of the ith layer of sub-path and the (i + 1) th layer of sub-path after superposition according to the transparency of the first layer of sub-path and the total number of layers, wherein i is a positive integer;
and the fourth determining sub-module is used for determining the transparency of the i +1 th layer sub-path according to the transparency of the i +1 th layer sub-path after the i +1 th layer sub-path is superposed and the transparency of the i +1 th layer sub-path.
In one possible implementation, the third determining sub-module is configured to:
determining the transparency C of the i-th layer sub-path and the i + 1-th layer sub-path after superposition by adopting the formula 1i(i+1)，
Wherein G represents the transparency of the first layer sub-path, G is greater than or equal to 0 and less than 1, and D represents the total number of layers.
In one possible implementation, the fourth determining submodule is configured to:
according to Ci(i+1)＝1-(1-Ai)(1-Ai+1) Determining the transparency A of the i +1 th layer sub-pathi+1Wherein, Ci(i+1)Representing the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after superposition, AiRepresenting the transparency of the i-th layer sub-path.
According to another aspect of the present disclosure, there is provided a canvas-based path blurring apparatus including: a processor; a memory for storing processor-executable instructions; wherein the processor is configured to perform the above method.
According to another aspect of the present disclosure, there is provided a non-transitory computer readable storage medium having computer program instructions stored thereon, wherein the computer program instructions, when executed by a processor, implement the above-described method.
According to the canvas-element-based path blurring method and device, the width of a path to be processed in a canvas of the canvas is obtained, the blurring width corresponding to the path to be processed is determined according to the width of the path to be processed, the total number of layers of sub-paths in the blurring path corresponding to the path to be processed is determined, the width of each layer of sub-path in the blurring path is determined according to the blurring width and the total number of layers, the transparency of each layer of sub-path is determined according to the total number of layers, the blurring path is obtained by overlapping each layer of sub-path, the blurring path is obtained by overlapping the plurality of layers of sub-paths with different widths and different transparencies, and therefore the path can be blurred in the canvas of the canvas.
Other features and aspects of the present disclosure will become apparent from the following detailed description of exemplary embodiments, which proceeds with reference to the accompanying drawings.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate exemplary embodiments, features, and aspects of the disclosure and, together with the description, serve to explain the principles of the disclosure.
Fig. 1 shows a flowchart of a canvas element-based path blurring method according to an embodiment of the present disclosure.
Fig. 2 is a schematic diagram illustrating a path to be processed in a canvas element-based path blurring method according to an embodiment of the present disclosure.
Fig. 3 is a schematic diagram illustrating a blurring path in a canvas element-based path blurring method according to an embodiment of the present disclosure.
Fig. 4 is another schematic diagram illustrating a blurring path in a canvas element-based path blurring method according to an embodiment of the present disclosure.
Fig. 5 shows an exemplary flowchart of step S12 of the canvas element-based path blurring method according to an embodiment of the present disclosure.
Fig. 6 shows an exemplary flowchart of step S122 of the canvas element-based path blurring method according to an embodiment of the present disclosure.
Fig. 7 shows an exemplary flowchart of step S15 of the canvas element-based path blurring method according to an embodiment of the present disclosure.
Fig. 8 shows a block diagram of a canvas element-based path blurring apparatus according to an embodiment of the present disclosure.
Fig. 9 shows an exemplary block diagram of a canvas element-based path blurring apparatus according to an embodiment of the present disclosure.
Fig. 10 is a block diagram illustrating an apparatus 800 for path blurring of canvas elements, according to an example embodiment.
Detailed Description
Various exemplary embodiments, features and aspects of the present disclosure will be described in detail below with reference to the accompanying drawings. In the drawings, like reference numbers can indicate functionally identical or similar elements. While the various aspects of the embodiments are presented in drawings, the drawings are not necessarily drawn to scale unless specifically indicated.
The word "exemplary" is used exclusively herein to mean "serving as an example, embodiment, or illustration. Any embodiment described herein as "exemplary" is not necessarily to be construed as preferred or advantageous over other embodiments.
Furthermore, in the following detailed description, numerous specific details are set forth in order to provide a better understanding of the present disclosure. It will be understood by those skilled in the art that the present disclosure may be practiced without some of these specific details. In some instances, methods, means, elements and circuits that are well known to those skilled in the art have not been described in detail so as not to obscure the present disclosure.
Fig. 1 shows a flowchart of a canvas element-based path blurring method according to an embodiment of the present disclosure. The method can be applied to terminal equipment such as a mobile phone or a tablet personal computer. As shown in fig. 1, the method includes steps S11 through S16.
In step S11, the width of the path to be processed in the canvas of the canvas element is obtained.
In the canvas element, all graphics are path-based. The path in the Canvas element is a curve formed by connecting a plurality of points in the Canvas of the Canvas element in sequence. The path may be a non-closed path or a closed path. The non-closed path may refer to a path that is not connected end to end, and the closed path may refer to a path that is connected end to end.
In this embodiment, the path to be processed may be a path already drawn in the canvas of the canvas element, or may refer to a path not yet drawn in the canvas of the canvas element. If the path to be processed is a drawn path in the canvas of the canvas element, the path blurring method based on the canvas element of the embodiment may refer to modifying the drawn path so that the drawn path achieves a desired blurring effect. If the path to be processed is a path not drawn in the canvas of the canvas element, the path blurring method based on the canvas element of the embodiment may refer to adjusting the brush attribute of the canvas element, so that the path drawn next has a desired blurring effect.
In this embodiment, the width of the path to be processed may be equal to the brush diameter of the canvas element. Where the brush diameter of a canvas element may be equal to 2 times the distance between the center of the brush and the edge of the brush.
Fig. 2 is a schematic diagram illustrating a path to be processed in a canvas element-based path blurring method according to an embodiment of the present disclosure. In fig. 2, the width of the path to be processed is 70 pixels.
In step S12, a blurring width corresponding to the path to be processed is determined according to the width of the path to be processed.
The blurring width corresponding to the path to be processed represents the width of the region needing blurring corresponding to the path to be processed.
In a possible implementation manner, determining a blurring width corresponding to the path to be processed according to the width of the path to be processed may include: and determining the R times of the width of the path to be processed as the blurring width corresponding to the path to be processed. Wherein R may be greater than 0 and less than 1.
In step S13, the total number of layers of sub-paths in the blurring path corresponding to the path to be processed is determined.
In a possible implementation manner, determining a total number of layers of sub-paths in a blurring path corresponding to a path to be processed includes: and determining the total layer number corresponding to the path to be processed according to the virtualization width corresponding to the path to be processed and the width difference of two adjacent layers of sub-paths in the virtualization path.
In this implementation, the total number of layers D corresponding to the path to be processed may be determined according to equation 3,
wherein, WvAnd the width of the blurring path corresponding to the path to be processed is shown, and Δ w represents the width difference of two adjacent layers of sub-paths in the blurring path.
In another possible implementation manner, determining the total number of layers of sub-paths in the blurring path corresponding to the path to be processed may include: and determining the total layer number of the sub-paths in the blurring path corresponding to the path to be processed as a first preset value. The first preset value may be a total number of layers of sub-paths in the default blurring path in the canvas element.
In another possible implementation manner, determining the total number of layers of sub-paths in the blurring path corresponding to the path to be processed may include: and determining the total layer number of the sub-paths in the virtualized path corresponding to the path to be processed according to the virtualized width corresponding to the path to be processed and a second preset value. The second preset value may be a width difference between two adjacent sub-paths in the default blurring path in the canvas element.
As an example of this implementation, a ratio of the blurring width corresponding to the to-be-processed path to the second preset value may be used as the total number of layers of the sub-paths in the blurring path corresponding to the to-be-processed path.
It should be noted that, if the total number of layers of the sub-paths in the virtualization path is determined according to the virtualization width, step S12 needs to be executed first, and then step S13 needs to be executed; if the total number of layers of sub-paths in the blurring path does not need to be determined according to the blurring width, step S12 may be performed first and step S13 may be performed second, or step S13 may be performed first and step S12 may be performed second.
In step S14, the widths of the sub-paths of the respective layers in the blurring path are determined according to the blurring width and the total number of layers.
In this embodiment, the distances between adjacent sub-paths in the blurring path may be the same or different, and are not limited herein.
In step S15, the transparency of each layer sub-path is determined based on the total number of layers.
It should be noted that the present embodiment does not limit the execution sequence of step S14 and step S15 as long as step S14 and step S15 are respectively executed after step S13 and before step S16. In other words, after step S13 is executed, step S15 may be executed first, and step S14 may be executed second, and step S14 may be executed first, and step S15 may be executed second.
In step S16, the respective layer sub-paths are superimposed to obtain a blurring path.
Fig. 3 is a schematic diagram illustrating a blurring path in a canvas element-based path blurring method according to an embodiment of the present disclosure. In fig. 3, the blurring width is 30 pixels, the total number of layers of sub-paths in the blurring path is 4, and the distance between sub-paths in adjacent layers is 10 pixels, i.e., the difference in width of sub-paths in adjacent layers is 20 pixels.
Fig. 4 is another schematic diagram illustrating a blurring path in a canvas element-based path blurring method according to an embodiment of the present disclosure. In fig. 4, the blurring width is 34 pixels, the total number of layers of sub-paths in the blurring path is 35, and the distance between sub-paths in adjacent layers is 1 pixel, that is, the difference in width of sub-paths in adjacent layers is 2 pixels.
As can be seen from fig. 3 and 4, when the blurring width is the same, the blurring effect is more natural as the total number of layers of the sub paths in the blurring path is larger. That is, in the case where the blurring width is the same, the smaller the distance between adjacent sub-paths, the more natural the blurring effect.
In this embodiment, the width of the path to be processed in the canvas of the canvas element is obtained, the virtualization width corresponding to the path to be processed is determined according to the width of the path to be processed, the total number of layers of sub-paths in the virtualization path corresponding to the path to be processed is determined, the width of each layer of sub-path in the virtualization path is determined according to the virtualization width and the total number of layers, the transparency of each layer of sub-path is determined according to the total number of layers, and each layer of sub-path is superimposed to obtain the virtualization path, so that the virtualization path is obtained by superimposing multiple layers of sub-paths with different widths and different transparencies, and thus the path can be virtualized in the canvas of the canvas element.
Fig. 5 shows an exemplary flowchart of step S12 of the canvas element-based path blurring method according to an embodiment of the present disclosure. As shown in fig. 5, step S12 may include step S121 and step S122.
In step S121, the width of the first-layer sub-path in the blurring path is determined according to the brush hardness corresponding to the path to be processed.
In this embodiment, the brush hardness may refer to the hardness of the brush that draws the path to be processed. The larger the brush hardness is, the lower the blurring degree of the path to be processed is; the smaller the brush hardness, the higher the degree of blurring of the to-be-processed path.
In this embodiment, the first-layer sub-path is a sub-path with the smallest width among the sub-paths of the respective layers of the blurring path.
In one possible implementation, equation 2 may be used to determine the first layerWidth w of the diameter1，
w1＝(h-1)3+1 the compound represented by the formula 2,
wherein h represents the brush hardness corresponding to the path to be processed.
In step S122, a blurring width corresponding to the path to be processed is determined according to the width of the path to be processed and the width of the first-layer sub-path.
Fig. 6 shows an exemplary flowchart of step S122 of the canvas element-based path blurring method according to an embodiment of the present disclosure. As shown in fig. 6, step S122 may include step S1221 and step S1222.
In step S1221, a first difference between the width of the path to be processed and the width of the first-layer sub-path is calculated.
Wherein the first difference represents a difference between a width of the path to be processed and a width of the first-layer sub-path.
In step S1222, the product of the first difference and the first coefficient is determined as the blurring width corresponding to the path to be processed.
Wherein the first coefficient may be a blurring width overflow coefficient. The first coefficient may be greater than 1. Since the area to be blurred corresponding to the path to be processed may exceed the width of the path to be processed, the product of the first difference and the first coefficient may be determined as the blurring width corresponding to the path to be processed.
For example, equation 4 may be used to determine the blurring width W corresponding to the path to be processedv，
Wv＝α×(W-w1) In the formula (4), the first and second groups,
wherein W represents the width of the path to be processed, W1Representing the width of the first layer sub-path and alpha representing the first coefficient.
In another possible implementation manner, the first difference may be determined as a blurring width corresponding to the path to be processed. For example, equation 5 may be used to determine the blurring width W corresponding to the path to be processedv，
Wv＝W-w1In the formula 5, the first step is,
wherein W represents the width of the path to be processed, W1Representing the width of the first layer sub-path.
Fig. 7 shows an exemplary flowchart of step S15 of the canvas element-based path blurring method according to an embodiment of the present disclosure. As shown in fig. 7, step S15 may include step S151 and step S152.
In step S151, the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after superposition is determined according to the transparency of the first layer sub-path and the total number of layers, where i is a positive integer.
In a possible implementation manner, determining the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after being superimposed according to the transparency of the first layer sub-path and the total number of layers includes: determining the transparency C of the i-th layer sub-path and the i + 1-th layer sub-path after being superposed by adopting the formula 1i(i+1)，
Wherein G represents the transparency of the first layer sub-path, G is greater than or equal to 0 and less than 1, and D represents the total number of layers.
For example, the transparency of the first layer sub-path is 0, i.e., the first layer sub-path is opaque.
In step S152, the transparency of the i +1 th sub-path is determined according to the transparency of the i +1 th sub-path superimposed on the i +1 th sub-path and the transparency of the i +1 th sub-path.
In this embodiment, the width of the i +1 th sub-path is greater than the width of the i-th sub-path, and the transparency of the i +1 th sub-path is greater than the transparency of the i-th sub-path. The transparency of each layer sub-path is less than 1. In this embodiment, a transparency of 0 means complete opacity, and a transparency of 1 means complete transparency.
In a possible implementation manner, determining the transparency of the i +1 th layer sub-path according to the transparency of the i +1 th layer sub-path after the i +1 th layer sub-path is superimposed on the transparency of the i +1 th layer sub-path includes: according to Ci(i+1)＝1-(1-Ai)(1-Ai+1) Determining the transparency A of the i +1 th layer sub-pathi+1Wherein, Ci(i+1)Represents the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after being superposed, AiIndicating the transparency of the i-th layer sub-path.
Fig. 8 shows a block diagram of a canvas element-based path blurring apparatus according to an embodiment of the present disclosure. As shown in fig. 8, the apparatus includes: an obtaining module 81, configured to obtain a width of a path to be processed in a canvas of a canvas element; a first determining module 82, configured to determine a blurring width corresponding to the path to be processed according to the width of the path to be processed; a second determining module 83, configured to determine a total number of layers of sub paths in the blurring path corresponding to the path to be processed; a third determining module 84, configured to determine the width of each sub-path in the virtualization path according to the virtualization width and the total number of layers; a fourth determining module 85, configured to determine, according to the total number of layers, transparency of each layer of sub-paths; and the superposition module 86 is used for superposing the sub-paths of each layer to obtain a virtualized path.
Fig. 9 shows an exemplary block diagram of a canvas element-based path blurring apparatus according to an embodiment of the present disclosure. As shown in fig. 9:
in one possible implementation, the first determining module 82 includes: the first determining submodule 821 is configured to determine, according to the brush hardness corresponding to the path to be processed, a width of a first-layer sub-path in the blurring path; the second determining submodule 822 is configured to determine a blurring width corresponding to the path to be processed according to the width of the path to be processed and the width of the first-layer sub-path.
In one possible implementation, the second determining submodule 822 includes: the calculating unit is used for calculating a first difference value between the width of the path to be processed and the width of the first layer sub-path; and the determining unit is used for determining the product of the first difference and the first coefficient as the blurring width corresponding to the path to be processed.
In one possible implementation, the second determining module 83 is configured to: and determining the total layer number corresponding to the path to be processed according to the virtualization width corresponding to the path to be processed and the width difference of two adjacent layers of sub-paths in the virtualization path.
In one possible implementation, the fourth determining module 85 includes: a third determining sub-module 851, configured to determine, according to the transparency of the first layer sub-path and the total number of layers, the transparency after the i-th layer sub-path and the i + 1-th layer sub-path are superimposed, where i is a positive integer; the fourth determining sub-module 852 is configured to determine the transparency of the i +1 th layer sub-path according to the transparency of the i +1 th layer sub-path after the i +1 th layer sub-path is superimposed on the transparency of the i +1 th layer sub-path.
In one possible implementation, the third determining submodule 851 is configured to: determining the transparency C of the i-th layer sub-path and the i + 1-th layer sub-path after being superposed by adopting the formula 1i(i+1)，
Wherein G represents the transparency of the first layer sub-path, G is greater than or equal to 0 and less than 1, and D represents the total number of layers.
In one possible implementation, the fourth determining submodule 852 is configured to: according to Ci(i+1)＝1-(1-Ai)(1-Ai+1) Determining the transparency A of the i +1 th layer sub-pathi+1Wherein, Ci(i+1)Represents the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after being superposed, AiIndicating the transparency of the i-th layer sub-path.
In this embodiment, the width of the path to be processed in the canvas of the canvas element is obtained, the virtualization width corresponding to the path to be processed is determined according to the width of the path to be processed, the total number of layers of sub-paths in the virtualization path corresponding to the path to be processed is determined, the width of each layer of sub-path in the virtualization path is determined according to the virtualization width and the total number of layers, the transparency of each layer of sub-path is determined according to the total number of layers, and each layer of sub-path is superimposed to obtain the virtualization path, so that the virtualization path is obtained by superimposing multiple layers of sub-paths with different widths and different transparencies, and thus the path can be virtualized in the canvas of the canvas element.
Fig. 10 is a block diagram illustrating an apparatus 800 for path blurring of canvas elements, according to an example embodiment. For example, the apparatus 800 may be a mobile phone, a computer, a digital broadcast terminal, a messaging device, a game console, a tablet device, a medical device, an exercise device, a personal digital assistant, and the like.
Referring to fig. 10, the apparatus 800 may include one or more of the following components: processing component 802, memory 804, power component 806, multimedia component 808, audio component 810, input/output (I/O) interface 812, sensor component 814, and communication component 816.
The processing component 802 generally controls overall operation of the device 800, such as operations associated with display, telephone calls, data communications, camera operations, and recording operations. The processing components 802 may include one or more processors 820 to execute instructions to perform all or a portion of the steps of the methods described above. Further, the processing component 802 can include one or more modules that facilitate interaction between the processing component 802 and other components. For example, the processing component 802 can include a multimedia module to facilitate interaction between the multimedia component 808 and the processing component 802.
The memory 804 is configured to store various types of data to support operations at the apparatus 800. Examples of such data include instructions for any application or method operating on device 800, contact data, phonebook data, messages, pictures, videos, and so forth. The memory 804 may be implemented by any type or combination of volatile or non-volatile memory devices such as Static Random Access Memory (SRAM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), read-only memory (ROM), magnetic memory, flash memory, magnetic or optical disks.
The multimedia component 808 includes a screen that provides an output interface between the device 800 and a user. In some embodiments, the screen may include a Liquid Crystal Display (LCD) and a Touch Panel (TP). If the screen includes a touch panel, the screen may be implemented as a touch screen to receive an input signal from a user. The touch panel includes one or more touch sensors to sense touch, slide, and gestures on the touch panel. The touch sensor may not only sense the boundary of a touch or slide action, but also detect the duration and pressure associated with the touch or slide operation. In some embodiments, the multimedia component 808 includes a front facing camera and/or a rear facing camera. The front camera and/or the rear camera may receive external multimedia data when the device 800 is in an operating mode, such as a shooting mode or a video mode. Each front camera and rear camera may be a fixed optical lens system or have a focal length and optical zoom capability.
The audio component 810 is configured to output and/or input audio signals. For example, the audio component 810 includes a Microphone (MIC) configured to receive external audio signals when the apparatus 800 is in an operational mode, such as a call mode, a recording mode, and a voice recognition mode. The received audio signals may further be stored in the memory 804 or transmitted via the communication component 816. In some embodiments, audio component 810 also includes a speaker for outputting audio signals.
The I/O interface 812 provides an interface between the processing component 802 and peripheral interface modules, which may be keyboards, click wheels, buttons, etc. These buttons may include, but are not limited to: a home button, a volume button, a start button, and a lock button.
The sensor assembly 814 includes one or more sensors for providing various aspects of state assessment for the device 800. For example, the sensor assembly 814 may detect the open/closed status of the device 800, the relative positioning of components, such as a display and keypad of the device 800, the sensor assembly 814 may also detect a change in the position of the device 800 or a component of the device 800, the presence or absence of user contact with the device 800, the orientation or acceleration/deceleration of the device 800, and a change in the temperature of the device 800. Sensor assembly 814 may include a proximity sensor configured to detect the presence of a nearby object without any physical contact. The sensor assembly 814 may also include a light sensor, such as a CMOS or CCD image sensor, for use in imaging applications. In some embodiments, the sensor assembly 814 may also include an acceleration sensor, a gyroscope sensor, a magnetic sensor, a pressure sensor, or a temperature sensor.
The communication component 816 is configured to facilitate communications between the apparatus 800 and other devices in a wired or wireless manner. The device 800 may access a wireless network based on a communication standard, such as WiFi, 2G or 3G, or a combination thereof. In an exemplary embodiment, the communication component 816 receives a broadcast signal or broadcast related information from an external broadcast management system via a broadcast channel. In an exemplary embodiment, the communication component 816 further includes a Near Field Communication (NFC) module to facilitate short-range communications. For example, the NFC module may be implemented based on Radio Frequency Identification (RFID) technology, infrared data association (IrDA) technology, Ultra Wideband (UWB) technology, Bluetooth (BT) technology, and other technologies.
In an exemplary embodiment, the apparatus 800 may be implemented by one or more Application Specific Integrated Circuits (ASICs), Digital Signal Processors (DSPs), Digital Signal Processing Devices (DSPDs), Programmable Logic Devices (PLDs), Field Programmable Gate Arrays (FPGAs), controllers, micro-controllers, microprocessors or other electronic components for performing the above-described methods.
In an exemplary embodiment, a non-transitory computer-readable storage medium, such as the memory 804, is also provided that includes computer program instructions executable by the processor 820 of the device 800 to perform the above-described methods.
The present disclosure may be systems, methods, and/or computer program products. The computer program product may include a computer-readable storage medium having computer-readable program instructions embodied thereon for causing a processor to implement various aspects of the present disclosure.
The computer readable storage medium may be a tangible device that can hold and store the instructions for use by the instruction execution device. The computer readable storage medium may be, for example, but not limited to, an electronic memory device, a magnetic memory device, an optical memory device, an electromagnetic memory device, a semiconductor memory device, or any suitable combination of the foregoing. More specific examples (a non-exhaustive list) of the computer readable storage medium would include the following: a portable computer diskette, a hard disk, a Random Access Memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), a Static Random Access Memory (SRAM), a portable compact disc read-only memory (CD-ROM), a Digital Versatile Disc (DVD), a memory stick, a floppy disk, a mechanical coding device, such as punch cards or in-groove projection structures having instructions stored thereon, and any suitable combination of the foregoing. Computer-readable storage media as used herein is not to be construed as transitory signals per se, such as radio waves or other freely propagating electromagnetic waves, electromagnetic waves propagating through a waveguide or other transmission medium (e.g., optical pulses through a fiber optic cable), or electrical signals transmitted through electrical wires.
The computer-readable program instructions described herein may be downloaded from a computer-readable storage medium to a respective computing/processing device, or to an external computer or external storage device via a network, such as the internet, a local area network, a wide area network, and/or a wireless network. The network may include copper transmission cables, fiber optic transmission, wireless transmission, routers, firewalls, switches, gateway computers and/or edge servers. The network adapter card or network interface in each computing/processing device receives computer-readable program instructions from the network and forwards the computer-readable program instructions for storage in a computer-readable storage medium in the respective computing/processing device.
The computer program instructions for carrying out operations of the present disclosure may be assembler instructions, Instruction Set Architecture (ISA) instructions, machine-related instructions, microcode, firmware instructions, state setting data, or source or object code written in any combination of one or more programming languages, including an object oriented programming language such as Smalltalk, C + + or the like and conventional procedural programming languages, such as the "C" programming language or similar programming languages. The computer-readable program instructions may execute entirely on the user's computer, partly on the user's computer, as a stand-alone software package, partly on the user's computer and partly on a remote computer or entirely on the remote computer or server. In the case of a remote computer, the remote computer may be connected to the user's computer through any type of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or the connection may be made to an external computer (for example, through the Internet using an Internet service provider). In some embodiments, the electronic circuitry that can execute the computer-readable program instructions implements aspects of the present disclosure by utilizing the state information of the computer-readable program instructions to personalize the electronic circuitry, such as a programmable logic circuit, a Field Programmable Gate Array (FPGA), or a Programmable Logic Array (PLA).
Various aspects of the present disclosure are described herein with reference to flowchart illustrations and/or block diagrams of methods, apparatus (systems) and computer program products according to embodiments of the disclosure. It will be understood that each block of the flowchart illustrations and/or block diagrams, and combinations of blocks in the flowchart illustrations and/or block diagrams, can be implemented by computer-readable program instructions.
These computer-readable program instructions may be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, create means for implementing the functions/acts specified in the flowchart and/or block diagram block or blocks. These computer-readable program instructions may also be stored in a computer-readable storage medium that can direct a computer, programmable data processing apparatus, and/or other devices to function in a particular manner, such that the computer-readable medium storing the instructions comprises an article of manufacture including instructions which implement the function/act specified in the flowchart and/or block diagram block or blocks.
The computer readable program instructions may also be loaded onto a computer, other programmable data processing apparatus, or other devices to cause a series of operational steps to be performed on the computer, other programmable apparatus or other devices to produce a computer implemented process such that the instructions which execute on the computer, other programmable apparatus or other devices implement the functions/acts specified in the flowchart and/or block diagram block or blocks.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of instructions, which comprises one or more executable instructions for implementing the specified logical function(s). In some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams and/or flowchart illustration, and combinations of blocks in the block diagrams and/or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
Having described embodiments of the present disclosure, the foregoing description is intended to be exemplary, not exhaustive, and not limited to the disclosed embodiments. 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 embodiments. The terms used herein were chosen in order to best explain the principles of the embodiments, the practical application, or technical improvements to the techniques in the marketplace, or to enable others of ordinary skill in the art to understand the embodiments disclosed herein.
Claims (16)
1. A path blurring method based on canvas elements is characterized by comprising the following steps:
acquiring the width of a path to be processed in the canvas of the canvas element;
determining a blurring width corresponding to the path to be processed according to the width of the path to be processed;
determining the total number of layers of sub paths in the virtualized path corresponding to the path to be processed;
determining the width of each layer of sub-paths in the virtualization path according to the virtualization width and the total layer number;
determining the transparency of each layer of sub-paths according to the total number of layers;
and overlapping the sub-paths of each layer to obtain the virtual path.
2. The method of claim 1, wherein determining the blurring width corresponding to the path to be processed according to the width of the path to be processed comprises:
determining the width of a first layer of sub-paths in the blurring path according to the brush hardness corresponding to the path to be processed;
and determining the virtualization width corresponding to the path to be processed according to the width of the path to be processed and the width of the first-layer sub-path.
3. The method of claim 2, wherein determining the blurring width corresponding to the path to be processed according to the width of the path to be processed and the width of the first-layer sub-path comprises:
calculating a first difference value between the width of the path to be processed and the width of the first-layer sub-path;
and determining the product of the first difference and the first coefficient as the blurring width corresponding to the path to be processed.
4. The method of claim 1, wherein determining a total number of layers of sub-paths in the blurring path corresponding to the path to be processed comprises:
and determining the total layer number corresponding to the path to be processed according to the virtualization width corresponding to the path to be processed and the width difference of two adjacent layers of sub-paths in the virtualization path.
5. The method of claim 1, wherein determining the transparency of each layer sub-path based on the total number of layers comprises:
determining the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after superposition according to the transparency of the first layer sub-path and the total number of layers, wherein i is a positive integer;
and determining the transparency of the (i + 1) th layer sub-path according to the transparency of the (i) th layer sub-path after being superposed with the (i + 1) th layer sub-path and the transparency of the (i) th layer sub-path.
6. The method according to claim 5, wherein determining the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after superposition according to the transparency of the first layer sub-path and the total number of layers comprises:
determining the transparency C of the i-th layer sub-path and the i + 1-th layer sub-path after superposition by adopting the formula 1i(i+1)，
Wherein G represents the transparency of the first layer sub-path, G is greater than or equal to 0 and less than 1, and D represents the total number of layers.
7. The method according to claim 5 or 6, wherein determining the transparency of the i +1 th sub-path according to the transparency of the i +1 th sub-path after the i-th sub-path is superimposed on the i +1 th sub-path and the transparency of the i-th sub-path comprises:
according to Ci(i+1)＝1-(1-Ai)(1-Ai+1) Determining the transparency A of the i +1 th layer sub-pathi+1Wherein, Ci(i+1)Representing the transparency of the i-th layer sub-path and the i + 1-th layer sub-path after superposition, AiRepresenting the transparency of the i-th layer sub-path.
8. A canvas-based path blurring apparatus, comprising:
the obtaining module is used for obtaining the width of a path to be processed in the canvas of the canvas element;
a first determining module, configured to determine a blurring width corresponding to the path to be processed according to the width of the path to be processed;
a second determining module, configured to determine a total number of layers of sub-paths in the blurring path corresponding to the path to be processed;
a third determining module, configured to determine, according to the virtualization width and the total number of layers, a width of each layer of sub-paths in the virtualization path;
a fourth determining module, configured to determine, according to the total number of layers, a transparency of each layer of sub-paths;
and the superposition module is used for superposing the sub-paths of each layer to obtain the virtual path.
9. The apparatus of claim 8, wherein the first determining module comprises:
the first determining submodule is used for determining the width of a first layer of subpath in the blurring path according to the brush hardness corresponding to the path to be processed;
and the second determining submodule is used for determining the virtualization width corresponding to the path to be processed according to the width of the path to be processed and the width of the first layer of sub-paths.
10. The apparatus of claim 9, wherein the second determination submodule comprises:
the calculating unit is used for calculating a first difference value between the width of the path to be processed and the width of the first layer sub-path;
and the determining unit is used for determining the product of the first difference and the first coefficient as the blurring width corresponding to the path to be processed.
11. The apparatus of claim 8, wherein the second determining module is configured to:
and determining the total layer number corresponding to the path to be processed according to the virtualization width corresponding to the path to be processed and the width difference of two adjacent layers of sub-paths in the virtualization path.
12. The apparatus of claim 8, wherein the fourth determining module comprises:
the third determining sub-module is used for determining the transparency of the ith layer of sub-path and the (i + 1) th layer of sub-path after superposition according to the transparency of the first layer of sub-path and the total number of layers, wherein i is a positive integer;
and the fourth determining sub-module is used for determining the transparency of the i +1 th layer sub-path according to the transparency of the i +1 th layer sub-path after the i +1 th layer sub-path is superposed and the transparency of the i +1 th layer sub-path.
13. The apparatus of claim 12, wherein the third determination submodule is configured to:
determining the transparency C of the i-th layer sub-path and the i + 1-th layer sub-path after superposition by adopting the formula 1i(i+1)，
Wherein G represents the transparency of the first layer sub-path, G is greater than or equal to 0 and less than 1, and D represents the total number of layers.
14. The apparatus of claim 12 or 13, wherein the fourth determination submodule is configured to:
according to Ci(i+1)＝1-(1-Ai)(1-Ai+1) Determining the transparency A of the i +1 th layer sub-pathi+1Wherein, Ci(i+1)Representing the i-th layer sub-path superimposed with the i + 1-th layer sub-pathTransparency, AiRepresenting the transparency of the i-th layer sub-path.
15. A canvas-based path blurring apparatus, comprising:
a processor;
a memory for storing processor-executable instructions;
wherein the processor is configured to perform the method of any one of claims 1 to 7.
16. A non-transitory computer readable storage medium having computer program instructions stored thereon, wherein the computer program instructions, when executed by a processor, implement the method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810259338.7A CN110569453B (en) | 2018-03-27 | 2018-03-27 | Path blurring method and device based on canvas element |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810259338.7A CN110569453B (en) | 2018-03-27 | 2018-03-27 | Path blurring method and device based on canvas element |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110569453A CN110569453A (en) | 2019-12-13 |
| CN110569453B true CN110569453B (en) | 2021-10-15 |
Family
ID=68772437
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810259338.7A Active CN110569453B (en) | 2018-03-27 | 2018-03-27 | Path blurring method and device based on canvas element |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110569453B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113656736A (en) * | 2021-08-19 | 2021-11-16 | 上海哔哩哔哩科技有限公司 | Data processing method and device |
Family Cites Families (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101321240B (en) * | 2008-06-25 | 2010-06-09 | 华为技术有限公司 | Method and device for multi-drawing layer stacking |
| US9223548B2 (en) * | 2008-09-15 | 2015-12-29 | Apple Inc. | Method and apparatus for providing an application canvas framework |
| US8479106B2 (en) * | 2009-02-27 | 2013-07-02 | Research In Motion Limited | Method and device to simplify message composition |
| CN101794189A (en) * | 2009-09-22 | 2010-08-04 | 俞长根 | Method for displaying image |
| CN103092463B (en) * | 2012-12-27 | 2015-11-18 | 锐达互动科技股份有限公司 | The implementation method that mouse wave is floated followed by button based on transparent form |
| KR20150026565A (en) * | 2013-09-03 | 2015-03-11 | 엘지전자 주식회사 | Mobile terminal and control method thereof |
| US20160328871A1 (en) * | 2015-05-05 | 2016-11-10 | Mediatek Inc. | Graphics system and associated method for displaying blended image having overlay image layers |
| CN106201212B (en) * | 2016-07-19 | 2019-05-03 | 厦门美图移动科技有限公司 | A kind of generation method of application icon, device and mobile terminal |
| CN106775201A (en) * | 2016-11-23 | 2017-05-31 | 珠海市魅族科技有限公司 | Icon display method and device |
| CN106648337B (en) * | 2016-12-30 | 2020-02-07 | 智车优行科技（北京）有限公司 | Method and device for displaying content in display list and electronic equipment |
| CN106993091B (en) * | 2017-03-29 | 2020-05-12 | 维沃移动通信有限公司 | Image blurring method and mobile terminal |
| CN107231524A (en) * | 2017-05-31 | 2017-10-03 | 珠海市魅族科技有限公司 | Image pickup method and device, computer installation and computer-readable recording medium |
-
2018
- 2018-03-27 CN CN201810259338.7A patent/CN110569453B/en active Active
Also Published As
| Publication number | Publication date |
|---|---|
| CN110569453A (en) | 2019-12-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110647834B (en) | Human face and human hand correlation detection method and device, electronic equipment and storage medium | |
| CN110348537B (en) | Image processing method and device, electronic equipment and storage medium | |
| CN109816611B (en) | Video repair method and device, electronic equipment and storage medium | |
| CN109522910B (en) | Key point detection method and device, electronic equipment and storage medium | |
| CN110287874B (en) | Target tracking method and device, electronic equipment and storage medium | |
| CN107944409B (en) | Video analysis method and device capable of distinguishing key actions | |
| CN107948708B (en) | Bullet screen display method and device | |
| CN108093315B (en) | Video generation method and device | |
| CN107729522B (en) | Multimedia resource fragment intercepting method and device | |
| CN109819229B (en) | Image processing method and device, electronic equipment and storage medium | |
| CN106598739B (en) | video rendering method and device | |
| US11314965B2 (en) | Method and apparatus for positioning face feature points | |
| CN108900903B (en) | Video processing method and device, electronic equipment and storage medium | |
| CN110519655B (en) | Video editing method, device and storage medium | |
| CN106599191B (en) | User attribute analysis method and device | |
| CN108174269B (en) | Visual audio playing method and device | |
| CN111539410A (en) | Character recognition method and device, electronic equipment and storage medium | |
| CN110675355B (en) | Image reconstruction method and device, electronic equipment and storage medium | |
| CN112541971A (en) | Point cloud map construction method and device, electronic equipment and storage medium | |
| CN110569453B (en) | Path blurring method and device based on canvas element | |
| CN109635926B (en) | Attention feature acquisition method and device for neural network and storage medium | |
| CN110085066B (en) | Method and device for displaying reading information and electronic equipment | |
| CN110121115B (en) | Method and device for determining wonderful video clip | |
| CN111354444A (en) | Pathological section image display method and device, electronic equipment and storage medium | |
| CN110333903B (en) | Method and device for determining page loading duration |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20200509 Address after: 310052 room 508, floor 5, building 4, No. 699, Wangshang Road, Changhe street, Binjiang District, Hangzhou City, Zhejiang Province Applicant after: Alibaba (China) Co.,Ltd. Address before: 100080 Beijing Haidian District city Haidian street A Sinosteel International Plaza No. 8 block 5 layer A, C Applicant before: Youku network technology (Beijing) Co., Ltd |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |