CN113626021A - 一种嵌套画布蒙版判断html点击区域的方法及系统 - Google Patents

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

Info

Publication number
CN113626021A
CN113626021A CN202110915692.2A CN202110915692A CN113626021A CN 113626021 A CN113626021 A CN 113626021A CN 202110915692 A CN202110915692 A CN 202110915692A CN 113626021 A CN113626021 A CN 113626021A
Authority
CN
China
Prior art keywords
canvas
area
click
judging
html
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
Application number
CN202110915692.2A
Other languages
English (en)
Other versions
CN113626021B (zh
Inventor
刘意辉
柯思怡
饶东盛
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou V Solution Telecommunication Technology Co ltd
Original Assignee
Guangzhou V Solution Telecommunication Technology Co ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Guangzhou V Solution Telecommunication Technology Co ltd filed Critical Guangzhou V Solution Telecommunication Technology Co ltd
Priority to CN202110915692.2A priority Critical patent/CN113626021B/zh
Publication of CN113626021A publication Critical patent/CN113626021A/zh
Application granted granted Critical
Publication of CN113626021B publication Critical patent/CN113626021B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/34—Graphical or visual programming
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Human Computer Interaction (AREA)
  • Data Mining & Analysis (AREA)
  • Processing Or Creating Images (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

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

Description

一种嵌套画布蒙版判断html点击区域的方法及系统
技术领域
本发明涉及web前端技术领域，更具体地，涉及一种嵌套画布蒙版判断html点击区域的方法及系统。
背景技术
Html画布是一种用JavaScript绘制复杂图形的web前端技术，绘制出来的图形是位图，也叫栅格图，由像素点组成。我们可以为画布添加点击、悬浮交互事件，但无法直接做到在具体的图形上添加交互。是否点击了某图形往往通过点击的坐标及该图形在画布中的坐标位置判断。对于绘制的如矩形、圆形、线段等基础形状构成的图形，绘制时记录了相应坐标，我们依据坐标与坐标之间的关系可以方便快捷地判断点击的具体位置，但这种方式在针对画布中插入的图片时就显得力不从心了。图片中通常会包含许多形状不一的元素，用这些元素做交互体验的时候，很难直接通过坐标之间的关系直接判断点击是否落在某一图形上，因为无法用具体函数来描述这些元素，也无法单单使用函数得到组成这些元素的所有坐标。因此亟需一种判断画布中形状各异的图形点击区域的方法。
现有技术中，公开号为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绘图的浏览器性能，没有实现判断画布不同形状图形区域。
发明内容
本发明为克服上述现有技术中缺少判断画布中形状各异的图形点击区域方法的缺陷，提供一种嵌套画布蒙版判断html点击区域的方法及系统。
本发明的首要目的是为解决上述技术问题，本发明的技术方案如下：
本发明第一方面提供了一种嵌套画布蒙版判断html点击区域的方法，包括以下步骤：
S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
S2：利用html画布api构建颜色涂抹工具；
S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；
S5：移除透明画布，在真实画布上添加点击事件；
S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。
进一步地，所述透明画布有真实画布的尺寸和位置坐标相同。
进一步地，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。
进一步地，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。
进一步地，步骤S4的具体过程为：
通过获取真实画布的像素信息与透明画布涂抹标记区域的颜色对比，再借由透明画布起始点计算出涂抹颜色区域对应的坐标集合。
进一步地，在步骤S6中，在判定点击位置是否位于图形区域内之前，还包括在真实画布的图形上需要需添加点击事件，加载区域坐标集合。
本发明第二方面提供了一种嵌套画布蒙版判断html点击区域的系统，其特征在于，该系统包括：存储器、处理器，所述存储器中包括嵌套画布蒙版判断html点击区域的方法程序，所述嵌套画布蒙版判断html点击区域的方法程序被所述处理器执行时实现如下步骤：
S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
S2：利用html画布api构建颜色涂抹工具；
S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；
S5：移除透明画布，在真实画布上添加点击事件；
S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。
进一步地，所述透明画布有真实画布的尺寸和位置坐标相同。
进一步地，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。
进一步地，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。
与现有技术相比，本发明技术方案的有益效果是：
本发明通过在真实画布上覆盖透明画布，在透明画布表面描摹出点击区域，进而将描摹出的区域转化为区域坐标集合，移除透明画布，在真实画布上添加点击事件，进而通过比较点击位置坐标是否在区域坐标集合中来判断判定点击位置是否位于图形区域内，本发明对真实画布无任何干扰，同时可以丰富界面效果、增强用户操作体验、进而提升用户粘度。
附图说明
图1为本发明一种嵌套画布蒙版判断html点击区域的方法流程图。
图2为本发明一种嵌套画布蒙版判断html点击区域的系统框图。
具体实施方式
为了能够更清楚地理解本发明的上述目的、特征和优点，下面结合附图和具体实施方式对本发明进行进一步的详细描述。需要说明的是，在不冲突的情况下，本申请的实施例及实施例中的特征可以相互组合。
在下面的描述中阐述了很多具体细节以便于充分理解本发明，但是，本发明还可以采用其他不同于在此描述的其他方式来实施，因此，本发明的保护范围并不受下面公开的具体实施例的限制。
实施例1
如图1所示，本发明第一方面提供了一种嵌套画布蒙版判断html点击区域的方法，包括以下步骤：
S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
S2：利用html画布api构建颜色涂抹工具；
S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；
S5：移除透明画布，在真实画布上添加点击事件；
S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。
需要说明的是，在覆盖透明画布之前需要现在真实画布上绘制图形，所述透明画布与四边与真实画布的四边对齐，从而实现完全重合，从而保证透明画布的位置坐标才能保证与真实画布的位置坐标一致，所述透明画布蒙版设置为透明其目的是通过画布蒙版可清晰查看到真实画布上需要添加点击事件的区域，以便使用涂抹工具描摹标记。
进一步地，所述透明画布有真实画布的尺寸和位置坐标相同。
需要说明的是，保持明画布有真实画布的尺寸和位置坐标相同便于两者对齐。
进一步地，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。
需要说明的是，利用html画布api构建颜色涂抹工具，实现涂抹和撤销涂抹的功能，便于在涂抹错误时进行撤销涂抹，从而保证涂抹区域的准确，同时自定义的设置方便根据实际的图形需要进行选择画笔和涂抹颜色，例如在在不同大小的图形上，则可以选择不同粗细的画笔。
进一步地，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。
需要说明的是，在不同区域选择不同的颜色便于区分。
进一步地，步骤S4的具体过程为：
通过获取真实画布的像素信息与透明画布涂抹标记区域的颜色对比，再借由透明画布起始点计算出涂抹颜色区域对应的坐标集合。
在本发明中，获取区域坐标集合过程可以通过Javascript编程实现，如下所示为一个具体的Javascript代码示例：
Figure BDA0003205445430000041
Figure BDA0003205445430000051
Figure BDA0003205445430000061
需要说明的是，Html画布是一种用JavaScript在网页上绘制复杂图形的web前端技术，绘制出来的图形是位图，也叫栅格图，由像素点组成，画布是一块矩形区域，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
进一步地，在步骤S6中，在判定点击位置是否位于图形区域内之前，还包括在真实画布的图形上需要需添加点击事件，加载点击区域坐标集合。
如图2所示，本发明第二方面提供了一种嵌套画布蒙版判断html点击区域的系统，其特征在于，该系统包括：存储器、处理器，所述存储器中包括嵌套画布蒙版判断html点击区域的方法程序，所述嵌套画布蒙版判断html点击区域的方法程序被所述处理器执行时实现如下步骤：
S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
S2：利用html画布api构建颜色涂抹工具；
S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；
S5：移除透明画布，在真实画布上添加点击事件；
S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。
进一步地，所述透明画布有真实画布的尺寸和位置坐标相同。
需要说明的是，保持明画布有真实画布的尺寸和位置坐标相同便于两者对齐。
进一步地，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。
需要说明的是，利用html画布api构建颜色涂抹工具，实现涂抹和撤销涂抹的功能，便于在涂抹错误时进行撤销涂抹，从而保证涂抹区域的准确，同时自定义的设置方便根据实际的图形需要进行选择画笔和涂抹颜色，例如在在不同大小的图形上，则可以选择不同粗细的画笔。
进一步地，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。需要说明的是，在不同区域选择不同的颜色便于区分。
需要说明的是，本发明方法与寻找图形边界，再通过点击位置坐标与图形边界坐标之间的关系判断点击是否位于图形上的方法有着本质的不同，核心是寻找组成点击区域的所有坐标信息，这些坐标通过数学函数模型是无法准确得到的，为了实现这种构想，借助了位图的像素信息来区分图形的区域，但由于点击区域图形与其它部分区域颜色可能存在大面积相同的情况，又引入了透明画布蒙版，用同一颜色描摹点击区域排除这种干扰，同时该操作是对画布蒙版进行，对真实画布无任何干扰，最终可实现于画布上添加任意点击区域。
本方法能应用于web前端画布中，通过一种行之有效的方法确定画布点击区域，为点击操作添加相应的交互，丰富界面效果、增强用户操作体验、提升用户粘度。
显然，本发明的上述实施例仅仅是为清楚地说明本发明所作的举例，而并非是对本发明的实施方式的限定。对于所属领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动。这里无需也无法对所有的实施方式予以穷举。凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明权利要求的保护范围之内。

Claims (10)

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点击区域的方法，其特征在于，在步骤S6中，在判定点击位置是否位于图形区域内之前，还包括在真实画布的图形上需要需添加点击事件，加载区域坐标集合。
7.一种嵌套画布蒙版判断html点击区域的系统，其特征在于，该系统包括：存储器、处理器，所述存储器中包括嵌套画布蒙版判断html点击区域的方法程序，所述嵌套画布蒙版判断html点击区域的方法程序被所述处理器执行时实现如下步骤：
S1：在真实画布上方覆盖一层透明画布，并保持透明画布四边与真实画布的四边对齐；
S2：利用html画布api构建颜色涂抹工具；
S3：利用颜色涂抹工具在透明画布表面描摹真实画布上需要添加点击事件的图形区域；
S4：将透明画布上描摹出的区域转化为区域坐标集合，并记录保存；
S5：移除透明画布，在真实画布上添加点击事件；
S6：获取点击信号，判断当前点击的位置坐标是否存在于记录的区域坐标集合中，若存在，则判定点击位置位于图形区域内，否则点击位置位于图形区域外。
8.根据权利要求7所述的一种嵌套画布蒙版判断html点击区域的系统，其特征在于，所述透明画布有真实画布的尺寸和位置坐标相同。
9.根据权利要求7所述的一种嵌套画布蒙版判断html点击区域的系统，其特征在于，所述颜色涂抹工具能够进行涂抹和撤销涂抹，所述颜色涂抹工具的画笔和涂抹颜色能够根据自定义设置。
10.根据权利要求8所述的一种嵌套画布蒙版判断html点击区域的系统，其特征在于，颜色涂抹工具在进行描摹时，对同一图形区域采用相同的颜色，对于不同的图形区域采用不同的颜色。
CN202110915692.2A 2021-08-10 2021-08-10 一种嵌套画布蒙版判断html点击区域的方法及系统 Active CN113626021B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110915692.2A CN113626021B (zh) 2021-08-10 2021-08-10 一种嵌套画布蒙版判断html点击区域的方法及系统

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110915692.2A CN113626021B (zh) 2021-08-10 2021-08-10 一种嵌套画布蒙版判断html点击区域的方法及系统

Publications (2)

Publication Number Publication Date
CN113626021A true CN113626021A (zh) 2021-11-09
CN113626021B CN113626021B (zh) 2022-06-21

Family

ID=78384179

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110915692.2A Active CN113626021B (zh) 2021-08-10 2021-08-10 一种嵌套画布蒙版判断html点击区域的方法及系统

Country Status (1)

Country Link
CN (1) CN113626021B (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110035651A1 (en) * 2006-02-24 2011-02-10 Paxson Dana W Apparatus and method for creating literary macrames
CN105760401A (zh) * 2014-12-19 2016-07-13 金蝶软件（中国）有限公司 基于移动终端的报表数据交互方法和系统
CN107221016A (zh) * 2016-03-22 2017-09-29 阿里巴巴集团控股有限公司 SVG格式的Path图形的处理方法及其装置

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US20110035651A1 (en) * 2006-02-24 2011-02-10 Paxson Dana W Apparatus and method for creating literary macrames
CN105760401A (zh) * 2014-12-19 2016-07-13 金蝶软件（中国）有限公司 基于移动终端的报表数据交互方法和系统
CN107221016A (zh) * 2016-03-22 2017-09-29 阿里巴巴集团控股有限公司 SVG格式的Path图形的处理方法及其装置

Also Published As

Publication number Publication date
CN113626021B (zh) 2022-06-21

Similar Documents

Publication Publication Date Title
CN103500066B (zh) 一种适用于触屏设备的截图装置和方法
US6031544A (en) Vector map planarization and trapping
CN111078035B (zh) 一种基于HTML5 Canvas的绘图方法
CN109409366A (zh) 基于角点检测的畸变图像校正方法及装置
CN107610131A (zh) 一种图像裁剪方法和图像裁剪装置
CN105843494A (zh) 一种实现区域屏幕截图的方法、装置和终端
US8615129B2 (en) Pattern separating extraction device, and pattern separating extraction method
CN109064525B (zh) 一种图片格式转换方法、装置、设备和存储介质
CN110490141B (zh) 一种填涂信息的识别方法、装置、终端及存储介质
Kim et al. Deep edge-aware interactive colorization against color-bleeding effects
CN106055295A (zh) 图片处理方法、图片绘制方法及装置
CN111949156A (zh) 书写装置的汉字书写测试方法及系统、书写装置
CN108337494A (zh) 一种投影设备的校准方法、装置、投影设备及终端设备
CN115439609A (zh) 基于地图服务的三维模型渲染方法、系统、设备及介质
CN113626021B (zh) 一种嵌套画布蒙版判断html点击区域的方法及系统
CN115690406A (zh) 背景替换方法、装置、设备及存储介质
JP2010028429A (ja) 画像処理装置、画像処理方法およびプログラム
US8497874B2 (en) Pixel snapping for anti-aliased rendering
CN116168192A (zh) 图像检测区域的确定方法、装置、电子设备及存储介质
JP3495159B2 (ja) 画像部品の隣接関係判定方法
CN115587999A (zh) 一种基于深度学习的n95口罩面脏污破损褶皱缺陷检测方法
CN114998262A (zh) 一种基于八分教学法的课堂脱机书法教学与评价系统
CN113393569A (zh) 一种基于距离优先策略的拟合方法及其应用
CN108268157A (zh) 一种应用于大型显示屏幕或投影屏幕的设备定位方法及装置
Puggelli et al. ARTE–augmented readability tactile exploration: the tactile bas-relief of Piazza San Francesco painting

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
GR01 Patent grant
GR01 Patent grant
EE01 Entry into force of recordation of patent licensing contract
EE01 Entry into force of recordation of patent licensing contract

Application publication date: 20211109

Assignee: Xinhe Technology (Guangzhou) Co.,Ltd.

Assignor: GUANGZHOU V-SOLUTION TELECOMMUNICATION TECHNOLOGY CO.,LTD.

Contract record no.: X2022990000628

Denomination of invention: A method and system for judging HTML click area by nested canvas mask

Granted publication date: 20220621

License type: Common License

Record date: 20220914