一种基于SVG共享画板的擦除方法、终端及存储介质技术

本申请公开一种基于SVG共享画板的擦除方法、终端及存储介质，属于显示屏调节技术领域。该擦除方法包括以下步骤：以当前SVG共享画布中鼠标落点为中心，绘制预设尺寸的矩形橡皮擦；遍历SVG共享画布上所有画笔对象，以找出目标画笔对象，目标画笔对象为对应路径所构成的最小矩形与矩形橡皮擦相交的画笔对象；遍历目标画笔对象的对应路径，以确认目标画笔对象与矩形橡皮擦的相交情形；根据目标画笔对象与矩形橡皮擦的相交情形，对目标画笔对象进行第一删除操作或第二删除操作。本技术方案，其可在SVG共享画板上，不受画板中线条结构的约束，实现对画笔对象任意精确性的擦除效果。现对画笔对象任意精确性的擦除效果。现对画笔对象任意精确性的擦除效果。

【技术实现步骤摘要】
一种基于SVG共享画板的擦除方法、终端及存储介质


[0001]本申请涉及浏览器
，特别涉及一种基于SVG共享画板的擦除方法、终端及存储介质。

技术介绍

[0002]近年来，随着各个行业由线下办公纷纷走向了线上办公，视频会议、在线协同办公等场景也随之出现，特别是共享画板机制在视频会议当中展现出尤为突出的作用，而成为了备受关注的焦点。现有的常用技术无非是Canvas(Canvas是在HTML5中新增的元素标签，用于在网页上绘制图像(位图)，相当于在HTML中嵌入了一张画布，Canvas本身不具备绘图能力，但可借助JavaScript来实现绘图功能)和SVG(Scalable Vector Graphics，意为可缩放的矢量图形，是一种开放标准的矢量图形语言，可设计出高分辨率的Web图形页面，用户可以直接用代码来描绘图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看)两种方案实现共享画板，但Canvas是基于标量的位图，一旦图形形成，就不能操作其内部的对象属性，若要改变其结构只能重新绘制渲染，而SVG形成的线条和形状属于矢量图，放大缩小后图像都不会失真，且它是基于dom节点的操作，可以利用JavaScript事件直接进行操作，与用户的交互性更加完好，而得到更为广泛的应用。目前，基于SVG共享画板的擦除主要采用以下两种方式：一种是覆盖性的擦除，其本质是通过涂鸦覆盖的方式进行了虚假的遮罩擦除行为，没有实现真正意义上的擦除，并不能满足实际共享画板的擦除需求。另一种是整体线条的擦除，这种方式也相对简单，是对整个画笔对象的操作，无论是利用canvas的封装库还是SVG原生的操作都可以实现，但不能满足大多实际无规则的擦除场景。

技术实现思路

