一种平面图的点位绘制方法及系统与流程

本发明涉及平面图标点，并且更具体地，涉及一种平面图的点位绘制方法及系统。

背景技术：

1、现在市面上平面图的点位绘制通常涉及使用老旧的前端技术，或者使用复杂的图形库，存在诸多限制，如核心部分过于依赖第三方图形库导致软件无法二次开发，灵活性差；常要求用户在相同的分辨率甚至必须在同一台电脑上绘制与显示，这让程序的易用性大打折扣，用户体验也不佳，无法满足实际使用需求；图片不支持拖拽缩放，在绘制密集点位的情况下存在点位被覆盖问题，无法实现精确的点位绘制；对于多点绘制，现有平面图标点方法普遍是设定好顶点数，用户只能绘制固定的图形，使用场景受限。

技术实现思路

1、根据本发明，提供了一种平面图的点位绘制方法及系统，以解决现在市面上平面图的点位绘制无法二次开发，灵活性差，用户体验也不佳，无法满足实际使用需求，无法实现精确的点位绘制，使用场景受限的技术问题。

2、根据本发明的第一个方面，提供了一种平面图的点位绘制方法，包括：

3、基于vue框架，在绘制的起始阶段，注册多个鼠标事件，包括鼠标左键按下、鼠标左键松开、右键点击、鼠标移动以及滚轮事件；

4、基于所述多个鼠标事件，进行单点绘制或者多点绘制；

5、当绘制完成后，当鼠标悬浮在已经绘制的点位上，触发所述鼠标事件，输入所述点位的基本信息或者删除所述点位，获取当前平面图；

6、获取当前平面图视窗的尺寸作为原始视窗尺寸，基于所述原始视窗尺寸得到缩放比例，并进行坐标数据的修正，确定修正后的坐标信息，根据修正后的坐标信息，将点位绘制到平面图的相应位置。

7、可选地，基于vue框架，在绘制的起始阶段，注册多个鼠标事件，并对所述多个鼠标事件进行相应的处理，包括：

8、基于vue框架，在绘制的起始阶段，注册多个鼠标事件，包括鼠标左键按下、鼠标左键松开、右键点击、鼠标移动以及滚轮事件；

9、当用户按下鼠标左键并持续按住，计时器开始工作，如果按住时间超过五百毫秒，视为一次拖拽操作，用户可通过鼠标移动对平面图进行拖拽；

10、当鼠标滚轮滚动触发滚轮事件，通过滚轮事件中的回调函数记录滚动行程，称为delta值，和滚动方向，delta值为正值表示放大，为负值表示缩小；

11、缩放比例由一个初始值为1的scalevalue变量记录，层叠样式表css中的transform:scale属性对平面图进行缩放；

12、如果用户选择单点绘制，在鼠标左键松开后将完成一次标点动作，记录当前点位的坐标、图片尺寸和平面图视窗尺寸信息并发送至服务器。

13、可选地，基于所述多个鼠标事件，进行单点绘制或者多点绘制，包括：

14、在单点绘制模式下，将进行非区域绘制，当用户在平面图完成一次鼠标左键点击操作后，记录并保存相关信息，完成一次单点的点位标记动作；

15、在多点绘制模式下，用户设置绘制图形的顶点数，顶点数应大于2，用户使用鼠标左键在平面图上点击需要标记的区域，点击次数达到设定的顶点数后，将完成一次多点绘制，在标点绘制过程中，当用户点击鼠标右键后，将撤回已经绘制最新的一个点，完成多点标点绘制后，记录并保存与单点绘制相同的信息，多个坐标信息对应多个点位。

16、可选地，当绘制完成后，当鼠标悬浮在已经绘制的点位上，触发所述鼠标事件，输入所述点位的基本信息或者删除所述点位，获取当前平面图，包括：

17、当绘制完成后，当鼠标悬浮在已经绘制的点位上，显示两个操作按钮，其中一个按钮用于输入点位基本信息，另一个按钮用于删除点位，鼠标左键点击点位信息按钮用于录入相关点位信息数据，点击删除按钮将绘制的点位从页面与服务器中删除，获取当前平面图。

18、可选地，获取当前平面图视窗的尺寸作为原始视窗尺寸，基于所述原始视窗尺寸得到缩放比例，并进行坐标数据的修正，确定修正后的坐标信息，根据修正后的坐标信息，将点位绘制到平面图的相应位置，包括：

19、当浏览器完成程序页面加载后，获取当前平面图视窗的尺寸作为原始视窗尺寸，在第一次绘制完成后此与点位坐标一同存入服务器；

20、当其他用户在不同分辨率下打开此页面并从服务器获取到当前平面图，获取其他用户当前平面图视窗的尺寸，并判断当前平面图的原始比例：若当前图片宽高比小于1，那么当前平面图视窗的宽度将与原始尺寸中的宽度相除，反之则平面图视窗的高度与原始尺寸中的高度相除得到缩放比例；

