| 可视化编辑器 之 辅助线生成、自动吸附原理解析 | 您所在的位置：网站首页 › vue可视化拖拽编辑原理 › 可视化编辑器 之 辅助线生成、自动吸附原理解析 |
可视化编辑器 之 辅助线生成、自动吸附原理解析
|
有生之年的死神千年血战篇镇楼 背景 之前公司开发了一款可视化编辑器，由于之前开发匆忙，辅助线的功能模块做的不是很完善，并且没有吸附功能。近日正好有时间，把生成逻辑重写优化了一下，并增加了吸附功能，在此分享一下实现的原理。 本文分析要点 辅助线生成逻辑 辅助线显示优化 辅助线吸附逻辑效果展示 伪代码（仅用于简述原理，文章最后会附上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) //创建横向辅助线 }) 二、辅助线生成优化在实际应用过程中，一个画布中会有很多元素，如果不做任何处理，生成出来的辅助线会非常多，下方绿色的是纵向的辅助线，如果加上横向的，你甚至怀疑创建的不是辅助线，而是网格 😂
针对以上情况，需要在创建时做相应的处理优化。 伪代码 // 1.在拖拽元素的过程中，实时获取拖动元素的坐标点，获取方式同之前一样，只不过拖拽元素的left、top是实时变化的 let selfX = [left, left+width/2, left+width]; let selfY = [top, top+height/2, top+height]; let distance = 10; //辅助线展示、吸附的距离 // 2.在创建辅助线的过程中，对返回所有创建的辅助线，然后取最近的一条进行创建 let arrX = []; selfX.forEach(self => { lineX.forEach(other => { if( Math.abs(self - other) |
【本文地址】
公司简介
联系我们