[0003]本申请的主要目的在于提出一种基于SVG共享画板的擦除方法、终端及存储介质，其旨在解决现有基于SVG共享画板的擦除操作无法满足大多实际无规则的擦除场景的技术问题。
[0004]为实现上述目的，本申请提供的一种基于SVG共享画板的擦除方法，所述擦除方法包括以下步骤：
[0005]以当前SVG共享画布中鼠标落点为中心，绘制预设尺寸的矩形橡皮擦；
[0006]遍历所述SVG共享画布上所有画笔对象，以找出目标画笔对象，所述目标画笔对象为对应路径所构成的最小矩形与所述矩形橡皮擦相交的画笔对象；
[0007]遍历所述目标画笔对象的对应路径，以确定所述目标画笔对象与所述矩形橡皮擦的相交情形；
[0008]根据所述目标画笔对象与所述矩形橡皮擦的相交情形，对所述目标画笔对象进行第一删除操作或第二删除操作，所述第一删除操作为将所述目标画笔对象整体删除的操作，所述第二删除操作为将所述目标画笔对象的相应部分删除以及对所述目标画笔对象的
剩余部分进行重绘的操作。
[0009]可选的，在一些实施例中，所述擦除方法还包括以下步骤：
[0010]在浏览器中应用SVG标签绘制预设大小的画布，以生成所述SVG共享画布，并建立所述SVG共享画布的画布坐标与鼠标实际移动坐标的一一对应关系。
[0011]可选的，在一些实施例中，所述擦除方法还包括以下步骤：
[0012]在每一所述画笔对象绘制时，对当前所述画笔对象的对应路径进行循环遍历，以获取并存储所述对应路径上所有点的点坐标；
[0013]进一步获取所述对应路径所构成的最小矩形，以计算并存储所述最小矩形的四个第一角坐标。
[0014]可选的，在一些实施例中，所述以当前SVG共享画布中鼠标落点为中心，绘制预设尺寸的矩形橡皮擦的步骤具体包括：
[0015]以当前SVG共享画布中鼠标落点为中心，进行所述预设尺寸的矩形橡皮擦的绘制，并记录所述矩形橡皮擦的四个第二角坐标。
[0016]可选的，在一些实施例中，所述遍历所述SVG共享画布上所有画笔对象，以找出目标画笔对象的步骤具体包括：
[0017]依次获取所述SVG共享画布上每一所述画笔对象对应的所述四个第一角坐标；
[0018]若所述四个第一角坐标所围成的矩形与所述矩形橡皮擦的四个第二角坐标所围成的矩形相交，则将所述四个第一角坐标对应的所述画笔对象判定为所述目标画笔对象。
[0019]可选的，在一些实施例中，所述遍历所述目标画笔对象的对应路径，以确定所述目标画笔对象与所述矩形橡皮擦的相交情形的步骤具体包括：
[0020]遍历所述目标画笔对象的对应路径上所有点的点坐标，以找出所述目标画笔对象的对应路径与所述矩形橡皮擦的所有交点；
[0021]根据所述所有交点的个数，确定所述目标画笔对象与所述矩形橡皮擦的相交情形。
[0022]可选的，在一些实施例中，所述根据所述所有交点的个数，确定所述目标画笔对象与所述矩形橡皮擦的相交情形的步骤具体包括：
[0023]若所述所有交点的个数为0个时，则确定所述目标画笔对象全部位于所述矩形橡皮擦所覆盖的范围内；
[0024]若所述所有交点的个数至少为1个时，则确定所述目标画笔对象局部位于所述矩形橡皮擦所覆盖的范围内。
[0025]可选的，在一些实施例中，所述根据所述目标画笔对象与所述矩形橡皮擦的相交情形，对所述目标画笔对象进行第一删除操作或第二删除操作的步骤具体包括：
[0026]若确定所述目标画笔对象全部位于所述矩形橡皮擦所覆盖的范围内，则对所述目标画笔对象进行第一删除操作；
[0027]若确定所述目标画笔对象局部位于所述矩形橡皮擦所覆盖的范围内，则根据各个所述交点的位置对所述目标画笔对象进行第二删除操作。
[0028]此外，为实现上述目的，本申请实施例还提出一种终端，所述终端包括存储器、处理器、存储在所述存储器上并可在所述处理器上运行的程序以及用于实现所述处理器和所述存储器之间的连接通信的数据总线，所述程序被所述处理器执行时实现上述的方法的步
骤。
[0029]此外，为实现上述目的，本申请实施例还提出一种存储介质，用于计算机可读存储，所述存储介质存储有一个或者多个程序，所述一个或者多个程序可被一个或者多个处理器执行，以实现上述的方法的步骤。
[0030]本申请提供的基于SVG共享画板的擦除方法、终端及存储介质，其在SVG共享画板进行画笔对象擦除时，会先以当前SVG共享画布中鼠标落点为中心，绘制预设尺寸的矩形橡皮擦。然后，遍历SVG共享画布上所有画笔对象，以找出目标画笔对象，目标画笔对象为对应路径所构成的最小矩形与矩形橡皮擦相交的画笔对象。接着，遍历目标画笔对象的对应路径，以确认目标画笔对象与矩形橡皮擦的相交情形。最后，再根据目标画笔对象与矩形橡皮擦的相交情形，对目标画笔对象进行第一删除操作或第二删除操作。由于第一删除操作为将目标画笔对象整体删除的操作，而第二删除操作为将目标画笔对象的相应部分删除以及对目标画笔对象的剩余部分进行重绘的操作，因而，本技术方案，其可在SVG共享画板上，不受画板中线条结构的约束，实现画笔对象任意精确性的擦除效果。
附图本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于SVG共享画板的擦除方法，其特征在于，所述擦除方法包括以下步骤：以当前SVG共享画布中鼠标落点为中心，绘制预设尺寸的矩形橡皮擦；遍历所述SVG共享画布上所有画笔对象，以找出目标画笔对象，所述目标画笔对象为对应路径所构成的最小矩形与所述矩形橡皮擦相交的画笔对象；遍历所述目标画笔对象的对应路径，以确定所述目标画笔对象与所述矩形橡皮擦的相交情形；根据所述目标画笔对象与所述矩形橡皮擦的相交情形，对所述目标画笔对象进行第一删除操作或第二删除操作，所述第一删除操作为将所述目标画笔对象整体删除的操作，所述第二删除操作为将所述目标画笔对象的相应部分删除以及对所述目标画笔对象的剩余部分进行重绘的操作。2.根据权利要求1所述的擦除方法，其特征在于，所述擦除方法还包括以下步骤：在浏览器中应用SVG标签绘制预设大小的画布，以生成所述SVG共享画布，并建立所述SVG共享画布的画布坐标与鼠标实际移动坐标的一一对应关系。3.根据权利要求1所述的擦除方法，其特征在于，所述擦除方法还包括以下步骤：在每一所述画笔对象绘制时，对当前所述画笔对象的对应路径进行循环遍历，以获取并存储所述对应路径上所有点的点坐标；进一步获取所述对应路径所构成的最小矩形，以计算并存储所述最小矩形的四个第一角坐标。4.根据权利要求3所述的擦除方法，其特征在于，所述以当前SVG共享画布中鼠标落点为中心，绘制预设尺寸的矩形橡皮擦的步骤具体包括：以当前SVG共享画布中鼠标落点为中心，进行所述预设尺寸的矩形橡皮擦的绘制，并记录所述矩形橡皮擦的四个第二角坐标。5.根据权利要求4所述的擦除方法，其特征在于，所述遍历所述SVG共享画布上所有画笔对象，以找出目标画笔对象的步骤具体包括：依次获取所述SVG共享画布上每一所述画笔对象对应的所述四个第一角坐标；若所述四个第一角坐标所围成的矩形与所述矩形橡皮擦的四个第二角坐标所围成的...

【专利技术属性】
技术研发人员：刘楠楠，
申请(专利权)人：深圳市洲明科技股份有限公司，
类型：发明
国别省市：