CN110569453A - 基于canvas元素的路径虚化方法及装置 - Google Patents
基于canvas元素的路径虚化方法及装置 Download PDFInfo
- Publication number
- CN110569453A CN110569453A CN201810259338.7A CN201810259338A CN110569453A CN 110569453 A CN110569453 A CN 110569453A CN 201810259338 A CN201810259338 A CN 201810259338A CN 110569453 A CN110569453 A CN 110569453A
- 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.)
- Granted
Links
Landscapes
- User Interface Of Digital Computer (AREA)
Abstract
本公开涉及基于canvas元素的路径虚化方法及装置。该方法包括：获取canvas元素的画布中待处理路径的宽度；根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度；确定所述待处理路径对应的虚化路径中子路径的总层数；根据所述虚化宽度和所述总层数，确定所述虚化路径中各层子路径的宽度；根据所述总层数，确定所述各层子路径的透明度；叠加所述各层子路径，得到所述虚化路径。本公开通过不同宽度且不同透明度的多层子路径叠加得到虚化路径，从而能够实现在canvas元素的画布中对路径进行虚化。
Description
技术领域
本公开涉及信息技术领域，尤其涉及一种基于canvas元素的路径虚化方法及装置。
背景技术
Canvas元素是HTML5(HyperText Markup Language 5，超文本标记语言第5版本)中的元素。使用canvas元素，可以在网页上绘制图像。在canvas元素中，所有的图形都是以路径为基础的。Canvas元素中的路径是由canvas画布中的多个点依次相连而成的曲线。为了使canvas画布中路径与背景之间的过渡更加柔和，本公开的发明人提出了一种基于canvas元素的路径虚化方法及装置。
发明内容
有鉴于此，本公开提出了一种基于canvas元素的路径虚化方法及装置。
根据本公开的一方面，提供了一种基于canvas元素的路径虚化方法，包括：
获取canvas元素的画布中待处理路径的宽度；
根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度；
确定所述待处理路径对应的虚化路径中子路径的总层数；
根据所述虚化宽度和所述总层数，确定所述虚化路径中各层子路径的宽度；
根据所述总层数，确定所述各层子路径的透明度；
叠加所述各层子路径，得到所述虚化路径。
在一种可能的实现方式中，根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度，包括：
根据所述待处理路径对应的画笔硬度，确定所述虚化路径中的第一层子路径的宽度；
根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度。
在一种可能的实现方式中，根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度，包括：
计算所述待处理路径的宽度与所述第一层子路径的宽度的第一差值；
将所述第一差值与第一系数的乘积确定为所述待处理路径对应的虚化宽度。
在一种可能的实现方式中，确定所述待处理路径对应的虚化路径中子路径的总层数，包括：
根据所述待处理路径对应的虚化宽度，以及所述虚化路径中相邻两层子路径的宽度差，确定所述待处理路径对应的总层数。
在一种可能的实现方式中，根据所述总层数，确定所述各层子路径的透明度，包括：
根据第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，其中，i为正整数；
根据所述第i层子路径与所述第i+1层子路径叠加后的透明度，以及所述第i层子路径的透明度，确定所述第i+1层子路径的透明度。
在一种可能的实现方式中，根据所述第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，包括：
采用式1确定所述第i层子路径与所述第i+1层子路径叠加后的透明度Ci(i+1)，
其中，G表示所述第一层子路径的透明度，G大于或等于0且小于1，D表示所述总层数。
在一种可能的实现方式中，根据所述第i层子路径与所述第i+1层子路径叠加后的透明度，以及所述第i层子路径的透明度，确定所述第i+1层子路径的透明度，包括：
根据Ci(i+1)＝1-(1-Ai)(1-Ai+1)，确定所述第i+1层子路径的透明度Ai+1，其中，Ci(i+1)表示所述第i层子路径与所述第i+1层子路径叠加后的透明度，Ai表示所述第i层子路径的透明度。
根据本公开的另一方法，提供了一种基于canvas元素的路径虚化装置，包括：
获取模块，用于获取canvas元素的画布中待处理路径的宽度；
第一确定模块，用于根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度；
第二确定模块，用于确定所述待处理路径对应的虚化路径中子路径的总层数；
第三确定模块，用于根据所述虚化宽度和所述总层数，确定所述虚化路径中各层子路径的宽度；
第四确定模块，用于根据所述总层数，确定所述各层子路径的透明度；
叠加模块，用于叠加所述各层子路径，得到所述虚化路径。
在一种可能的实现方式中，所述第一确定模块包括：
第一确定子模块，用于根据所述待处理路径对应的画笔硬度，确定所述虚化路径中的第一层子路径的宽度；
第二确定子模块，用于根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度。
在一种可能的实现方式中，所述第二确定子模块包括：
计算单元，用于计算所述待处理路径的宽度与所述第一层子路径的宽度的第一差值；
确定单元，用于将所述第一差值与第一系数的乘积确定为所述待处理路径对应的虚化宽度。
在一种可能的实现方式中，所述第二确定模块用于：
根据所述待处理路径对应的虚化宽度，以及所述虚化路径中相邻两层子路径的宽度差，确定所述待处理路径对应的总层数。
在一种可能的实现方式中，所述第四确定模块包括：
第三确定子模块，用于根据第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，其中，i为正整数；
第四确定子模块，用于根据所述第i层子路径与所述第i+1层子路径叠加后的透明度，以及所述第i层子路径的透明度，确定所述第i+1层子路径的透明度。
在一种可能的实现方式中，所述第三确定子模块用于：
采用式1确定所述第i层子路径与所述第i+1层子路径叠加后的透明度Ci(i+1)，
其中，G表示所述第一层子路径的透明度，G大于或等于0且小于1，D表示所述总层数。
在一种可能的实现方式中，所述第四确定子模块用于：
根据Ci(i+1)＝1-(1-Ai)(1-Ai+1)，确定所述第i+1层子路径的透明度Ai+1，其中，Ci(i+1)表示所述第i层子路径与所述第i+1层子路径叠加后的透明度，Ai表示所述第i层子路径的透明度。
根据本公开的另一方面，提供了一种基于canvas元素的路径虚化装置，包括：处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为执行上述方法。
根据本公开的另一方面，提供了一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其中，所述计算机程序指令被处理器执行时实现上述方法。
根据本公开的各方面的基于canvas元素的路径虚化方法及装置通过获取canvas元素的画布中待处理路径的宽度，根据待处理路径的宽度，确定待处理路径对应的虚化宽度，确定待处理路径对应的虚化路径中子路径的总层数，根据虚化宽度和总层数确定虚化路径中各层子路径的宽度，根据总层数确定各层子路径的透明度，并叠加各层子路径得到虚化路径，由此通过不同宽度且不同透明度的多层子路径叠加得到虚化路径，从而能够实现在canvas元素的画布中对路径进行虚化。
根据下面参考附图对示例性实施例的详细说明，本公开的其它特征及方面将变得清楚。
附图说明
包含在说明书中并且构成说明书的一部分的附图与说明书一起示出了本公开的示例性实施例、特征和方面，并且用于解释本公开的原理。
图1示出根据本公开一实施例的基于canvas元素的路径虚化方法的流程图。
图2示出根据本公开一实施例的基于canvas元素的路径虚化方法中待处理路径的示意图。
图3示出根据本公开一实施例的基于canvas元素的路径虚化方法中虚化路径的示意图。
图4示出根据本公开一实施例的基于canvas元素的路径虚化方法中虚化路径的另一示意图。
图5示出根据本公开一实施例的基于canvas元素的路径虚化方法步骤S12的一示例性的流程图。
图6示出根据本公开一实施例的基于canvas元素的路径虚化方法步骤S122的一示例性的流程图。
图7示出根据本公开一实施例的基于canvas元素的路径虚化方法步骤S15的一示例性的流程图。
图8示出根据本公开一实施例的基于canvas元素的路径虚化装置的框图。
图9示出根据本公开一实施例的基于canvas元素的路径虚化装置的一示例性的框图。
图10是根据一示例性实施例示出的一种用于canvas元素的路径虚化的装置800的框图。
具体实施方式
以下将参考附图详细说明本公开的各种示例性实施例、特征和方面。附图中相同的附图标记表示功能相同或相似的元件。尽管在附图中示出了实施例的各种方面，但是除非特别指出，不必按比例绘制附图。
在这里专用的词“示例性”意为“用作例子、实施例或说明性”。这里作为“示例性”所说明的任何实施例不必解释为优于或好于其它实施例。
另外，为了更好的说明本公开，在下文的具体实施方式中给出了众多的具体细节。本领域技术人员应当理解，没有某些具体细节，本公开同样可以实施。在一些实例中，对于本领域技术人员熟知的方法、手段、元件和电路未作详细描述，以便于凸显本公开的主旨。
图1示出根据本公开一实施例的基于canvas元素的路径虚化方法的流程图。该方法可以应用于手机或者平板电脑等终端设备中。如图1所示，该方法包括步骤S11至步骤S16。
在步骤S11中，获取canvas元素的画布中待处理路径的宽度。
在canvas元素中，所有的图形都是以路径为基础的。Canvas元素中的路径是由canvas元素的画布中的多个点依次相连而成的曲线。路径可以为非封闭路径，也可以为封闭路径。其中，非封闭路径可以指首尾不相连的路径，封闭路径可以指首尾相连的路径。
在本实施例中，待处理路径可以为canvas元素的画布中已画出的路径，也可以指canvas元素的画布中尚未画出的路径。若待处理路径为canvas元素的画布中已画出的路径，则本实施例的基于canvas元素的路径虚化方法可以指对已画出的路径进行修改，使已画出的路径达到所需的虚化效果。若待处理路径为canvas元素的画布中未画出的路径，则本实施例的基于canvas元素的路径虚化方法可以指对canvas元素的画笔属性进行调整，使接下来画出的路径具有所需的虚化效果。
在本实施例中，待处理路径的宽度可以等于canvas元素的画笔直径。其中，canvas元素的画笔直径可以等于画笔中心与画笔边缘的距离的2倍。
图2示出根据本公开一实施例的基于canvas元素的路径虚化方法中待处理路径的示意图。在图2中，待处理路径的宽度为70像素。
在步骤S12中，根据待处理路径的宽度，确定待处理路径对应的虚化宽度。
其中，待处理路径对应的虚化宽度表示待处理路径对应的需要虚化的区域的宽度。
在一种可能的实现方式中，根据待处理路径的宽度，确定待处理路径对应的虚化宽度，可以包括：将待处理路径的宽度的R倍确定为待处理路径对应的虚化宽度。其中，R可以大于0且小于1。
在步骤S13中，确定待处理路径对应的虚化路径中子路径的总层数。
在一种可能的实现方式中，确定待处理路径对应的虚化路径中子路径的总层数，包括：根据待处理路径对应的虚化宽度，以及虚化路径中相邻两层子路径的宽度差，确定待处理路径对应的总层数。
在该实现方式中，可以根据式3确定待处理路径对应的总层数D，
其中，Wv表示待处理路径对应的虚化宽度，Δw表示虚化路径中相邻两层子路径的宽度差。
在另一种可能的实现方式中，确定待处理路径对应的虚化路径中子路径的总层数，可以包括：将待处理路径对应的虚化路径中子路径的总层数确定为第一预设值。其中，第一预设值可以为canvas元素中默认的虚化路径中子路径的总层数。
在另一种可能的实现方式中，确定待处理路径对应的虚化路径中子路径的总层数，可以包括：根据待处理路径对应的虚化宽度，以及第二预设值，确定待处理路径对应的虚化路径中子路径的总层数。其中，第二预设值可以为canvas元素中默认的虚化路径中相邻两层子路径的宽度差。
作为该实现方式的一个示例，可以将待处理路径对应的虚化宽度与第二预设值的比值作为待处理路径对应的虚化路径中子路径的总层数。
需要说明的是，若虚化路径中子路径的总层数根据虚化宽度确定，则需要先执行步骤S12、再执行步骤S13；若虚化路径中子路径的总层数不需要根据虚化宽度确定，则可以先执行步骤S12、再执行步骤S13，或者可以先执行步骤S13、再执行步骤S12。
在步骤S14中，根据虚化宽度和总层数，确定虚化路径中各层子路径的宽度。
在本实施例中，虚化路径中不同的相邻层子路径之间距离可以相同，也可以不同，在此不作限定。
在步骤S15中，根据总层数，确定各层子路径的透明度。
需要说明的是，本实施例不对步骤S14和步骤S15的执行顺序进行限定，只要步骤S14和步骤S15分别在步骤13之后执行、在步骤S16之前执行即可。换言之，在执行步骤S13之后，可以先执行步骤S15、再执行步骤S14，也可以先执行步骤S14、再执行步骤S15。
在步骤S16中，叠加各层子路径，得到虚化路径。
图3示出根据本公开一实施例的基于canvas元素的路径虚化方法中虚化路径的示意图。在图3中，虚化宽度为30像素，该虚化路径中子路径的总层数为4，相邻层子路径之间的距离为10像素，即，相邻层子路径的宽度差为20像素。
图4示出根据本公开一实施例的基于canvas元素的路径虚化方法中虚化路径的另一示意图。在图4中，虚化宽度为34像素，虚化路径中子路径的总层数为35，相邻层子路径之间的距离为1像素，即，相邻层子路径的宽度差为2像素。
由图3和图4可知，在虚化宽度相同的情况下，虚化路径中子路径的总层数越多，则虚化效果越自然。即，在虚化宽度相同的情况下，相邻层子路径之间的距离越小，则虚化效果越自然。
本实施例通过获取canvas元素的画布中待处理路径的宽度，根据待处理路径的宽度，确定待处理路径对应的虚化宽度，确定待处理路径对应的虚化路径中子路径的总层数，根据虚化宽度和总层数确定虚化路径中各层子路径的宽度，根据总层数确定各层子路径的透明度，并叠加各层子路径得到虚化路径，由此通过不同宽度且不同透明度的多层子路径叠加得到虚化路径，从而能够实现在canvas元素的画布中对路径进行虚化。
图5示出根据本公开一实施例的基于canvas元素的路径虚化方法步骤S12的一示例性的流程图。如图5所示，步骤S12可以包括步骤S121和步骤S122。
在步骤S121中，根据待处理路径对应的画笔硬度，确定虚化路径中的第一层子路径的宽度。
在本实施例中，画笔硬度可以指画待处理路径的笔刷的软硬程度。画笔硬度越大，则待处理路径的虚化程度越低；画笔硬度越小，则待处理路径的虚化程度越高。
在本实施例中，第一层子路径为虚化路径的各层子路径中宽度最小的子路径。
在一种可能的实现方式中，可以采用式2确定第一层路径的宽度w1，
w1＝(h-1)3+1 式2，
其中，h表示待处理路径对应的画笔硬度。
在步骤S122中，根据待处理路径的宽度，以及第一层子路径的宽度，确定待处理路径对应的虚化宽度。
图6示出根据本公开一实施例的基于canvas元素的路径虚化方法步骤S122的一示例性的流程图。如图6所示，步骤S122可以包括步骤S1221和步骤S1222。
在步骤S1221中，计算待处理路径的宽度与第一层子路径的宽度的第一差值。
其中，第一差值表示待处理路径的宽度与第一层子路径的宽度的差值。
在步骤S1222中，将第一差值与第一系数的乘积确定为待处理路径对应的虚化宽度。
其中，第一系数可以为虚化宽度溢出系数。第一系数可以大于1。由于待处理路径对应的需要虚化的区域可能会超出待处理路径的宽度，因此可以将第一差值与第一系数的乘积确定为待处理路径对应的虚化宽度。
例如，可以采用式4确定待处理路径对应的虚化宽度Wv，
Wv＝α×(W-w1) 式4，
其中，W表示待处理路径的宽度，w1表示第一层子路径的宽度，α表示第一系数。
在另一种可能的实现方式中，可以将第一差值确定为待处理路径对应的虚化宽度。例如，可以采用式5确定待处理路径对应的虚化宽度Wv，
Wv＝W-w1 式5，
其中，W表示待处理路径的宽度，w1表示第一层子路径的宽度。
图7示出根据本公开一实施例的基于canvas元素的路径虚化方法步骤S15的一示例性的流程图。如图7所示，步骤S15可以包括步骤S151和步骤S152。
在步骤S151中，根据第一层子路径的透明度以及总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，其中，i为正整数。
在一种可能的实现方式中，根据第一层子路径的透明度以及总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，包括：采用式1确定第i层子路径与第i+1层子路径叠加后的透明度Ci(i+1)，
其中，G表示第一层子路径的透明度，G大于或等于0且小于1，D表示总层数。
例如，第一层子路径的透明度为0，即，第一层子路径不透明。
在步骤S152中，根据第i层子路径与第i+1层子路径叠加后的透明度，以及第i层子路径的透明度，确定第i+1层子路径的透明度。
在本实施例中，第i+1层子路径的宽度大于第i层子路径的宽度，第i+1层子路径的透明度大于第i层子路径的透明度。各层子路径的透明度均小于1。在本实施例中，透明度为0表示完全不透明，透明度为1表示完全透明。
在一种可能的实现方式中，根据第i层子路径与第i+1层子路径叠加后的透明度，以及第i层子路径的透明度，确定第i+1层子路径的透明度，包括：根据Ci(i+1)＝1-(1-Ai)(1-Ai+1)，确定第i+1层子路径的透明度Ai+1，其中，Ci(i+1)表示第i层子路径与第i+1层子路径叠加后的透明度，Ai表示第i层子路径的透明度。
图8示出根据本公开一实施例的基于canvas元素的路径虚化装置的框图。如图8所示，该装置包括：获取模块81，用于获取canvas元素的画布中待处理路径的宽度；第一确定模块82，用于根据待处理路径的宽度，确定待处理路径对应的虚化宽度；第二确定模块83，用于确定待处理路径对应的虚化路径中子路径的总层数；第三确定模块84，用于根据虚化宽度和总层数，确定虚化路径中各层子路径的宽度；第四确定模块85，用于根据总层数，确定各层子路径的透明度；叠加模块86，用于叠加各层子路径，得到虚化路径。
图9示出根据本公开一实施例的基于canvas元素的路径虚化装置的一示例性的框图。如图9所示：
在一种可能的实现方式中，第一确定模块82包括：第一确定子模块821，用于根据待处理路径对应的画笔硬度，确定虚化路径中的第一层子路径的宽度；第二确定子模块822，用于根据待处理路径的宽度，以及第一层子路径的宽度，确定待处理路径对应的虚化宽度。
在一种可能的实现方式中，第二确定子模块822包括：计算单元，用于计算待处理路径的宽度与第一层子路径的宽度的第一差值；确定单元，用于将第一差值与第一系数的乘积确定为待处理路径对应的虚化宽度。
在一种可能的实现方式中，第二确定模块83用于：根据待处理路径对应的虚化宽度，以及虚化路径中相邻两层子路径的宽度差，确定待处理路径对应的总层数。
在一种可能的实现方式中，第四确定模块85包括：第三确定子模块851，用于根据第一层子路径的透明度以及总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，其中，i为正整数；第四确定子模块852，用于根据第i层子路径与第i+1层子路径叠加后的透明度，以及第i层子路径的透明度，确定第i+1层子路径的透明度。
在一种可能的实现方式中，第三确定子模块851用于：采用式1确定第i层子路径与第i+1层子路径叠加后的透明度Ci(i+1)，
其中，G表示第一层子路径的透明度，G大于或等于0且小于1，D表示总层数。
在一种可能的实现方式中，第四确定子模块852用于：根据Ci(i+1)＝1-(1-Ai)(1-Ai+1)，确定第i+1层子路径的透明度Ai+1，其中，Ci(i+1)表示第i层子路径与第i+1层子路径叠加后的透明度，Ai表示第i层子路径的透明度。
本实施例通过获取canvas元素的画布中待处理路径的宽度，根据待处理路径的宽度，确定待处理路径对应的虚化宽度，确定待处理路径对应的虚化路径中子路径的总层数，根据虚化宽度和总层数确定虚化路径中各层子路径的宽度，根据总层数确定各层子路径的透明度，并叠加各层子路径得到虚化路径，由此通过不同宽度且不同透明度的多层子路径叠加得到虚化路径，从而能够实现在canvas元素的画布中对路径进行虚化。
图10是根据一示例性实施例示出的一种用于canvas元素的路径虚化的装置800的框图。例如，装置800可以是移动电话，计算机，数字广播终端，消息收发设备，游戏控制台，平板设备，医疗设备，健身设备，个人数字助理等。
参照图10，装置800可以包括以下一个或多个组件：处理组件802，存储器804，电源组件806，多媒体组件808，音频组件810，输入/输出(I/O)的接口812，传感器组件814，以及通信组件816。
处理组件802通常控制装置800的整体操作，诸如与显示，电话呼叫，数据通信，相机操作和记录操作相关联的操作。处理组件802可以包括一个或多个处理器820来执行指令，以完成上述的方法的全部或部分步骤。此外，处理组件802可以包括一个或多个模块，便于处理组件802和其他组件之间的交互。例如，处理组件802可以包括多媒体模块，以方便多媒体组件808和处理组件802之间的交互。
存储器804被配置为存储各种类型的数据以支持在装置800的操作。这些数据的示例包括用于在装置800上操作的任何应用程序或方法的指令，联系人数据，电话簿数据，消息，图片，视频等。存储器804可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。
电源组件806为装置800的各种组件提供电力。电源组件806可以包括电源管理***，一个或多个电源，及其他与为装置800生成、管理和分配电力相关联的组件。
多媒体组件808包括在所述装置800和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。在一些实施例中，多媒体组件808包括一个前置摄像头和/或后置摄像头。当装置800处于操作模式，如拍摄模式或视频模式时，前置摄像头和/或后置摄像头可以接收外部的多媒体数据。每个前置摄像头和后置摄像头可以是一个固定的光学透镜***或具有焦距和光学变焦能力。
音频组件810被配置为输出和/或输入音频信号。例如，音频组件810包括一个麦克风(MIC)，当装置800处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器804或经由通信组件816发送。在一些实施例中，音频组件810还包括一个扬声器，用于输出音频信号。
I/O接口812为处理组件802和***接口模块之间提供接口，上述***接口模块可以是键盘，点击轮，按钮等。这些按钮可包括但不限于：主页按钮、音量按钮、启动按钮和锁定按钮。
传感器组件814包括一个或多个传感器，用于为装置800提供各个方面的状态评估。例如，传感器组件814可以检测到装置800的打开/关闭状态，组件的相对定位，例如所述组件为装置800的显示器和小键盘，传感器组件814还可以检测装置800或装置800一个组件的位置改变，用户与装置800接触的存在或不存在，装置800方位或加速/减速和装置800的温度变化。传感器组件814可以包括接近传感器，被配置用来在没有任何的物理接触时检测附近物体的存在。传感器组件814还可以包括光传感器，如CMOS或CCD图像传感器，用于在成像应用中使用。在一些实施例中，该传感器组件814还可以包括加速度传感器，陀螺仪传感器，磁传感器，压力传感器或温度传感器。
通信组件816被配置为便于装置800和其他设备之间有线或无线方式的通信。装置800可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件816经由广播信道接收来自外部广播管理***的广播信号或广播相关信息。在一个示例性实施例中，所述通信组件816还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。
在示例性实施例中，装置800可以被一个或多个应用专用集成电路(ASIC)、数字信号处理器(DSP)、数字信号处理设备(DSPD)、可编程逻辑器件(PLD)、现场可编程门阵列(FPGA)、控制器、微控制器、微处理器或其他电子元件实现，用于执行上述方法。
在示例性实施例中，还提供了一种非易失性计算机可读存储介质，例如包括计算机程序指令的存储器804，上述计算机程序指令可由装置800的处理器820执行以完成上述方法。
本公开可以是***、方法和/或计算机程序产品。计算机程序产品可以包括计算机可读存储介质，其上载有用于使处理器实现本公开的各个方面的计算机可读程序指令。
计算机可读存储介质可以是可以保持和存储由指令执行设备使用的指令的有形设备。计算机可读存储介质例如可以是――但不限于――电存储设备、磁存储设备、光存储设备、电磁存储设备、半导体存储设备或者上述的任意合适的组合。计算机可读存储介质的更具体的例子(非穷举的列表)包括：便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、静态随机存取存储器(SRAM)、便携式压缩盘只读存储器(CD-ROM)、数字多功能盘(DVD)、记忆棒、软盘、机械编码设备、例如其上存储有指令的打孔卡或凹槽内凸起结构、以及上述的任意合适的组合。这里所使用的计算机可读存储介质不被解释为瞬时信号本身，诸如无线电波或者其他自由传播的电磁波、通过波导或其他传输媒介传播的电磁波(例如，通过光纤电缆的光脉冲)、或者通过电线传输的电信号。
这里所描述的计算机可读程序指令可以从计算机可读存储介质下载到各个计算/处理设备，或者通过网络、例如因特网、局域网、广域网和/或无线网下载到外部计算机或外部存储设备。网络可以包括铜传输电缆、光纤传输、无线传输、路由器、防火墙、交换机、网关计算机和/或边缘服务器。每个计算/处理设备中的网络适配卡或者网络接口从网络接收计算机可读程序指令，并转发该计算机可读程序指令，以供存储在各个计算/处理设备中的计算机可读存储介质中。
用于执行本公开操作的计算机程序指令可以是汇编指令、指令集架构(ISA)指令、机器指令、机器相关指令、微代码、固件指令、状态设置数据、或者以一种或多种编程语言的任意组合编写的源代码或目标代码，所述编程语言包括面向对象的编程语言—诸如Smalltalk、C++等，以及常规的过程式编程语言—诸如“C”语言或类似的编程语言。计算机可读程序指令可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络—包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。在一些实施例中，通过利用计算机可读程序指令的状态信息来个性化定制电子电路，例如可编程逻辑电路、现场可编程门阵列(FPGA)或可编程逻辑阵列(PLA)，该电子电路可以执行计算机可读程序指令，从而实现本公开的各个方面。
这里参照根据本公开实施例的方法、装置(***)和计算机程序产品的流程图和/或框图描述了本公开的各个方面。应当理解，流程图和/或框图的每个方框以及流程图和/或框图中各方框的组合，都可以由计算机可读程序指令实现。
这些计算机可读程序指令可以提供给通用计算机、专用计算机或其它可编程数据处理装置的处理器，从而生产出一种机器，使得这些指令在通过计算机或其它可编程数据处理装置的处理器执行时，产生了实现流程图和/或框图中的一个或多个方框中规定的功能/动作的装置。也可以把这些计算机可读程序指令存储在计算机可读存储介质中，这些指令使得计算机、可编程数据处理装置和/或其他设备以特定方式工作，从而，存储有指令的计算机可读介质则包括一个制造品，其包括实现流程图和/或框图中的一个或多个方框中规定的功能/动作的各个方面的指令。
也可以把计算机可读程序指令加载到计算机、其它可编程数据处理装置、或其它设备上，使得在计算机、其它可编程数据处理装置或其它设备上执行一系列操作步骤，以产生计算机实现的过程，从而使得在计算机、其它可编程数据处理装置、或其它设备上执行的指令实现流程图和/或框图中的一个或多个方框中规定的功能/动作。
附图中的流程图和框图显示了根据本公开的多个实施例的***、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段或指令的一部分，所述模块、程序段或指令的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个连续的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或动作的专用的基于硬件的***来实现，或者可以用专用硬件与计算机指令的组合来实现。
以上已经描述了本公开的各实施例，上述说明是示例性的，并非穷尽性的，并且也不限于所披露的各实施例。在不偏离所说明的各实施例的范围和精神的情况下，对于本技术领域的普通技术人员来说许多修改和变更都是显而易见的。本文中所用术语的选择，旨在最好地解释各实施例的原理、实际应用或对市场中的技术的技术改进，或者使本技术领域的其它普通技术人员能理解本文披露的各实施例。
Claims (16)
1.一种基于canvas元素的路径虚化方法，其特征在于，包括：
获取canvas元素的画布中待处理路径的宽度；
根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度；
确定所述待处理路径对应的虚化路径中子路径的总层数；
根据所述虚化宽度和所述总层数，确定所述虚化路径中各层子路径的宽度；
根据所述总层数，确定所述各层子路径的透明度；
叠加所述各层子路径，得到所述虚化路径。
2.根据权利要求1所述的方法，其特征在于，根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度，包括：
根据所述待处理路径对应的画笔硬度，确定所述虚化路径中的第一层子路径的宽度；
根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度。
3.根据权利要求2所述的方法，其特征在于，根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度，包括：
计算所述待处理路径的宽度与所述第一层子路径的宽度的第一差值；
将所述第一差值与第一系数的乘积确定为所述待处理路径对应的虚化宽度。
4.根据权利要求1所述的方法，其特征在于，确定所述待处理路径对应的虚化路径中子路径的总层数，包括：
根据所述待处理路径对应的虚化宽度，以及所述虚化路径中相邻两层子路径的宽度差，确定所述待处理路径对应的总层数。
5.根据权利要求1所述的方法，其特征在于，根据所述总层数，确定所述各层子路径的透明度，包括：
根据第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，其中，i为正整数；
根据所述第i层子路径与所述第i+1层子路径叠加后的透明度，以及所述第i层子路径的透明度，确定所述第i+1层子路径的透明度。
6.根据权利要求5所述的方法，其特征在于，根据所述第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，包括：
采用式1确定所述第i层子路径与所述第i+1层子路径叠加后的透明度Ci(i+1)，
其中，G表示所述第一层子路径的透明度，G大于或等于0且小于1，D表示所述总层数。
7.根据权利要求5或6所述的方法，其特征在于，根据所述第i层子路径与所述第i+1层子路径叠加后的透明度，以及所述第i层子路径的透明度，确定所述第i+1层子路径的透明度，包括：
根据Ci(i+1)＝1-(1-Ai)(1-Ai+1)，确定所述第i+1层子路径的透明度Ai+1，其中，Ci(i+1)表示所述第i层子路径与所述第i+1层子路径叠加后的透明度，Ai表示所述第i层子路径的透明度。
8.一种基于canvas元素的路径虚化装置，其特征在于，包括：
获取模块，用于获取canvas元素的画布中待处理路径的宽度；
第一确定模块，用于根据所述待处理路径的宽度，确定所述待处理路径对应的虚化宽度；
第二确定模块，用于确定所述待处理路径对应的虚化路径中子路径的总层数；
第三确定模块，用于根据所述虚化宽度和所述总层数，确定所述虚化路径中各层子路径的宽度；
第四确定模块，用于根据所述总层数，确定所述各层子路径的透明度；
叠加模块，用于叠加所述各层子路径，得到所述虚化路径。
9.根据权利要求8所述的装置，其特征在于，所述第一确定模块包括：
第一确定子模块，用于根据所述待处理路径对应的画笔硬度，确定所述虚化路径中的第一层子路径的宽度；
第二确定子模块，用于根据所述待处理路径的宽度，以及所述第一层子路径的宽度，确定所述待处理路径对应的虚化宽度。
10.根据权利要求9所述的装置，其特征在于，所述第二确定子模块包括：
计算单元，用于计算所述待处理路径的宽度与所述第一层子路径的宽度的第一差值；
确定单元，用于将所述第一差值与第一系数的乘积确定为所述待处理路径对应的虚化宽度。
11.根据权利要求8所述的装置，其特征在于，所述第二确定模块用于：
根据所述待处理路径对应的虚化宽度，以及所述虚化路径中相邻两层子路径的宽度差，确定所述待处理路径对应的总层数。
12.根据权利要求8所述的装置，其特征在于，所述第四确定模块包括：
第三确定子模块，用于根据第一层子路径的透明度以及所述总层数，确定第i层子路径与第i+1层子路径叠加后的透明度，其中，i为正整数；
第四确定子模块，用于根据所述第i层子路径与所述第i+1层子路径叠加后的透明度，以及所述第i层子路径的透明度，确定所述第i+1层子路径的透明度。
13.根据权利要求12所述的装置，其特征在于，所述第三确定子模块用于：
采用式1确定所述第i层子路径与所述第i+1层子路径叠加后的透明度Ci(i+1)，
其中，G表示所述第一层子路径的透明度，G大于或等于0且小于1，D表示所述总层数。
14.根据权利要求12或13所述的装置，其特征在于，所述第四确定子模块用于：
根据Ci(i+1)＝1-(1-Ai)(1-Ai+1)，确定所述第i+1层子路径的透明度Ai+1，其中，Ci(i+1)表示所述第i层子路径与所述第i+1层子路径叠加后的透明度，Ai表示所述第i层子路径的透明度。
15.一种基于canvas元素的路径虚化装置，其特征在于，包括：
处理器；
用于存储处理器可执行指令的存储器；
其中，所述处理器被配置为执行权利要求1至7中任意一项所述的方法。
16.一种非易失性计算机可读存储介质，其上存储有计算机程序指令，其特征在于，所述计算机程序指令被处理器执行时实现权利要求1至7中任意一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810259338.7A CN110569453B (zh) | 2018-03-27 | 2018-03-27 | 基于canvas元素的路径虚化方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810259338.7A CN110569453B (zh) | 2018-03-27 | 2018-03-27 | 基于canvas元素的路径虚化方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110569453A true CN110569453A (zh) | 2019-12-13 |
| CN110569453B CN110569453B (zh) | 2021-10-15 |
Family
ID=68772437
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810259338.7A Active CN110569453B (zh) | 2018-03-27 | 2018-03-27 | 基于canvas元素的路径虚化方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110569453B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113656736A (zh) * | 2021-08-19 | 2021-11-16 | 上海哔哩哔哩科技有限公司 | 数据处理方法及装置 |
Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101321240A (zh) * | 2008-06-25 | 2008-12-10 | 华为技术有限公司 | 多图层叠加的方法及其装置 |
| US20100070887A1 (en) * | 2008-09-15 | 2010-03-18 | Apple Inc. | Method and apparatus for providing an application canvas framework |
| CN101794189A (zh) * | 2009-09-22 | 2010-08-04 | 俞长根 | 图像显示方法 |
| CN103092463A (zh) * | 2012-12-27 | 2013-05-08 | 锐达互动科技股份有限公司 | 基于透明窗体的按钮跟随鼠标波浪式浮动的实现方法 |
| US20140325387A1 (en) * | 2009-02-27 | 2014-10-30 | Blackberry Limited | Method and device to simplify message composition |
| CN104423878A (zh) * | 2013-09-03 | 2015-03-18 | Lg电子株式会社 | 显示装置以及控制该显示装置的方法 |
| CN106127721A (zh) * | 2015-05-05 | 2016-11-16 | 联发科技股份有限公司 | 用于显示由叠加图像层合成的混合图像的图形***及方法 |
| CN106201212A (zh) * | 2016-07-19 | 2016-12-07 | 厦门美图移动科技有限公司 | 一种应用图标的生成方法、装置及移动终端 |
| CN106648337A (zh) * | 2016-12-30 | 2017-05-10 | 智车优行科技（北京）有限公司 | 显示展示列表中内容的方法和装置、电子设备 |
| CN106775201A (zh) * | 2016-11-23 | 2017-05-31 | 珠海市魅族科技有限公司 | 图标显示方法及装置 |
| CN106993091A (zh) * | 2017-03-29 | 2017-07-28 | 维沃移动通信有限公司 | 一种图像虚化方法及移动终端 |
| CN107231524A (zh) * | 2017-05-31 | 2017-10-03 | 珠海市魅族科技有限公司 | 拍摄方法及装置、计算机装置和计算机可读存储介质 |
-
2018
- 2018-03-27 CN CN201810259338.7A patent/CN110569453B/zh active Active
Patent Citations (12)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN101321240A (zh) * | 2008-06-25 | 2008-12-10 | 华为技术有限公司 | 多图层叠加的方法及其装置 |
| US20100070887A1 (en) * | 2008-09-15 | 2010-03-18 | Apple Inc. | Method and apparatus for providing an application canvas framework |
| US20140325387A1 (en) * | 2009-02-27 | 2014-10-30 | Blackberry Limited | Method and device to simplify message composition |
| CN101794189A (zh) * | 2009-09-22 | 2010-08-04 | 俞长根 | 图像显示方法 |
| CN103092463A (zh) * | 2012-12-27 | 2013-05-08 | 锐达互动科技股份有限公司 | 基于透明窗体的按钮跟随鼠标波浪式浮动的实现方法 |
| CN104423878A (zh) * | 2013-09-03 | 2015-03-18 | Lg电子株式会社 | 显示装置以及控制该显示装置的方法 |
| CN106127721A (zh) * | 2015-05-05 | 2016-11-16 | 联发科技股份有限公司 | 用于显示由叠加图像层合成的混合图像的图形***及方法 |
| CN106201212A (zh) * | 2016-07-19 | 2016-12-07 | 厦门美图移动科技有限公司 | 一种应用图标的生成方法、装置及移动终端 |
| CN106775201A (zh) * | 2016-11-23 | 2017-05-31 | 珠海市魅族科技有限公司 | 图标显示方法及装置 |
| CN106648337A (zh) * | 2016-12-30 | 2017-05-10 | 智车优行科技（北京）有限公司 | 显示展示列表中内容的方法和装置、电子设备 |
| CN106993091A (zh) * | 2017-03-29 | 2017-07-28 | 维沃移动通信有限公司 | 一种图像虚化方法及移动终端 |
| CN107231524A (zh) * | 2017-05-31 | 2017-10-03 | 珠海市魅族科技有限公司 | 拍摄方法及装置、计算机装置和计算机可读存储介质 |
Non-Patent Citations (1)
| Title |
|---|
| 李方方等: "基于jQuery Mobile的画图功能的设计与实现", 《电子技术与软件工程》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113656736A (zh) * | 2021-08-19 | 2021-11-16 | 上海哔哩哔哩科技有限公司 | 数据处理方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110569453B (zh) | 2021-10-15 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110647834B (zh) | 人脸和人手关联检测方法及装置、电子设备和存储介质 | |
| CN110348537B (zh) | 图像处理方法及装置、电子设备和存储介质 | |
| CN109816611B (zh) | 视频修复方法及装置、电子设备和存储介质 | |
| CN109522910B (zh) | 关键点检测方法及装置、电子设备和存储介质 | |
| CN110287874B (zh) | 目标追踪方法及装置、电子设备和存储介质 | |
| CN107944409B (zh) | 能够区分关键动作的视频分析方法及装置 | |
| CN107948708B (zh) | 弹幕展示方法及装置 | |
| CN108093315B (zh) | 视频生成方法及装置 | |
| CN107729522B (zh) | 多媒体资源片段截取方法及装置 | |
| US11314965B2 (en) | Method and apparatus for positioning face feature points | |
| CN106598739B (zh) | 视频渲染方法及装置 | |
| CN108900903B (zh) | 视频处理方法及装置、电子设备和存储介质 | |
| CN108174269B (zh) | 可视化音频播放方法及装置 | |
| CN110519655B (zh) | 视频剪辑方法、装置及存储介质 | |
| CN106599191B (zh) | 用户属性分析方法及装置 | |
| CN111539410A (zh) | 字符识别方法及装置、电子设备和存储介质 | |
| CN110675355A (zh) | 图像重建方法及装置、电子设备和存储介质 | |
| CN112541971A (zh) | 点云地图构建方法及装置、电子设备和存储介质 | |
| CN110085066B (zh) | 展示阅读信息的方法、装置及电子设备 | |
| CN110569453B (zh) | 基于canvas元素的路径虚化方法及装置 | |
| CN109635926B (zh) | 用于神经网络的注意力特征获取方法、装置及存储介质 | |
| CN110121115B (zh) | 精彩视频片段的确定方法及装置 | |
| CN111354444A (zh) | 病理切片图像的展示方法及装置、电子设备和存储介质 | |
| CN110333903B (zh) | 页面加载时长的确定方法及装置 | |
| CN111694571A (zh) | 编译方法及装置 |
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 |
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 |
|
| TA01 | Transfer of patent application right | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant |