CN117911566A - 一种平面图的点位绘制方法及系统 - Google Patents

Abstract

本发明公开了一种平面图的点位绘制方法及系统。其中，该方法包括：基于Vue框架，在绘制的起始阶段，注册多个鼠标事件，包括鼠标左键按下、鼠标左键松开、右键点击、鼠标移动以及滚轮事件；基于所述多个鼠标事件，进行单点绘制或者多点绘制；当绘制完成后，当鼠标悬浮在已经绘制的点位上，触发所述鼠标事件，输入所述点位的基本信息或者删除所述点位，获取当前平面图；获取当前平面图视窗的尺寸作为原始视窗尺寸，基于所述原始视窗尺寸得到缩放比例，并进行坐标数据的修正，确定修正后的坐标信息，根据修正后的坐标信息，将点位绘制到平面图的相应位置。

Description

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

技术领域

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

背景技术

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

附图说明

通过参考下面的附图，可以更为完整地理解本发明的示例性实施方式：

图1为本实施方式所述的一种平面图的点位绘制方法的流程示意图；

图2为本实施方式所述的定点数确定多点绘制的示意图；

图3为本实施方式所述的将点位绘制到平面图的相应位置的示意图；

图4为本实施方式所述的一种平面图的点位绘制系统的示意图。

具体实施方式

现在参考附图介绍本发明的示例性实施方式，然而，本发明可以用许多不同的形式来实施，并且不局限于此处描述的实施例，提供这些实施例是为了详尽地且完全地公开本发明，并且向所属技术领域的技术人员充分传达本发明的范围。对于表示在附图中的示例性实施方式中的术语并不是对本发明的限定。在附图中，相同的单元/元件使用相同的附图标记。

除非另有说明，此处使用的术语(包括科技术语)对所属技术领域的技术人员具有通常的理解含义。另外，可以理解的是，以通常使用的词典限定的术语，应当被理解为与其相关领域的语境具有一致的含义，而不应该被理解为理想化的或过于正式的意义。

根据本发明的第一个方面，提供了一种平面图的点位绘制方法100，参考图1所示，该方法100包括：

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

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

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

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

具体地，本发明主要分为绘制端与显示端。在绘制端，用户可以进行单点或任意多点的标点绘制，并能够管理已完成的点位。在显示端，用户能够查看所有已绘制的点位，并查看点位信息。

绘制端

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

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

3、鼠标滚轮滚动触发滚轮事件，滚轮事件中的回调函数会记录滚动行程(称为delta值)和滚动方向(delta值为正值表示放大，为负值表示缩小)。

4、缩放比例由一个初始值为1的scaleValue变量记录，程序中会使用CSS(层叠样式表)中的transform:scale属性对平面图进行缩放。

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

单点绘制

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

多点绘制

参考图2所示，在多点绘制模式下，用户可以设置绘制图形的顶点数，顶点数应大于2。

用户使用鼠标左键在平面图上点击需要标记的区域，点击次数达到设定的顶点数后，将完成一次多点绘制。

在标点绘制过程中，当用户点击鼠标右键后，将撤回已经绘制最新的一个点。

完成多点标点绘制后，程序记录并保存与单点绘制相同的信息，但此时有多个坐标信息，对应多个点位。

点位管理

绘制完成后，当鼠标悬浮在已绘制的点位上，会出现两个操作按钮，一个用于输入点位基本信息，另一个用于删除点位。

鼠标左键点击点位信息按钮可录入相关点位信息数据；点击删除按钮可将绘制的点位从页面与服务器中删除。

显示端

1、当浏览器完成程序页面加载后，程序会自动获取当前平面图视窗的尺寸作为原始视窗尺寸(以下简称原始尺寸)，在第一次绘制完成后此数据会与点位坐标等数据一同存入服务器。

当其他用户在不同分辨率下打开此页面并从服务器获取到刚才绘制的数据后，程序会立即拿到当前平面图视窗的尺寸，并立即判断当前图片的原始比例：若当前图片宽高比小于1，那么当前平面图视窗的宽度将与原始尺寸中的宽度相除，反之则平面图视窗的高度与原始尺寸中的高度相除得到缩放比例。

根据得到的缩放比例进行坐标数据的修正，确保点位坐标在不同分辨率下的一致性。

最后根据这些坐标信息，使用SVG(可缩放矢量图形)技术将点位绘制到平面图的相应位置，以实现用户在显示端查看点位的效果参考图3所示。

从而，可配置的顶点数，实现任意复杂多边形绘制。自适应分辨率计算，可跨设备绘制与显示。细粒度的事件监听。可拖拽缩放实现更高精度绘制。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

根据本发明的另一个方面，还提供了一种平面图的点位绘制系统300，参考图3所示，该系统300包括：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

本发明的实施例的一种平面图的点位绘制系统300与本发明的另一个实施例的一种平面图的点位绘制方法100相对应，在此不再赘述。

本领域内的技术人员应明白，本申请的实施例可提供为方法、系统、或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。本申请实施例中的方案可以采用各种计算机语言实现，例如，面向对象的程序设计语言Java和直译式脚本语言JavaScript等。

本申请是参照根据本申请实施例的方法、设备(系统)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例作出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

Claims (10)

1.一种平面图的点位绘制方法，其特征在于，包括：

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

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

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

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

2.根据权利要求1所述的方法，其特征在于，基于Vue框架，在绘制的起始阶段，注册多个鼠标事件，并对所述多个鼠标事件进行相应的处理，包括：

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

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

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

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

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

3.根据权利要求1所述的方法，其特征在于，基于所述多个鼠标事件，进行单点绘制或者多点绘制，包括：

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

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

4.根据权利要求1所述的方法，其特征在于，当绘制完成后，当鼠标悬浮在已经绘制的点位上，触发所述鼠标事件，输入所述点位的基本信息或者删除所述点位，获取当前平面图，包括：

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

5.根据权利要求1所述的方法，其特征在于，获取当前平面图视窗的尺寸作为原始视窗尺寸，基于所述原始视窗尺寸得到缩放比例，并进行坐标数据的修正，确定修正后的坐标信息，根据修正后的坐标信息，将点位绘制到平面图的相应位置，包括：

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

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

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

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

6.一种平面图的点位绘制系统，其特征在于，包括：

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

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

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

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

7.根据权利要求6所述的系统，其特征在于，注册鼠标事件模块，包括：

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

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

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

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

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

8.根据权利要求7所述的系统，其特征在于，绘制平面图模块，包括：

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

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

9.根据权利要求6所述的系统，其特征在于，获取当前平面图模块，包括：

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

10.根据权利要求6所述的系统，其特征在于，绘制点位模块，包括：

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

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

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

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