21、根据得到的缩放比例进行坐标数据的修正，确定修正后的坐标信息，确保点位坐标在不同分辨率下的一致性；

22、根据修正后的坐标信息，将点位绘制到平面图的相应位置，以实现用户在显示端查看点位的效果。

23、根据本发明的另一个方面，还提供了一种平面图的点位绘制系统，包括：

24、注册鼠标事件模块，用于基于vue框架，在绘制的起始阶段，注册多个鼠标事件，包括鼠标左键按下、鼠标左键松开、右键点击、鼠标移动以及滚轮事件；

25、绘制平面图模块，用于基于所述多个鼠标事件，进行单点绘制或者多点绘制；

26、获取当前平面图模块，用于当绘制完成后，当鼠标悬浮在已经绘制的点位上，触发所述鼠标事件，输入所述点位的基本信息或者删除所述点位，获取当前平面图；

27、绘制点位模块，用于获取当前平面图视窗的尺寸作为原始视窗尺寸，基于所述原始视窗尺寸得到缩放比例，并进行坐标数据的修正，确定修正后的坐标信息，根据修正后的坐标信息，将点位绘制到平面图的相应位置。

28、可选地，注册鼠标事件模块，包括：

29、注册鼠标事件子模块，用于基于vue框架，在绘制的起始阶段，注册多个鼠标事件，包括鼠标左键按下、鼠标左键松开、右键点击、鼠标移动以及滚轮事件；

30、按下鼠标左键子模块，用于当用户按下鼠标左键并持续按住，计时器开始工作，如果按住时间超过五百毫秒，视为一次拖拽操作，用户可通过鼠标移动对平面图进行拖拽；

31、触发滚轮事件子模块，用于当鼠标滚轮滚动触发滚轮事件，通过滚轮事件中的回调函数记录滚动行程，称为delta值，和滚动方向，delta值为正值表示放大，为负值表示缩小；

32、缩放比例由一个初始值为1的scalevalue变量记录，层叠样式表css中的transform:scale属性对平面图进行缩放；

33、如果用户选择单点绘制，在鼠标左键松开后将完成一次标点动作，记录当前点位的坐标、图片尺寸和平面图视窗尺寸信息并发送至服务器。

34、可选地，绘制平面图模块，包括：

35、单点绘制子模块，用于在单点绘制模式下，将进行非区域绘制，当用户在平面图完成一次鼠标左键点击操作后，记录并保存相关信息，完成一次单点的点位标记动作；

36、多点绘制子模块，用于在多点绘制模式下，用户设置绘制图形的顶点数，顶点数应大于2，用户使用鼠标左键在平面图上点击需要标记的区域，点击次数达到设定的顶点数后，将完成一次多点绘制，在标点绘制过程中，当用户点击鼠标右键后，将撤回已经绘制最新的一个点，完成多点标点绘制后，记录并保存与单点绘制相同的信息，多个坐标信息对应多个点位。

37、可选地，获取当前平面图模块，包括：

38、获取当前平面图子模块，用于当绘制完成后，当鼠标悬浮在已经绘制的点位上，显示两个操作按钮，其中一个按钮用于输入点位基本信息，另一个按钮用于删除点位，鼠标左键点击点位信息按钮用于录入相关点位信息数据，点击删除按钮将绘制的点位从页面与服务器中删除，获取当前平面图。

39、可选地，绘制点位模块，包括：

40、获取原始尺寸子模块，用于当浏览器完成程序页面加载后，获取当前平面图视窗的尺寸作为原始视窗尺寸，在第一次绘制完成后此与点位坐标一同存入服务器；

41、得到缩放比例子模块，用于当其他用户在不同分辨率下打开此页面并从服务器获取到当前平面图，获取其他用户当前平面图视窗的尺寸，并判断当前平面图的原始比例：若当前图片宽高比小于1，那么当前平面图视窗的宽度将与原始尺寸中的宽度相除，反之则平面图视窗的高度与原始尺寸中的高度相除得到缩放比例；

42、修正坐标信息子模块，用于根据得到的缩放比例进行坐标数据的修正，确定修正后的坐标信息，确保点位坐标在不同分辨率下的一致性；

43、绘制点位子模块，用于根据修正后的坐标信息，将点位绘制到平面图的相应位置，以实现用户在显示端查看点位的效果。

44、从而，基于高度可复用、模块化的vue框架下开发，相较于现市面上其他平面图软件固定参数、非模块化来说，本发明几乎所有参数均可配置，内聚度高，对于开发者基于本软件进行二次开发效率更高，更加友好；在高度可配置的前提下，实现了更灵活的可配置顶点数操作，配合拖拽与缩放功能，可以绘制出更复杂、精细的点位；自适应分辨率功能也让多端绘制有了一致的效果。用户可以自由在不同分辨率设备之间进行精确的点位绘制与查看；在进行多点绘制时，可自定义顶点数实现任意图形的绘制。