前言
当点击画布中的某一个物料时，做一个辅助线，这样有利于在配置面板中修改时能看得到是否已经是对齐。在拖动过程中算出最近的物料并将其辅助线标记出来，一是更加直观，而则有利于后序吸附对齐功能的实现
分析
鼠标坐标信息的选择：由于在鼠标拖拽过程中能取到的坐标信息为clientX/Y、offsetX/Y和screenX/Y，其中offsetX是相对于事件源的，受每一次点击开始的位置影响而有不同，具有不确定性，故舍弃、screenY则包含了顶部浏览器标签页，也是不准确的，故使用client最佳
定位方式的选择：基于的分析，如果使用relative和absolute，则在交互组件嵌套过深时计算其相对位置比较复杂，故考虑使用fixed，这样就只需要计算出顶栏和物料菜单的宽高并减掉即可
辅助线的实现：辅助线相对于物料而言是全局的，只有这样才能让其脱离物料展示，故考虑teleport向body传送
实现
创建teleport组件
当点击物料时，设置teleport的坐标与宽高并传递到body展示
效果如下
当拖拽到画布区域时，计算出距离画布中对应的schame中最近的那一个物料并显示辅助线（如下以框红的80为显隐边界。这里并没有使用节流或者防抖来做一层所谓的优化，是因为这样就无法实时判断处理了）
网友评论