低代码--辅助线

$\bullet$ 前言

当点击画布中的某一个物料时，做一个辅助线，这样有利于在配置面板中修改时能看得到是否已经是对齐。在拖动过程中算出最近的物料并将其辅助线标记出来，一是更加直观，而则有利于后序吸附对齐功能的实现

$\bullet$ 分析

$\alpha$ 鼠标坐标信息的选择：由于在鼠标拖拽过程中能取到的坐标信息为clientX/Y、offsetX/Y和screenX/Y，其中offsetX是相对于事件源的，受每一次点击开始的位置影响而有不同，具有不确定性，故舍弃、screenY则包含了顶部浏览器标签页，也是不准确的，故使用client最佳

$\beta$ 定位方式的选择：基于 $\alpha$ 的分析，如果使用relative和absolute，则在交互组件嵌套过深时计算其相对位置比较复杂，故考虑使用fixed，这样就只需要计算出顶栏和物料菜单的宽高并减掉即可

$\gamma$ 辅助线的实现：辅助线相对于物料而言是全局的，只有这样才能让其脱离物料展示，故考虑teleport向body传送

$\bullet$ 实现

$\ast$ 创建teleport组件

$\ast$ 当点击物料时，设置teleport的坐标与宽高并传递到body展示

效果如下

$\ast$ 当拖拽到画布区域时，计算出距离画布中对应的schame中最近的那一个物料并显示辅助线（如下以框红的80为显隐边界。这里并没有使用节流或者防抖来做一层所谓的优化，是因为这样就无法实时判断处理了）

低代码--辅助线

推荐阅读更多精彩内容