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

随笔6个月前发布 陳柏君
70 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);
                }
            });
        }
    }

© 版权声明

相关文章

暂无评论

您必须登录才能参与评论!
立即登录
暂无评论...