[发明专利]一种基于SVG共享画板的擦除方法、终端及存储介质

说明书

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

技术领域

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

背景技术

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

发明内容

本申请的主要目的在于提出一种基于SVG共享画板的擦除方法、终端及存储介质，其旨在解决现有基于SVG共享画板的擦除操作无法满足大多实际无规则的擦除场景的技术问题。

为实现上述目的，本申请提供的一种基于SVG共享画板的擦除方法，所述擦除方法包括以下步骤：

以当前SVG共享画布中鼠标落点为中心，绘制预设尺寸的矩形橡皮擦；

遍历所述SVG共享画布上所有画笔对象，以找出目标画笔对象，所述目标画笔对象为对应路径所构成的最小矩形与所述矩形橡皮擦相交的画笔对象；

遍历所述目标画笔对象的对应路径，以确定所述目标画笔对象与所述矩形橡皮擦的相交情形；

根据所述目标画笔对象与所述矩形橡皮擦的相交情形，对所述目标画笔对象进行第一删除操作或第二删除操作，所述第一删除操作为将所述目标画笔对象整体删除的操作，所述第二删除操作为将所述目标画笔对象的相应部分删除以及对所述目标画笔对象的剩余部分进行重绘的操作。

可选的，在一些实施例中，所述擦除方法还包括以下步骤：

在浏览器中应用SVG标签绘制预设大小的画布，以生成所述SVG共享画布，并建立所述SVG共享画布的画布坐标与鼠标实际移动坐标的一一对应关系。

可选的，在一些实施例中，所述擦除方法还包括以下步骤：

在每一所述画笔对象绘制时，对当前所述画笔对象的对应路径进行循环遍历，以获取并存储所述对应路径上所有点的点坐标；

进一步获取所述对应路径所构成的最小矩形，以计算并存储所述最小矩形的四个第一角坐标。