CN113012260B - 一种在Canvas下交叉区域擦除的方法与终端 - Google Patents

Abstract

本发明公开了一种在Canvas下交叉区域擦除的方法与终端；本发明获取待擦除节点的待擦除区域；判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；对所述待擦除节点的待擦除区域进行擦除；对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制；本发明在Canvas画布上进行待擦除节点擦除后，对与待擦除节点有所交叉的关联节点进行交叉区域的重新绘制，从而保证了在Canvas画布上擦除节点时能够不破坏其他有交叉的节点的完整性，使周边区域内的图形或节点能够完整展示。

Description

一种在Canvas下交叉区域擦除的方法与终端

技术领域

本发明涉及计算机技术领域，特别涉及一种在Canvas下交叉区域擦除的方法与终端。

背景技术

在进行技术沉淀及思路验证的过程中，想要实现在一块Canvas画布上进行多次的打点操作。计划在一块800*800的画布上，通过随机生成节点的方式，每秒打印约十万个1*1的节点。为了优化展示效果，决定只展示最近的2000个节点，对之前的节点进行擦除操作，即打印第2001个节点时，将第1个节点擦除。由于节点之间绘制会存在覆盖和交叉，在进行节点擦除时，若待擦除的节点与其他节点存在交集，则进行的擦除会将其他节点与待擦除的节点的交叉部分一并擦除，从而破坏其他节点的完整性。

发明内容

本发明所要解决的技术问题是：提供一种在Canvas下交叉区域擦除的方法与终端，使在Canvas画布上擦除节点时不破坏有交叉的其他节点的完整性。

为了解决上述技术问题，本发明采用的技术方案为：

一种在Canvas下交叉区域擦除的方法，包括：

S1、获取待擦除节点的待擦除区域；

S2、判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；

S3、对所述待擦除节点的待擦除区域进行擦除；

S4、对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制。

为了解决上述技术问题，本发明采用的另一种技术方案为：

一种在Canvas下交叉区域擦除的终端，包括处理器、存储器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S1、获取待擦除节点的待擦除区域；

S2、判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；

S3、对所述待擦除节点的待擦除区域进行擦除；

S4、对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制。

本发明的有益效果在于：本发明在Canvas画布上进行待擦除节点擦除后，对与待擦除节点有所交叉的关联节点进行交叉区域的重新绘制，从而保证了在Canvas画布上擦除节点时能够不破坏其他有交叉的节点的完整性，使周边区域内的图形或节点能够完整展示。

附图说明

图1为本发明实施例的一种在Canvas下交叉区域擦除的方法的流程图；

图2为本发明实施例的一种在Canvas下交叉区域擦除的终端的结构图；

图3为本发明实施例的一种在Canvas下交叉区域擦除的方法的擦除前的效果示意图；

图4为本发明实施例的一种在Canvas下交叉区域擦除的方法的擦除后重绘前的效果示意图；

图5为本发明实施例的一种在Canvas下交叉区域擦除的方法的重绘后的效果示意图；

图6为本发明实施例的一种在Canvas下交叉区域擦除的方法的详细流程图；

标号说明：

1、一种在Canvas下交叉区域擦除的终端；2、处理器；3、存储器。

具体实施方式

为详细说明本发明的技术内容、所实现目的及效果，以下结合实施方式并配合附图予以说明。

请参照图1以及图3至图6，一种在Canvas下交叉区域擦除的方法，包括：

S1、获取待擦除节点的待擦除区域；

S2、判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；

S3、对所述待擦除节点的待擦除区域进行擦除；

S4、对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制。

从上述描述可知，本发明的有益效果在于：本发明在Canvas画布上进行待擦除节点擦除后，对与待擦除节点有所交叉的关联节点进行交叉区域的重新绘制，从而保证了在Canvas画布上擦除节点时能够不破坏其他有交叉的节点的完整性，使周边区域内的图形或节点能够完整展示。

进一步地，所述步骤S2具体为：

获取待擦除节点的坐标(x，y)、其余的每个节点的坐标(x1，y1)以及预设的节点宽度W和节点高度H，根据判断公式判断每个所述节点的所述节点区域是否与待擦除区域重叠，若是，则为关联节点，得到关联节点列表，所述判断公式为Math.abs(x-x1)<W&&Math.abs(y-y1)<H，其中，Math.abs表示绝对值，&&表示与运算；

所述步骤S4之前，还包括：

S31、获取预设的所述节点宽度W和节点高度H、所述关联节点列表以及对应每个关联节点的坐标(x1，y1)；

S32、比较所述待擦除节点的坐标与所述关联节点的坐标，将其中大的横坐标作为起始位置的横坐标，将其中小的纵坐标作为所述起始位置的纵坐标，得到所述起始位置；

