前端模拟office编写元素横向对齐功能

69 0 0

项目需求

选中多个元素，可以进行设置横向分布、纵向分布、左对齐、右对齐、上对齐、下对齐。并且参考office的对齐方式去做功能。
其他对齐方式比较简单就不多说了。主要讲横向分布的实现原理
废话不多说，经过看了很久office，我发现其横向分布的原理为：

首先在选中的元素中找到两个距离最长的元素，算出两者之间的距离（left_diff），最长和最短的元素位置不需要变动。然后计算出剩余元素的宽度的和（centerElemWidthAdd）便可得出元素与元素之间的间距：

const spacingItem = parseInt((left_diff – centerElemWidthAdd) / (elemArrs.length -1));

其中 elemArrs为选中元素的数组

总的来说：找到两个距离最长的元素，算出最长距离。根据元素个数，算出元素与元素之间的间隔，进行排列

具体代码如下

HorizontalAlign(){
        if(this.ctrlActiveElemGuidArrs.length > 1){
            let elemArrs = [...this.getElemAlign()];  // 首先把选中的几个元素的属性，放在一个数组中
            //console.log(elemArrs, '选中的元素的集合');
            //找出left值最大和最小
            let leftMaxGuid = '', leftMinGuid = '';
            let [left_max, left_min, width_max, width_mix] = this.findMaxAndMin(elemArrs, 'elem_attr', 'Left', 'Width');
            
            let elem_arrs = this.arrSortSequ(elemArrs, 'Left');
            let elemLength = elem_arrs.length;
            leftMinGuid = elem_arrs[0]['elem_attr']['Guid'];  //最小left的元素的guid
            leftMaxGuid = elem_arrs[elemLength - 1]['elem_attr']['Guid'];   //最大left的元素的guid
            //console.log(elem_arrs, 'elem_arrs')
            const left_diff = left_max - left_min - width_mix;  //两个距离最长的元素之间的差值

            let centerElemWidthAdd = 0;   //定义介于 最大left元素和top之间的元素的宽度的和
            for(let ie of elem_arrs){
                const guid = ie['elem_attr']['Guid'];
                if(guid !== leftMinGuid && guid !== leftMaxGuid){
                    centerElemWidthAdd = centerElemWidthAdd + ie['elem_attr']['Width'];
                }
            }
            const spacingItem = parseInt((left_diff - centerElemWidthAdd) / (elemArrs.length -1)); //元素与元素之间的间距

            let leftArrs = [left_min];
            let widthArrs = [width_mix];
            elem_arrs.forEach((v,k) => {
                const guid = v['elem_attr']['Guid'];
                const left = v['elem_attr']['Left'];
                const width = v['elem_attr']['Width'];
                if(guid !== leftMinGuid && guid !== leftMaxGuid){
                    const left_v = leftArrs[k - 1] + widthArrs[k - 1] + spacingItem;
                    this.$set(this.templateData.ChildrenElem[v['elem_index']], 'Left', left_v);
                    leftArrs.push(left_v);
                    widthArrs.push(width);
                }
            });
        }
    }

# 随笔