【技术实现步骤摘要】
本专利技术涉及前端优化，具体地说是一种基于数据可视化设计器拖拽交互的优化方法、设备及介质。
技术介绍
1、目前，主流的网页设计器的组件库已经很丰富，对组件的渲染和配置的支持也十分成熟，但是在位置选择或布局的操作，普遍使用简单的鼠标拖拽移动位置的方法，没有考虑到用户拖拽带来的操作难度和排版规范性问题，使得绘制过程复杂，整体摆放不齐。
2、可视化设计器的结构一般分为三部分，分别为组件库(echarts图表、form输入表单等展示内容)、画板(组件摆放的区域)、配置栏(修改画布或组件的样式、数据等操作的工具栏)，用户在使用时，通过拖拽或者选择组件库中的组件，放置于画板上进行展示，同时设置其位置，最后在配置栏对组件设置样式、数据等信息。
3、现在的可视化产品，最常见的新增组件的方式，就是通过控制鼠标拖拽组件到画布的操作。web浏览器的拖拽事件，一般是基于javascript提供的dragstart事件作为拖拽触发器，然后用drop作为接收触发器。所以，在组件库的组件上绑定dragstart事件，用当前event对象的datatransfer.setdata方法存储组件信息；在画板容器上绑定drop事件，用于拖拽到画板时接收组件信息，通过当前event对象的datatransfer.getdata方法获取组件信息后，对组件进行渲染。这种是常见的自定义拖拽布局的实现过程。
4、上述传统的设计模型可以实现基本的设计功能，但是在操作上并不友好，缺点如下：
5、①拖拽过程中需要肉眼去确定摆放的位置，
6、②大量的拖拽摆放操作，劳动量大且容易疲劳，不符合智能化要求；
7、故如何实现从组件库到画布上及画布中组件位置更换，提升用户交互体验是目前亟待解决的技术问题。
技术实现思路
1、本专利技术的技术任务是提供一种基于数据可视化设计器拖拽交互的优化方法、设备及介质，来解决如何实现从组件库到画布上及画布中组件位置更换，提升用户交互体验的问题。
2、本专利技术的技术任务是按以下方式实现的，一种基于数据可视化设计器拖拽交互的优化方法，该方法是基于开源技术，结合javascript原生技术，进行二次开发，通过修改底层代码和进一步封装的方式，实现复合型的栅格组件；并在画板边缘区域增加可点击的区域，作为增加辅助线的锚点，实现在画布上增加辅助线；同时基于边线或辅助线自动吸附，实现吸附效果。
3、作为优选，实现复合型的栅格组件具体如下：
4、基于vue-draggable实现栅格组件、栅格组件样式配置、栅格内部组件拖拽移动位置交互；
5、基于开源技术vue-draggable的二次封装，实现可配置的自定义的更灵活的栅格组件，并结合可视化图表进行展示。
6、更优地，vue-draggable是基于文本流的布局方式，对内部组件进行自动布局，并支持栅格内组件的位置移动与交换；其中，内部组件包括echarts图表、输入框及图片。
7、更优地，栅格组件的列数配置具体如下：
8、用户任意设置为n列，根据设置的列数，遍历相应个数的<draggable>组件，每列的组件列表之间支持拖拽更换位置，且对列中的组件的横向对齐方式进行设置居左、居中或居右。
9、作为优选，对组件摆放相对整齐的设计场景，使用栅格组件进行摆放，当任何组件拖入栅格组件时，栅格组件对拖入的组件进行位置处理，根据流式布局的渲染规则，对栅格内组件逐个进行渲染；用户只需要把组件放入栅格即可，减少了校对位置的操作。
10、作为优选，辅助线包括横向辅助线和纵向辅助线，辅助线是画布上存在的一条直线，把需要支持边线对齐的组件以辅助线作为标的，在拖拽时与辅助线对齐即可，每个组件的边线实现对齐；
11、移动辅助线：对已存在的辅助线，通过拖拽的试行换位置；
12、删除辅助线：在对齐操作完成时，删除辅助线。
13、更优地，纵辅助线增加具体如下：
14、点击对应区域时，通过event获取对应点位的横坐标，基于横坐标，通过html画出宽度为1，高度为画板高度且与画布呈90度的一条直虚线，作为组件对齐的参考物。
15、作为优选，基于边线或辅助线自动吸附，实现吸附效果具体如下：
16、将辅助线或边线作为参考物，在对任意组件拖拽过程中，实时获取组件的相对坐标，同时获取横向辅助线和纵向辅助线的位置，将组件的左边线和右边线的x坐标对比所有纵向辅助线和左右两条边线的距离是否小于设定阈值，并用组件的上边线和下边线的y坐标对比所有横向辅助线和上下两条边线的距离是否小于设定阈值：
17、若是，则把对应边线的坐标赋值为吸附的边线的坐标，达到吸附效果。
18、一种电子设备，包括：存储器和至少一个处理器；
19、其中，所述存储器上存储有计算机程序；
20、所述至少一个处理器执行所述存储器存储的计算机程序，使得所述至少一个处理器执行如上述的基于数据可视化设计器拖拽交互的优化方法。
21、一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如上述的基于数据可视化设计器拖拽交互的优化方法。
22、本专利技术的基于数据可视化设计器拖拽交互的优化方法、设备及介质具有以下优点：
23、(一)本专利技术提高了用户操作精准度、支持辅助拖拽，并且对鼠标拖拽方法进行了主动性修正操作，解决了用户在鼠标拖拽组件时，难以做到与其它组件等边对齐的问题，提高了整体排版整齐度，而且具有良好的推广应用价值；
24、(二)本专利技术实现从组件库到画布上及画布中组件位置更换，提升用户交互体验；
25、(三)本专利技术增加了主动布局容器，基于布局容器自身的布局规则，对容器内组件位置进行控制，减少用户鼠标操作，比如市面上常见的栅格组件，通过控制行列个数，对栅格内组件的位置进行控制；
26、(四)本专利技术增加了辅助类拖拽功能，在拖拽过程中进行辅助类的位置纠正，减少细节误差，比如自动吸附功能，在拖拽过程中实时计算当前组件与周边组件的距离，在距离小于某阈值时，自动吸附上去；
27、(五)本专利技术能够让拖拽交互更快捷，对用户的错误操作做出预防性措施，为用户提供更友好的体验。
本文档来自技高网...【技术保护点】
1.一种基于数据可视化设计器拖拽交互的优化方法，其特征在于，该方法是基于开源技术，结合javascript原生技术，进行二次开发，通过修改底层代码和进一步封装的方式，实现复合型的栅格组件；并在画板边缘区域增加可点击的区域，作为增加辅助线的锚点，实现在画布上增加辅助线；同时基于边线或辅助线自动吸附，实现吸附效果。
2.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，实现复合型的栅格组件具体如下：
3.根据权利要求2所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，vue-draggable是基于文本流的布局方式，对内部组件进行自动布局，并支持栅格内组件的位置移动与交换；其中，内部组件包括Echarts图表、输入框及图片。
4.根据权利要求2所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，栅格组件的列数配置具体如下：
5.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，对组件摆放相对整齐的设计场景，使用栅格组件进行摆放，当任何组件拖入栅格组件时，栅格组件对拖入的组件进行位
6.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，辅助线包括横向辅助线和纵向辅助线，辅助线是画布上存在的一条直线，把需要支持边线对齐的组件以辅助线作为标的，在拖拽时与辅助线对齐即可，每个组件的边线实现对齐；
7.根据权利要求6所述的基于数据可视化设计器拖拽交互的优化方法、，其特征在于，纵辅助线增加具体如下：
8.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，基于边线或辅助线自动吸附，实现吸附效果具体如下：
9.一种电子设备，其特征在于，包括：存储器和至少一个处理器；
10.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质中存储有计算机程序，所述计算机程序可被处理器执行以实现如权利要求1至8中任一项所述的基于数据可视化设计器拖拽交互的优化方法。
...【技术特征摘要】
1.一种基于数据可视化设计器拖拽交互的优化方法，其特征在于，该方法是基于开源技术，结合javascript原生技术，进行二次开发，通过修改底层代码和进一步封装的方式，实现复合型的栅格组件；并在画板边缘区域增加可点击的区域，作为增加辅助线的锚点，实现在画布上增加辅助线；同时基于边线或辅助线自动吸附，实现吸附效果。
2.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，实现复合型的栅格组件具体如下：
3.根据权利要求2所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，vue-draggable是基于文本流的布局方式，对内部组件进行自动布局，并支持栅格内组件的位置移动与交换；其中，内部组件包括echarts图表、输入框及图片。
4.根据权利要求2所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，栅格组件的列数配置具体如下：
5.根据权利要求1所述的基于数据可视化设计器拖拽交互的优化方法，其特征在于，对组件摆放相对整齐的设计场景，使用栅格...
【专利技术属性】
技术研发人员：刘兴蒙，陈晏鹏，周双，司衍芹，
申请(专利权)人：浪潮软件股份有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。