可视化编辑器 之 原素拖动部位、尺寸、转动分析

此生的死神千年血战篇镇楼

环境

以前企业开发设计了一款可视化编辑器，因为之前开发设计急匆匆，引导线的程序模块做出来的不太健全，而且没有吸咐作用。近日刚好有时长，把生成逻辑重新写过改善了一下，并增强了吸咐作用，在这里分享一下完成的基本原理。

文中剖析关键点

1. 引导线生成逻辑
2. 引导线表明提升
3. 引导线吸咐逻辑性

效果展示

一.引导线形成基本原理

1. 首先你要了解，引导线就是为了让两端对齐某一原素而产生的参考线，看中图
2. 一般大家会让一个元素 左、中、右，上、中、下 六个位置进行两端对齐,其实就是图片中的ABC(竖向)、DEF(横着)六条线
3. 知道要形成什么线，逻辑性就清晰了，我们只需在拖动原素时，获得要两端对齐元素六个点，随后建立相对应的引导线就可以了。

伪代码（仅限于概述基本原理，文章内容最终会另附demo）

// 1.拖拽原素时，获得要两端对齐元素六个点
// 倘若橙框的尺寸为 100* 100， left、top都是100
let lineX = [left, left width/2, left width]; // ABC坐标位置 [100,150,200]
let lineY = [top, top height/2, top height]; // DEF坐标位置  [100,150,200]

// 2.循环系统lineX、lineY建立引导线
lineX.forEach(item => {
  createVerticalLine(item) //建立竖向引导线
})
lineY.forEach(item => {
  createHorizontalLine(item) //建立横着引导线
})

二、引导线形成提升

在实践应用环节中，一个画板中会有一些原素，假如不做解决，形成出的引导线会特别多，下边翠绿色是指竖向的引导线，如果加上横向的，你几乎猜疑建立的并不是引导线，反而是网格图