基于Canvas画布的区域图形编辑方法及装置与流程

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


背景技术：

2.目前主流的区域图形绘制主要是基于浏览器原生的api配合外部插件实现，但当浏览器的版本或者种类不同时，外部插件可能对有些版本或种类的浏览器不兼容。
3.现代浏览器基本上都兼容canvas技术，但基础的canvas无法直接绘制多边形的区域图形以及对选中的任意区域图形进行移动或删除等编辑操作，因为原生的canvas本质上是一个与分辨率相关的位图画布，且canvas绘制的内容不属于任何dom元素，在浏览器的元素查看器中也无法找到，所以区域图形相互覆盖后的选择逻辑是个一复杂的问题，通常是无法直接检测鼠标点击了画布上的哪个区域图形。


技术实现要素：

4.本技术实施例提供了一种基于canvas画布的区域图形编辑方法和装置，通过结合使用canvas和js技术，提供对多区域图形进行编辑时存在区域图层覆盖以及图层选择困难的解决方法，完善了多区域图形图层选择逻辑。
5.第一方面，本技术实施例提供了一种基于canvas画布的区域图形编辑方法，该方法在canvas画布上对区域图形进行编辑时，包括以下步骤：
6.获取所述canvas画布上每一所述区域图形对应的图形数据组成图形数据集，所述图形数据集中每一所述图形数据按照对应区域图形的层级排序；
7.监听所述canvas画布上的鼠标点击事件，获取鼠标点击位置；
8.清空所述canvas画布，遍历所述图形数据集，按照所述图形数据集中的图形数据依次重新绘制对应的区域图形，每重新绘制一个所述区域图形判断所述鼠标点击位置是否在该区域图形内，若所述鼠标点击位置在该区域图形内，则将该区域图形作为选中区域图形；
9.对所述选中区域图形进行编辑操作。
10.在一些申请实施例中，在“将该区域图形作为选中区域图形”后，包括：绘制下一区域图形时不再判断所述鼠标点击位置是否在该区域图形内。
11.在一些申请实施例中，将所述选中区域图形对应的图形数据设置选中标记，在重新绘制完所有图形数据对应的区域图形后，将所述选中标记对应的图形数据调整至所述图形数据集的首位。
12.在一些申请实施例中，当所述编辑操作为移动操作时：
13.持续监听鼠标移动事件，获取鼠标实时位置；
14.根据所述鼠标实时位置与所述鼠标点击位置的距离计算移动距离；
15.根据所述移动距离和所述选中区域图形对应的图形数据计算所述选中区域图形
新的图形数据；
16.清空所述选中区域图形，并根据新的图形数据进行重新绘制。
17.当鼠标松开时不再监听所述鼠标移动事件。
18.在一些申请实施例中，当所述编辑操作为删除操作时：清空所述选中区域图形，并删除所述选中区域图形对应的图形数据。
19.在一些申请实施例中，绘制所述区域图形的方法为：根据所述区域图形对应的图形数据依次获取至少一点位，并根据所述区域图形对应的绘制操作集依次获取对应每一所述点位的绘制操作，根据每一所述点位的绘制操作依次进行绘制。
20.第二方面，本技术实施例提供了一种基于canvas画布的区域图形编辑装置，用于实现第一方面中所述的基于canvas画布的区域图形编辑方法，在canvas画布上对区域图形进行编辑时，该装置包括以下模块：
21.获取模块，用于获取所述canvas画布上每一所述区域图形对应的图形数据组成图形数据集，所述图形数据集中每一所述图形数据按照对应区域图形的层级排序；
22.监听模块，用于监听所述canvas画布上的鼠标点击事件，获取鼠标点击位置；
23.选中模块，用于清空所述canvas画布，遍历所述图形数据集，按照所述图形数据集中的图形数据依次重新绘制对应的区域图形，每重新绘制一个所述区域图形判断所述鼠标点击位置是否在该区域图形内，若所述鼠标点击位置在该区域图形内，则将该区域图形作为选中区域图形；
24.操作模块，用于对所述选中区域图形进行编辑操作。
25.第三方面，本技术实施例提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以如上任意申请实施例所述的基于canvas画布的区域图形编辑方法。
26.第四方面，本技术实施例提供了一种可读存储介质，所述可读存储介质中存储有计算机程序，所述计算机程序包括用于控制过程以执行过程的程序代码，所述过程包括根据如上任意申请实施例所述的基于canvas画布的区域图形编辑方法。
27.本技术实施例的主要贡献和创新点如下：
28.本技术提供了对多区域图形进行编辑时存在区域图层覆盖以及图层选择困难的解决方法，完善了多区域图形图层选择逻辑。利用可视化技术，将复杂的区域识别绘制转变为简单的图形化操作，大大降低了操作难度，并且提供了区域图形的编辑方法，更直观的展示用户所绘制的识别区域内容。在一些申请实施例中，还提供了按缩放比例绘制的点位信息，为后续相关工作的进展打下牢靠的基础。
29.本技术的一个或多个实施例的细节在以下附图和描述中提出，以使本技术的其他特征、目的和优点更加简明易懂。
附图说明
30.此处所说明的附图用来提供对本技术的进一步理解，构成本技术的一部分，本技术的示意性实施例及其说明用于解释本技术，并不构成对本技术的不当限定。在附图中：
31.图1是根据本技术实施例的基于canvas画布的区域图形编辑方法的流程图；
32.图2是根据本技术实施例的基于canvas画布的区域图形编辑装置的结构框图；
33.图3是根据本技术实施例的电子装置的硬件结构示意图。
具体实施方式
34.这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本说明书一个或多个实施例相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本说明书一个或多个实施例的一些方面相一致的装置和方法的例子。
35.需要说明的是：在其他实施例中并不一定按照本说明书示出和描述的顺序来执行相应方法的步骤。在一些其他实施例中，其方法所包括的步骤可以比本说明书所描述的更多或更少。此外，本说明书中所描述的单个步骤，在其他实施例中可能被分解为多个步骤进行描述；而本说明书中所描述的多个步骤，在其他实施例中也可能被合并为单个步骤进行描述。
36.实施例一
37.本实施例提供了一种基于canvas画布的区域图形编辑方法，用于对canvas画布上已经存在区域图形进行编辑。
38.其中，canvas画布上的区域图形可以是直接绘制的，也可以是导入已有的区域图形或者导入的图片。
39.直接绘制区域图形的方法包括：持续监听所述canvascanvas画布上的鼠标点击事件，依次记录每一鼠标点击位置，依次连接每一所述鼠标点击位置与该鼠标点击位置的上一鼠标点击位置。
40.导入图片的方法包括：根据图片尺寸和canvas画布尺寸计算缩放比例，按照缩放比例在canvas画布中绘制该图片。
41.其中，画图尺寸可以canvas画布高度或者宽度。具体的，可以通过js的监听方法addeventlistener动态获取canvas画布宽度或者canvas画布高度。
42.并且，缩放比例可以为canvas画布尺寸与图片尺寸的宽度之比，也可以canvas画布尺寸与图片尺寸的高度之比，具体不限。
43.例如，通过js的监听方法addeventlistener动态获取canvas画布宽度或者canvas画布容器宽度aw，并构造一个image对象，将图片地址设置为image对象的src属性值以获取到导入的图片对象，获取该图片对象的图片宽度为width属性的值bw和height属性的值。
44.因此，缩放比例的计算方式为t＝aw/bw*100％。
45.然后使用图片对象的图片宽度和图片高度分别乘以缩放比例得到图片缩放后的长度和宽度。
46.导入已有的区域图形的方法相比导入图片多一个步骤，因为已有的区域图形保存有对应的图形数据以及绘制操作集，图形数据中包括至少一点位，绘制操作集中包括依次对应每一点位的绘制操作。
47.也就是说，需要根据缩放比例将对应的图形数据换算成对应canvas画布的图形数据后才可以进行绘制。
48.例如，已有的区域图形的图形数据为：[(x1,y1),(x2,y2),(x3,y3)]，那么缩放后
的图形数据为：[(x1*t,y1*t),(x2*t,y2*t),(x3*t,y3*t)]。
[0049]
在一些具体实施例中，绘制区域图形的方法为：根据所述区域图形对应的图形数据依次获取至少一点位，并根据所述区域图形对应的绘制操作集依次获取对应每一所述点位的绘制操作，根据每一所述点位的绘制操作依次进行绘制。
[0050]
因此，在canvas画布上对区域图形进行编辑时，包括步骤s1-s4：
[0051]
步骤s1：获取所述canvas画布上每一所述区域图形对应的图形数据组成图形数据集，所述图形数据集中每一所述图形数据按照对应区域图形的层级排序；
[0052]
步骤s2：监听所述canvas画布上的鼠标点击事件，获取鼠标点击位置；
[0053]
步骤s3：清空所述canvas画布，遍历所述图形数据集，按照所述图形数据集中的图形数据依次重新绘制对应的区域图形，每重新绘制一个所述区域图形判断所述鼠标点击位置是否在该区域图形内，若所述鼠标点击位置在该区域图形内，则将该区域图形作为选中区域图形；
[0054]
步骤s4：对所述选中区域图形进行编辑操作。
[0055]
在步骤s1中，先获取canvas画布上每一区域图形的图形数据，并按照对应区域图形的层级排序组成图形数据集。
[0056]
其中，每一个图形数据包括至少一点位，每个点位包括x轴坐标和y轴坐标。
[0057]
在步骤s2中，监听所述canvas画布上的鼠标点击事件，获取鼠标点击位置，该鼠标点击位置为鼠标在点击时相对于canvas画布的位置坐标。
[0058]
在步骤s3中，遍历图形数据集，如果鼠标点击位置在某一图形数据对应的区域图形中，那么该区域图形为选中区域图形。
[0059]
其中，判断鼠标点击位置是否在图形数据对应的区域图形中的方法包括：清空所述canvas画布，按照所述图形数据集依次重新绘制对应的区域图形，每重新绘制一个所述区域图形判断所述鼠标点击位置是否在该区域图形内，若所述鼠标点击位置在该区域图形内，则将该区域图形作为选中区域图形。
[0060]
具体的，调用clearrect方法清空canvas画布，然后遍历图形数据集，依次对每一图形数据对应的区域图形进行绘制。每次重新绘制完一个图形数据对应的区域图形后，通过调用canvas自带的ispointinpath方法传入鼠标点击位置，判断鼠标是否点击在此时重新绘制的区域图形内，如果判断为鼠标点击时在该区域图形，将该区域图形作为选中区域图形。
[0061]
在得到判断出选中区域图形后，在绘制下一图形数据对应的区域图形时，可以不再判断鼠标是否点击在此时重新绘制的区域图形内。因此，在一些具体实施例中，绘制下一区域图形时不再判断所述鼠标点击位置是否在该区域图形内。
[0062]
为了标记选中区域图形，并且提高在编辑时定位选中区域图形的速度，在另一些具体实施例中，将所述选中区域图形对应的图形数据设置选中标记，在重新绘制完所有图形数据对应的区域图形后，将所述选中标记对应的图形数据调整至所述图形数据集的首位。
[0063]
例如，将选中区域图形对应的图形数据的键值设为“keypoint”，在重新绘制完所有图形数据对应的区域图形后，将键值为“keypoint”的图形数据调整到，图形数据集的首位。
[0064]
在步骤s4中，对选中区域图形进行编辑操作。具体的，可以设置一个全局变量isselect用于表示鼠标是有选中区域图形。isselect默认为false，在获取到选中区域图形时，将isselect调整为true。
[0065]
其中，编辑操作包括移动操作和删除操作。
[0066]
当所述编辑操作为移动操作时：持续监听鼠标移动事件，获取鼠标实时位置；根据所述鼠标实时位置与所述鼠标点击位置的距离计算移动距离；根据所述移动距离和所述选中区域图形对应的图形数据计算所述选中区域图形新的图形数据；清空所述选中区域图形，并根据新的图形数据进行重新绘制，当鼠标松开时不再监听所述鼠标移动事件。
[0067]
例如，鼠标点击位置为(ox,oy)，鼠标实时位置为(mx,my)，移动距离包括x轴上的移动距离distancex和y轴上的移动距离distancey。
[0068]
因此，distancex＝mx-ox，distancey＝my-oy。
[0069]
然后将区域图形的图形数据中每一个点位分别在x轴移动distancex和y轴移动distancey，得到新的图形数据。
[0070]
清空当前canvas画布上的选中区域图形，并根据新的图形数据进行重新绘制，直到鼠标松开，也就是说鼠标松开后不再监听所述鼠标移动事件，也不再进行绘制。其中，松开鼠标是触发js监听的鼠标松开事件onmouseup，这时撤销之前的监听的鼠标移动事件onmousemove，同时清空纪录的ox和oy的值。
[0071]
当所述编辑操作为删除操作时：清空所述选中区域图形，并删除所述选中区域图形对应的图形数据。具体的，清空当前canvas画布上的选中区域图形，并将选中区域图形对应的图形数据从所述图形数据集中删除，表明该canvas画布上不再存在这个区域图形。
[0072]
实施例二
[0073]
基于相同的构思，本实施例还提供了一种基于canvas画布的区域图形编辑装置，用于实现实施例一中所描述的基于canvas画布的区域图形编辑方法，具体参考图2，在canvas画布上对区域图形进行编辑时，该装置包括以下模块：
[0074]
获取模块，用于获取所述canvas画布上每一所述区域图形对应的图形数据组成图形数据集，所述图形数据集中每一所述图形数据按照对应区域图形的层级排序；
[0075]
监听模块，用于监听所述canvas画布上的鼠标点击事件，获取鼠标点击位置；
[0076]
选中模块，用于清空所述canvas画布，遍历所述图形数据集，按照所述图形数据集中的图形数据依次重新绘制对应的区域图形，每重新绘制一个所述区域图形判断所述鼠标点击位置是否在该区域图形内，若所述鼠标点击位置在该区域图形内，则将该区域图形作为选中区域图形；
[0077]
操作模块，用于对所述选中区域图形进行编辑操作。
[0078]
实施例三
[0079]
本实施例还提供了一种电子装置，参考图3，包括存储器404和处理器402，该存储器404中存储有计算机程序，该处理器402被设置为运行计算机程序以执行上述实施例中的任意一种基于canvas画布的区域图形编辑方法的步骤。
[0080]
具体地，上述处理器402可以包括中央处理器(cpu)，或者特定集成电路(application specific integrated circuit，简称为asic)，或者可以被配置成实施本技术实施例的一个或多个集成电路。
[0081]
其中，存储器404可以包括用于数据或指令的大容量存储器404。举例来说而非限制，存储器404可包括硬盘驱动器(hard disk drive，简称为hdd)、软盘驱动器、固态驱动器(solid state drive，简称为ssd)、闪存、光盘、磁光盘、磁带或通用串行总线(universal serial bus，简称为usb)驱动器或者两个或更多个以上这些的组合。在合适的情况下，存储器404可在数据处理装置的内部或外部。在特定实施例中，存储器404是非易失性(non-volatile)存储器。在特定实施例中，存储器404包括只读存储器(read-only memory，简称为rom)和随机存取存储器(random access memory，简称为ram)。在合适的情况下，该rom可以是掩模编程的rom、可编程rom(programmable read-only memory，简称为prom)、可擦除prom(erasable programmable read-only memory，简称为eprom)、电可擦除prom(electrically erasable programmable read-only memory，简称为eeprom)、电可改写rom(electrically alterable read-only memory，简称为earom)或闪存(flash)或者两个或更多个以上这些的组合。在合适的情况下，该ram可以是静态随机存取存储器(static random-access memory，简称为sram)或动态随机存取存储器(dynamic random access memory，简称为dram)，其中，dram可以是快速页模式动态随机存取存储器404(fast page mode dynamic random access memory，简称为fpmdram)、扩展数据输出动态随机存取存储器(extended date out dynamic random access memory，简称为edodram)、同步动态随机存取内存(synchronous dynamic random-access memory，简称sdram)等。
[0082]
存储器404可以用来存储或者缓存需要处理和/或通信使用的各种数据文件，以及处理器402所执行的可能的计算机程序指令。
[0083]
处理器402通过读取并执行存储器404中存储的计算机程序指令，以实现上述实施例中的任意一种基于canvas画布的区域图形编辑方法。
[0084]
可选地，上述电子装置还可以包括传输设备406以及输入输出设备408，其中，该传输设备406和上述处理器402连接，该输入输出设备408和上述处理器402连接。
[0085]
传输设备406可以用来经由一个网络接收或者发送数据。上述的网络具体实例可包括电子装置的通信供应商提供的有线或无线网络。在一个实例中，传输设备包括一个网络适配器(network interface controller，简称为nic)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输设备406可以为射频(radio frequency，简称为rf)模块，其用于通过无线方式与互联网进行通讯。
[0086]
输入输出设备408用于输入或输出信息。在本实施例中，输入的信息可以是当前数据表例如疫情流调文档、特征数据、模板表等，输出的信息可以是特征指纹、指纹模板、文本分类推荐信息、文件模板配置映射表、文件模板配置信息表等。
[0087]
可选地，在本实施例中，上述处理器402可以被设置为通过计算机程序执行以下步骤：
[0088]
获取所述canvas画布上每一所述区域图形对应的图形数据组成图形数据集，所述图形数据集中每一所述图形数据按照对应区域图形的层级排序；
[0089]
监听所述canvas画布上的鼠标点击事件，获取鼠标点击位置；
[0090]
清空所述canvas画布，遍历所述图形数据集，按照所述图形数据集中的图形数据依次重新绘制对应的区域图形，每重新绘制一个所述区域图形判断所述鼠标点击位置是否在该区域图形内，若所述鼠标点击位置在该区域图形内，则将该区域图形作为选中区域图
形；
[0091]
对所述选中区域图形进行编辑操作。
[0092]
需要说明的是，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。
[0093]
另外，结合上述实施例一中的任意一种基于canvas画布的区域图形编辑方法，本技术实施例可一种计算机程序产品来实现。该计算机程序产品该计算机程序产品包括软件代码部分，当所述计算机程序产品在计算机上被运行时，所述软件代码部分用于执行实现上述实施例一中的任意一种基于canvas画布的区域图形编辑方法。
[0094]
并且，结合上述实施例一中的任意一种基于canvas画布的区域图形编辑方法，本技术实施例可提供一种可读存储介质来实现。该可读存储介质上存储有计算机程序；该计算机程序被处理器执行时实现上述实施例中的任意一种基于canvas画布的区域图形编辑方法。
[0095]
通常，各种实施例可以以硬件或专用电路、软件、逻辑或其任何组合来实现。本发明的一些方面可以以硬件来实现，而其他方面可以以可以由控制器、微处理器或其他计算设备执行的固件或软件来实现，但是本发明不限于此。尽管本发明的各个方面可以被示出和描述为框图、流程图或使用一些其他图形表示，但是应当理解，作为非限制性示例，本文中描述的这些框、装置、系统、技术或方法可以以硬件、软件、固件、专用电路或逻辑、通用硬件或控制器或其他计算设备或其某种组合来实现。
[0096]
本发明的实施例可以由计算机软件来实现，该计算机软件由移动设备的数据处理器诸如在处理器实体中可执行，或者由硬件来实现，或者由软件和硬件的组合来实现。包括软件例程、小程序和/或宏的计算机软件或程序(也称为程序产品)可以存储在任何装置可读数据存储介质中，并且它们包括用于执行特定任务的程序指令。计算机程序产品可以包括当程序运行时被配置为执行实施例的一个或多个计算机可执行组件。一个或多个计算机可执行组件可以是至少一个软件代码或其一部分。另外，在这一点上，应当注意，如图中的逻辑流程的任何框可以表示程序步骤、或者互连的逻辑电路、框和功能、或者程序步骤和逻辑电路、框和功能的组合。软件可以存储在诸如存储器芯片或在处理器内实现的存储块等物理介质、诸如硬盘或软盘等磁性介质、以及诸如例如dvd及其数据变体、cd等光学介质上。物理介质是非瞬态介质。
[0097]
本领域的技术人员应该明白，以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。
[0098]
以上实施例仅表达了本技术的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对本技术范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本技术构思的前提下，还可以做出若干变形和改进，这些都属于本技术的保护范围。因此，本技术的保护范围应以所附权利要求为准。