S33、计算所述待重绘区域的所述宽度rw＝W-Math.abs(x1-x)；

S34、计算所述待重绘区域的所述高度rh＝H-Math.abs(y1-y)。

由上述描述可知，通过待擦除节点的顶点坐标与其他节点的顶点坐标的距离以及待擦除区域的宽度和高度来判断除待擦除节点之外的其余节点分别与待擦除节点之间是否有重叠的区域，能够准确不遗漏地得到关联节点列表；同时可以准确的计算出两者之间的待重绘区域，以保证后续的重绘能完整还原出其余节点。

进一步地，所述步骤S3具体为：

调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除；

所述步骤S4具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行区域重新绘制。

由上述描述可知，对待擦除节点的待擦除区域进行擦除以及对重叠区域的重新绘制都是调用Canvas的接口进行实现，更加的方便。

进一步地，所述调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除具体为：

执行ctx.clearRect(x,y,W,H)对所述待擦除节点的所述待擦除区域进行擦，所述x、y、W和H分别为所述待擦除节点的横坐标、纵坐标、宽度和高度，所述ctx.clearRect为Canvas的接口方法。

由上述描述可知，通过执行ctx.clearRect(x,y,W,H)对所述待擦除节点的所述待擦除区域进行擦作为本发明的一种具体实施例。

进一步地，所述对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行重新绘制具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域，分别调用ctx.fillRect(rx,ry,rw,rh)进行重新绘制，所述rx和ry分别为所述待重绘区域的所述起始位置的横坐标和纵坐标，所述rw和rh分别为所述待重绘区域的宽度和高度，所述ctx.fillRect为Canvas的接口方法。

由上述描述可知，对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域，分别调用ctx.fillRect(rx,ry,rw,rh)进行重新绘制作为本发明的一种具体实施例。

请参照图2，一种在Canvas下交叉区域擦除的终端，包括处理器、存储器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现以下步骤：

S1、获取待擦除节点的待擦除区域；

S2、判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；

S3、对所述待擦除节点的待擦除区域进行擦除；

S4、对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制。

从上述描述可知，本发明的有益效果在于：本发明在Canvas画布上进行待擦除节点擦除后，对与待擦除节点有所交叉的关联节点进行交叉区域的重新绘制，从而保证了在Canvas画布上擦除节点时能够不破坏其他有交叉的节点的完整性，使周边区域内的图形或节点能够完整展示。

进一步地，所述步骤S2具体为：

获取待擦除节点的坐标(x，y)、其余的每个节点的坐标(x1，y1)以及预设的节点宽度W和节点高度H，根据判断公式判断每个所述节点的所述节点区域是否与待擦除区域重叠，若是，则为关联节点，得到关联节点列表，所述判断公式为Math.abs(x-x1)<W&&Math.abs(y-y1)<H，其中，Math.abs表示绝对值，&&表示与运算；

所述步骤S4之前，还包括：

S31、获取预设的所述节点宽度W和节点高度H、所述关联节点列表以及对应每个关联节点的坐标(x1，y1)；

S32、比较所述待擦除节点的坐标与所述关联节点的坐标，将其中大的横坐标作为起始位置的横坐标，将其中小的纵坐标作为所述起始位置的纵坐标，得到所述起始位置；

S33、计算所述待重绘区域的所述宽度rw＝W-Math.abs(x1-x)；

S34、计算所述待重绘区域的所述高度rh＝H-Math.abs(y1-y)；

由上述描述可知，通过待擦除节点的顶点坐标与其他节点的顶点坐标的距离记忆待擦除区域的宽度和高度来判断两个节点是否有重叠的区域，能够准确不遗漏地得到关联节点列表。

进一步地，所述步骤S3具体为：

调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除；

所述步骤S4具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行区域重新绘制。

由上述描述可知，对待擦除节点的待擦除区域进行擦除以及对重叠区域的重新绘制都是调用Canvas的接口进行实现，更加的方便。

进一步地，所述调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除具体为：

执行ctx.clearRect(x,y,W,H)对所述待擦除节点的所述待擦除区域进行擦，所述x、y、W和H分别为所述待擦除节点的横坐标、纵坐标、宽度和高度，所述ctx.clearRect为Canvas的接口方法。

由上述描述可知，通过执行ctx.clearRect(x,y,W,H)对所述待擦除节点的所述待擦除区域进行擦作为本发明的一种具体实施例。

进一步地，所述对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行重新绘制具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域，分别调用ctx.fillRect(rx,ry,rw,rh)进行重新绘制，所述rx和ry分别为所述待重绘区域的所述起始位置的横坐标和纵坐标，所述rw和rh分别为所述待重绘区域的宽度和高度，所述ctx.fillRect为Canvas的接口方法。

