[发明专利]基于Canvas画布的区域图形编辑方法及装置

说明书

本申请提出了一种1.基于Canvas画布的区域图形编辑方法，在Canvas画布上对区域图形进行编辑时，包括以下步骤：获取Canvas画布上每一区域图形对应的图形数据组成图形数据集，图形数据集中每一图形数据按照对应区域图形的层级排序；监听所述Canvas画布上的鼠标点击事件，获取鼠标点击位置；遍历图形数据集，依次判断鼠标点击位置是否在每一图形数据对应的区域图形中，以获取选中区域图形；对选中区域图形进行编辑操作。该方法通过结合使用Canvas和Js技术，提供对多区域图形进行编辑时存在区域图层覆盖以及图层选择困难的解决方法，完善了多区域图形图层选择逻辑。

技术领域

本申请涉及Canvas技术领域，特别是涉及一种基于Canvas画布的区域图形编辑方法及装置。

背景技术

目前主流的区域图形绘制主要是基于浏览器原生的API配合外部插件实现，但当浏览器的版本或者种类不同时，外部插件可能对有些版本或种类的浏览器不兼容。

现代浏览器基本上都兼容Canvas技术，但基础的Canvas无法直接绘制多边形的区域图形以及对选中的任意区域图形进行移动或删除等编辑操作，因为原生的Canvas本质上是一个与分辨率相关的位图画布，且canvas绘制的内容不属于任何DOM元素，在浏览器的元素查看器中也无法找到，所以区域图形相互覆盖后的选择逻辑是个一复杂的问题，通常是无法直接检测鼠标点击了画布上的哪个区域图形。

发明内容

本申请实施例提供了一种基于Canvas画布的区域图形编辑方法和装置，通过结合使用Canvas和Js技术，提供对多区域图形进行编辑时存在区域图层覆盖以及图层选择困难的解决方法，完善了多区域图形图层选择逻辑。

第一方面，本申请实施例提供了一种基于Canvas画布的区域图形编辑方法，该方法在Canvas画布上对区域图形进行编辑时，包括以下步骤：

获取所述Canvas画布上每一所述区域图形对应的图形数据组成图形数据集，所述图形数据集中每一所述图形数据按照对应区域图形的层级排序；

监听所述Canvas画布上的鼠标点击事件，获取鼠标点击位置；

清空所述Canvas画布，遍历所述图形数据集，按照所述图形数据集中的图形数据依次重新绘制对应的区域图形，每重新绘制一个所述区域图形判断所述鼠标点击位置是否在该区域图形内，若所述鼠标点击位置在该区域图形内，则将该区域图形作为选中区域图形；

对所述选中区域图形进行编辑操作。

在一些申请实施例中，在“将该区域图形作为选中区域图形”后，包括：绘制下一区域图形时不再判断所述鼠标点击位置是否在该区域图形内。

在一些申请实施例中，将所述选中区域图形对应的图形数据设置选中标记，在重新绘制完所有图形数据对应的区域图形后，将所述选中标记对应的图形数据调整至所述图形数据集的首位。

在一些申请实施例中，当所述编辑操作为移动操作时：

持续监听鼠标移动事件，获取鼠标实时位置；

根据所述鼠标实时位置与所述鼠标点击位置的距离计算移动距离；

根据所述移动距离和所述选中区域图形对应的图形数据计算所述选中区域图形新的图形数据；

清空所述选中区域图形，并根据新的图形数据进行重新绘制。

当鼠标松开时不再监听所述鼠标移动事件。

在一些申请实施例中，当所述编辑操作为删除操作时：清空所述选中区域图形，并删除所述选中区域图形对应的图形数据。