【技术实现步骤摘要】
本专利技术属于数据编制流程交互，具体涉及一种数据编织系统流程设计自动吸附对齐的交互方法。
技术介绍
1、流程模块设计在很多领域中都有涉及，也是较为常用的工具之一，但对于搭建一条清晰整齐，信息易读取的流程设计模块并不是一项简单的活动任务，流程的搭建过程多数情况是数据量庞大繁复且冗杂的，数据之接的连接关系错综复杂。搭建完成后位置关系常常需要进行像素级的调整以达到清晰阅读的目的。
2、目前的技术提供辅助线提示方式，没有解决数据项模块的对齐居中和间隔等距的问题。大量的数据项模块之间的连接是无序的，为达到清晰可读取的流程关系，需要手动调整方向和对齐位置。整个交互过程是复杂和不明晰的，需要用户手眼配合才能完成，增加了的操作的难度。
3、因此，针对上述问题，予以进一步改进。
技术实现思路
1、本专利技术的主要目的在于提供一种数据编织系统流程设计自动吸附对齐的交互方法，其设计一种数据元素模块之间的自动吸附和对齐位置的交互方法，拖拽组件时支持自动吸附，位置居中对齐，实时显示热区位置背景参考，辅助用户快速判断，让数据连接编辑更加的可控可操作，提升信息的可读性。
2、为达到以上目的，本专利技术提供一种数据编织系统流程设计自动吸附对齐的交互方法，包括以下步骤：
3、步骤s1：定义一个可吸附的数据元素模块，数据元素模块为一个独立内容模块，具有可吸附和校准线功能并且辅助用户进行布局，设置数据元素模块的吸附热区，包括上、下、左、右吸附热区，多个数据元素模块之间具有
4、步骤s2：定义操作规则，对于多个数据元素模块之间的吸附，首先定位吸附点，选定一项数据元素模块作为吸附点后，当鼠标拖动其他数据元素模块水平或垂直地靠近时，通过显示辅助校准线和所属热区背景颜色块进行位置提示，当达到触发吸附热区的最小距离值时自动吸附，并且判定吸附位置；当吸附作用已形成时，鼠标在一定范围内移动均不会改变数据元素模块的位置(这样鼠标对齐就产生了一定的容错性，用户不需要进行像素级的调整，极大提升了操作的便捷性)；当鼠标拖动数据元素模块超出吸附热区范围时，吸附作用消失，此时的数据元素跟随鼠标自由移动；
5、步骤s3：设定吸附参数，采用设定固定阀值的方法；
6、(固定阈值：定义一个固定的阈值，吸附的距离参数是指当鼠标相对于吸附点的位置满足一定条件时(如距离小于一定阈值)，判断是否应该将数据元素模块吸附到吸附点上。如：以水平位置拖动吸附为例，水平拖动时，可与吸附点的上、中、下的区域可以产生吸附，设置水平吸附阀值。当鼠标拖动数据元素模块与吸附点产生交互时，触发(筛选min上、min下、min中)小于吸附热区的水平吸附阈值时，距离最近的则自动吸附。反之大于吸附阀值时，则不产生自动吸附的效果。)
7、步骤s4：定义吸附的规则，吸附居中对齐是指当数据元素模块被吸附到吸附点上时，数据元素模块会自动居中对齐到吸附点上；
8、步骤s5：实现吸附的释放逻辑(指移除当前吸附状态)，当释放鼠标时，判断是否应该将数据元素模块从吸附点上释放。
9、作为上述技术方案的进一步优选的技术方案，对于步骤s1，总热区的面积为40*40*32像素的框，将热区分为32个40*40px的像素小框，设置4个吸附热区的位置，分别对应上吸附热区、下吸附热区、左吸附热区和右吸附热区的位置，并且采用4*8的布局样式对总热区面积进行分割，上吸附热区和下吸附热区分别对应为2*8个像素框，左吸附热区和右吸附热区分别对应为2*4个像素框；与选定的吸附点，吸附后则居中对齐吸附热区。
10、作为上述技术方案的进一步优选的技术方案，当一项数据元素模块用来控制靠近吸附点任意区域吸附热区时，触发最小可吸附阀值将会进行自动吸附对齐，且自动判断相应的被吸附位置；当数据元素模块拖拽移动时，可以根据数据元素模块的位置信息和吸附点的位置信息，判断数据元素模块是否靠近吸附点，触达时便可产生吸附动作，会显示该热区位置背景颜色进行提示，辅助用户进行吸附位置的判断，提升用户的操作的可控性。
11、作为上述技术方案的进一步优选的技术方案，吸附居中对齐的实现具体实施为：
12、步骤s4.1：获取数据元素模块的位置信息，通过定位获取数据元素模块位置信息；
13、步骤s4.2：计算吸附点的中心位置，根据吸附点的位置和大小，计算出吸附点的中心位置；
14、步骤s4.3：计算数据元素模块与吸附点的距离，根据数据元素模块的位置信息和吸附点的中心位置，计算出数据元素模块与吸附点的距离；
15、步骤s4.4：判断数据元素模块是否在吸附点热区范围内，根据数据元素模块与吸附点的距离和吸附点的热区范围，判断数据元素模块是否在吸附点热区范围内；
16、步骤s4.5：实现居中对齐，如果数据元素模块在吸附点热区范围内，则实现居中对齐效果；具体实现通过以下方法：当数据元素模块的高度大于吸附点热区的高度时，则将数据元素模块的高度调整到可触发吸附点热区的高度，并将数据源元素模块向下移动到吸附点热区的上方；当数据元素模块的高度小于吸附点热区的高度时，则将数据元素模块的高度调整到吸附点热区的高度，并将数据元素模块向上移动到吸附点热区下方；当数据元素模块的宽度大于吸附点热区的宽度时，则将数据元素模块的宽度调整到吸附点的热区宽度，并将数据元素模块向左移动到吸附点热区的右方；当数据元素模块的宽度小于吸附点热区的宽度时，则将数据元素模块的宽度调整到吸附点热区的宽度，并将数据元素模块向右移动到吸附点热区左方；
17、步骤s4.6：更新数据元素模块的位置信息和样式信息：实现居中对齐后，根据需求更新数据元素模块的位置信息和样式信息，以便正确地显示数据元素模块的位置和状态(该吸附居中对齐是一种简单有效的交互方法，旨在帮助用户在实际的操作中更加便捷高效的满足用户的需求，及提高信息的可识别性)。
18、作为上述技术方案的进一步优选的技术方案，步骤s5的吸附释放具体实施为：
19、采用鼠标释放位置判断释放：首先判断鼠标释放的位置是否在吸附点的范围内：根据吸附点的位置和大小，判断鼠标释放的位置是否在吸附点的范围内；如果在吸附点的范围内，则将数据元素模块从吸附点上释放；如果不在吸附点的范围内，则不将数据元素模块从吸附点上释放；
20、实现释放动画：当需要将数据元素模块从吸附点上释放时，通过动画实现(可以实现一种释放动画，以增强用户体验。释放动画是简单的弹性释放效果，数据元素模块吸附的可释放性满足的用户的操作可控性)。
21、为达到以上目的，本专利技术还提供一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现所述数据编织系统流程设计自动吸附对齐的交互方法的步骤。
22、为达到以上目的，本专利技术还提供一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现所述数据编织系统流程设本文档来自技高网...
【技术保护点】
1.一种数据编织系统流程设计自动吸附对齐的交互方法，其特征在于，包括以下步骤：
2.根据权利要求1所述的一种数据编织系统流程设计自动吸附对齐的交互方法，其特征在于，对于步骤S1，总热区的面积为40*40*32像素的框，将热区分为32个40*40px的像素小框，设置4个吸附热区的位置，分别对应上吸附热区、下吸附热区、左吸附热区和右吸附热区的位置，并且采用4*8的布局样式对总热区面积进行分割，上吸附热区和下吸附热区分别对应为2*8个像素框，左吸附热区和右吸附热区分别对应为2*4个像素框；与选定的吸附点，吸附后则居中对齐吸附热区。
3.根据权利要求2所述的一种数据编织系统流程设计自动吸附对齐的交互方法，其特征在于，当一项数据元素模块用来控制靠近吸附点任意区域吸附热区时，触发最小可吸附阀值将会进行自动吸附对齐，且自动判断相应的被吸附位置；当数据元素模块拖拽移动时，可以根据数据元素模块的位置信息和吸附点的位置信息，判断数据元素模块是否靠近吸附点，触达时便可产生吸附动作，会显示该热区位置背景颜色进行提示，辅助用户进行吸附位置的判断，提升用户的操作的可控性。
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。