由上述描述可知，对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域，分别调用ctx.fillRect(rx,ry,rw,rh)进行重新绘制作为本发明的一种具体实施例。

请参照图1、图3至图6，本发明的实施例一为：

一种在Canvas下交叉区域擦除的方法，包括：

S1、获取待擦除节点的待擦除区域；

S2、判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；

所述步骤S2具体为：

获取待擦除节点的坐标(x，y)、其余的每个节点的坐标(x1，y1)以及预设的节点宽度W和节点高度H，根据判断公式判断每个所述节点的所述节点区域是否与待擦除区域重叠，若是，则为关联节点，得到关联节点列表，所述判断公式为Math.abs(x-x1)<W&&Math.abs(y-y1)<H，其中，Math.abs表示绝对值，&&表示与运算；

如图3所示，本实施例中，获取到待擦除节点为R0，R0的顶点坐标为(x，y)，对其余节点进行关联节点的判断，本实施例中节点为正方形，所以待擦除区域的宽和高均为H，根据判断公式可以得到关联节点列表，关联节点列表中包含节点R1(x1，y1)、R2(x2，y2)以及R3(x3，y3)，R1、R2和R3与R0的重叠区域分别为S1、S2以及S3；

S3、对所述待擦除节点的待擦除区域进行擦除；

所述步骤S3具体为：

调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除；

所述调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除具体为：

执行ctx.clearRect(x,y,W,H)对所述待擦除节点的所述待擦除区域进行擦，所述x、y、W和H分别为所述待擦除节点的横坐标、纵坐标、宽度和高度，所述ctx.clearRect为Canvas的接口方法；

本实施例中，如图4所示通过执行ctx.clearRect(x,y,H,H)，对待擦除节点R0进行了擦除，即重叠区域S1、S2和S3由于Canvas原生机制的原因也被擦除，导致R1、R2和R3的不完整；

所述步骤S4之前，还包括：

S31、获取预设的所述节点宽度W和节点高度H、所述关联节点列表以及对应每个关联节点的坐标(x1，y1)；

S32、比较所述待擦除节点的坐标与所述关联节点的坐标，将其中大的横坐标作为起始位置的横坐标，将其中小的纵坐标作为所述起始位置的纵坐标，得到所述起始位置；

S33、计算所述待重绘区域的所述宽度rw＝W-Math.abs(x1-x)；

S34、计算所述待重绘区域的所述高度rh＝H-Math.abs(y1-y)。

本实施例中，对待重绘区域的起始位置和宽高进行计算，以S1为例，比较R0和R1的顶点横坐标，可知R1的横坐标x1较大，比较R1和R0的纵坐标，则R0的纵坐标y较小，因此可以确定S1的起始位置为(x1，y)；

计算待重绘区域S1的宽高，S1区域的宽度rw为节点宽度H减去R1的横坐标与R0的横坐标差值的绝对值，即rw＝H-Math.abs(x1-x)，同理依据公式对待重绘区域的高度进行计算，即rh＝H-Math.abs(y1-y)；

同理，对另外两个待重绘区域S2和S3的起始位置、宽度以及高度进行计算；

其中，节点坐标即节点的覆盖区域左上角的坐标；

S4、对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制；

所述步骤S4具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行区域重新绘制；

所述对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行重新绘制具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域，分别调用ctx.fillRect(rx,ry,rw,rh)进行重新绘制，所述rx和ry分别为所述待重绘区域的所述起始位置的横坐标和纵坐标，所述rw和rh分别为所述待重绘区域的宽度和高度，所述ctx.fillRect为Canvas的接口方法。

本实施例中，以待重绘区域S1为例，执行ctx.fillRect(x1,y,rw,rh)，从而对待重绘区域S1进行重绘，同理对待重绘区域S2和S3进行重绘，使R1、R2和R3恢复完整的显示，最终效果如图5所示。

请参照图2，本发明的实施例二为：

一种在Canvas下交叉区域擦除的终端1，包括处理器2、存储器3及存储在存储器3上并可在处理器2上运行的计算机程序，所述处理器2执行所述计算机程序时实现以上实施例一中的步骤。

综上所述，本发明提供的一种在Canvas下交叉区域擦除的方法与终端，在Canvas画布上进行待擦除节点擦除后，能够对待重绘区域进行精确的计算，对与待擦除节点有所交叉的关联节点进行交叉区域的重新绘制，从而保证了在Canvas画布上擦除节点时能够不破坏其他有交叉的节点的完整性，使周边区域内的图形或节点能够完整展示；同时，擦除和重绘均调用Canvas的原生接口进行实现，更加方便。

以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (8)

1.一种在Canvas下交叉区域擦除的方法，其特征在于，包括：

S1、获取待擦除节点的待擦除区域；

S2、判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；

