一种嵌套画布蒙版判断html点击区域的方法及系统技术方案

本发明专利技术公开了一种嵌套画布蒙版判断html点击区域的方法及系统，方法包括：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；利用html画布api构建颜色涂抹工具；利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；移除透明画布，在真实画布上添加点击事件；获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。本发明专利技术对真实画布无任何干扰，同时可以丰富界面效果、增强用户操作体验、进而提升用户粘度。进而提升用户粘度。进而提升用户粘度。

【技术实现步骤摘要】
一种嵌套画布蒙版判断html点击区域的方法及系统


[0001]本专利技术涉及web前端
，更具体地，涉及一种嵌套画布蒙版判断html点击区域的方法及系统。

技术介绍

[0002]Html画布是一种用JavaScript绘制复杂图形的web前端技术，绘制出来的图形是位图，也叫栅格图，由像素点组成。我们可以为画布添加点击、悬浮交互事件，但无法直接做到在具体的图形上添加交互。是否点击了某图形往往通过点击的坐标及该图形在画布中的坐标位置判断。对于绘制的如矩形、圆形、线段等基础形状构成的图形，绘制时记录了相应坐标，我们依据坐标与坐标之间的关系可以方便快捷地判断点击的具体位置，但这种方式在针对画布中插入的图片时就显得力不从心了。图片中通常会包含许多形状不一的元素，用这些元素做交互体验的时候，很难直接通过坐标之间的关系直接判断点击是否落在某一图形上，因为无法用具体函数来描述这些元素，也无法单单使用函数得到组成这些元素的所有坐标。因此亟需一种判断画布中形状各异的图形点击区域的方法。
[0003]现有技术中，公开号为CN112269575A中国专利技术专利，于2021年1月26日公开了一种canvas绘制动态二维场景的方法，该方法具体包括下述步骤；步骤1：确定绘制原点center，设定center.X和center.Y；步骤2：利用JavaScript获取当前浏览器的文档宽度和高度所占像素大小，即宽度winWidth和高度winHeight，然后根据需要设置画布的宽高canvasWidth和canvasHeight；步骤3：将div作为canvas的父容器，通过动态的方式将canvas元素添加到div中；步骤4：设置多个画布，其中一个画布设置为可视画布_realCanvas，其他画布设置为不可视画布_notVisibleCanvas1、_notVisibleCanvas2,
……
_notVisibleCanvasN；该方案通过构建静态和动态的不可视化画布并进行合成，其目的是提升canvas绘图的浏览器性能，没有实现判断画布不同形状图形区域。

技术实现思路

[0004]本专利技术为克服上述现有技术中缺少判断画布中形状各异的图形点击区域方法的缺陷，提供一种嵌套画布蒙版判断html点击区域的方法及系统。
[0005]本专利技术的首要目的是为解决上述技术问题，本专利技术的技术方案如下：
[0006]本专利技术第一方面提供了一种嵌套画布蒙版判断html点击区域的方法，包括以下步骤：
[0007]S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
[0008]S2：利用html画布api构建颜色涂抹工具；
[0009]S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
[0010]S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；
[0011]S5：移除透明画布，在真实画布上添加点击事件；
[0012]S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。
[0013]进一步地，所述透明画布有真实画布的尺寸和位置坐标相同。
[0014]进一步地，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。
[0015]进一步地，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。
[0016]进一步地，步骤S4的具体过程为：
[0017]通过获取真实画布的像素信息与透明画布涂抹标记区域的颜色对比，再借由透明画布起始点计算出涂抹颜色区域对应的坐标集合。
[0018]进一步地，在步骤S6中，在判定点击位置是否位于图形区域内之前，还包括在真实画布的图形上需要需添加点击事件，加载区域坐标集合。
[0019]本专利技术第二方面提供了一种嵌套画布蒙版判断html点击区域的系统，其特征在于，该系统包括：存储器、处理器，所述存储器中包括嵌套画布蒙版判断html点击区域的方法程序，所述嵌套画布蒙版判断html点击区域的方法程序被所述处理器执行时实现如下步骤：
[0020]S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
[0021]S2：利用html画布api构建颜色涂抹工具；
[0022]S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
[0023]S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；
[0024]S5：移除透明画布，在真实画布上添加点击事件；
[0025]S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。
[0026]进一步地，所述透明画布有真实画布的尺寸和位置坐标相同。
[0027]进一步地，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。
[0028]进一步地，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。
[0029]与现有技术相比，本专利技术技术方案的有益效果是：
[0030]本专利技术通过在真实画布上覆盖透明画布，在透明画布表面描摹出点击区域，进而将描摹出的区域转化为区域坐标集合，移除透明画布，在真实画布上添加点击事件，进而通过比较点击位置坐标是否在区域坐标集合中来判断判定点击位置是否位于图形区域内，本专利技术对真实画布无任何干扰，同时可以丰富界面效果、增强用户操作体验、进而提升用户粘度。
附图说明
[0031]图1为本专利技术一种嵌套画布蒙版判断html点击区域的方法流程图。
[0032]图2为本专利技术一种嵌套画布蒙版判断html点击区域的系统框图。
具体实施方式
[0033]为了能够更清楚地理解本专利技术的上述目的、特征和优点，下面结合附图和具体实施方式对本专利技术进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
[0034]在下面的描述中阐述了很多具体细节以便于充分理解本专利技术，但是，本专利技术还可以采用其他不同于在此描述的其他方式来实施，因此，本专利技术的保护范围并不受下面公开的具体实施例的限制。
[0035]实施例1
[0036]如图1所示，本专利技术第一方面提供了一种嵌套画布蒙版判断html点击区域的方法，包括以下步骤：
[0037]S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
[0038]S2：利用html画布api构建颜色涂抹工具；
[0039]S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
[本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种嵌套画布蒙版判断html点击区域的方法，其特征在于，包括以下步骤：S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；S2：利用html画布api构建颜色涂抹工具；S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；S5：移除透明画布，在真实画布上添加点击事件；S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。2.根据权利要求1所述的一种嵌套画布蒙版判断html点击区域的方法，其特征在于，所述透明画布有真实画布的尺寸和位置坐标相同。3.根据权利要求1所述的一种嵌套画布蒙版判断html点击区域的方法，其特征在于，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。4.根据权利要求1所述的一种嵌套画布蒙版判断html点击区域的方法，其特征在于，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。5.根据权利要求1所述的一种嵌套画布蒙版判断html点击区域的方法，其特征在于，步骤S4的具体过程为：通过获取真实画布的像素信息与透明画布涂抹标记区域的颜色对比，再借由透明画布起始点计算出涂抹颜色区域对应的坐标集合。6.根据权利要求1所述的一种嵌套画布蒙版判断html点击区域的方法，其特征在于，...

【专利技术属性】
技术研发人员：刘意辉，柯思怡，饶东盛，
申请(专利权)人：广州芯德通信科技股份有限公司，
类型：发明
国别省市：