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