所述步骤S2具体为：

获取待擦除节点的坐标（x，y）、其余的每个节点的坐标（x1，y1）以及预设的节点宽度W和节点高度H，根据判断公式判断每个所述节点的所述节点区域是否与待擦除区域重叠，若是，则为关联节点，得到关联节点列表，所述判断公式为Math.abs(x-x1) <W && Math.abs(y-y1) <H，其中，Math.abs表示绝对值，&&表示与运算；

S3、对所述待擦除节点的待擦除区域进行擦除；

S31、获取预设的所述节点宽度W和节点高度H、所述关联节点列表以及对应每个关联节点的坐标（x1，y1）；

S32、比较所述待擦除节点的坐标与所述关联节点的坐标，将其中大的横坐标作为所述关联节点与所述待擦除节点的起始位置的横坐标，将其中小的纵坐标作为所述起始位置的纵坐标，得到重叠区域的所述起始位置；

S33、计算所述重叠区域的宽度rw=W-Math.abs(x1-x)；

S34、计算所述重叠区域的高度rh=H-Math.abs(y1-y)；

S4、对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制。

2.根据权利要求1所述的一种在Canvas下交叉区域擦除的方法，其特征在于，所述步骤S3具体为：

调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除；

所述步骤S4具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行区域重新绘制。

3.根据权利要求2所述的一种在Canvas下交叉区域擦除的方法，其特征在于，所述调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除具体为：

执行ctx.clearRect(x,y,W,H)对所述待擦除节点的所述待擦除区域进行擦，所述x、y、W和H分别为所述待擦除节点的横坐标、纵坐标、宽度和高度，所述ctx.clearRect为Canvas的接口方法。

4.根据权利要求2所述的一种在Canvas下交叉区域擦除的方法，其特征在于，所述对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行重新绘制具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域，分别调用ctx.fillRect(rx,ry,rw,rh)进行重新绘制，所述rx和ry分别为所述重叠区域的所述起始位置的横坐标和纵坐标，所述rw和rh分别为所述重叠区域的宽度和高度，所述ctx.fillRect为Canvas的接口方法。

5.一种在Canvas下交叉区域擦除的终端，包括处理器、存储器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现以下步骤：

S1、获取待擦除节点的待擦除区域；

S2、判断每个节点的节点区域是否与所述待擦除节点的待擦除区域重叠，若是，则为关联节点，得到关联节点列表；

所述步骤S2具体为：

获取待擦除节点的坐标（x，y）、其余的每个节点的坐标（x1，y1）以及预设的节点宽度W和节点高度H，根据判断公式判断每个所述节点的所述节点区域是否与待擦除区域重叠，若是，则为关联节点，得到关联节点列表，所述判断公式为Math.abs(x-x1) <W && Math.abs(y-y1) <H，其中，Math.abs表示绝对值，&&表示与运算；

S3、对所述待擦除节点的待擦除区域进行擦除；

S31、获取预设的所述节点宽度W和节点高度H、所述关联节点列表以及对应每个关联节点的坐标（x1，y1）；

S32、比较所述待擦除节点的坐标与所述关联节点的坐标，将其中大的横坐标作为所述关联节点与所述待擦除节点的起始位置的横坐标，将其中小的纵坐标作为所述起始位置的纵坐标，得到重叠区域的所述起始位置；

S33、计算所述重叠区域的宽度rw=W-Math.abs(x1-x)；

S34、计算所述重叠区域的高度rh=H-Math.abs(y1-y)；

S4、对所述关联节点列表的每一个节点中与所述待擦除节点的重叠区域分别进行重新绘制。

6.根据权利要求5所述的一种在Canvas下交叉区域擦除的终端，其特征在于，所述步骤S3具体为：

调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除；

所述步骤S4具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行区域重新绘制。

7.根据权利要求6所述的一种在Canvas下交叉区域擦除的终端，其特征在于，所述调用Canvas的接口对所述待擦除节点的所述待擦除区域进行擦除具体为：

执行ctx.clearRect(x,y,W,H)对所述待擦除节点的所述待擦除区域进行擦，所述x、y、W和H分别为所述待擦除节点的横坐标、纵坐标、宽度和高度，所述ctx.clearRect为Canvas的接口方法。

8.根据权利要求6所述的一种在Canvas下交叉区域擦除的终端，其特征在于，所述对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域分别调用Canvas的接口进行重新绘制具体为：

对所述关联节点列表的每一个节点与所述待擦除节点的重叠区域，分别调用ctx.fillRect(rx,ry,rw,rh)进行重新绘制，所述rx和ry分别为所述重叠区域的所述起始位置的横坐标和纵坐标，所述rw和rh分别为所述重叠区域的宽度和高度，所述ctx.fillRect为Canvas的接口方法。

Images