CN119396399A 组件可视化前端页面自动布局方法、系统、装置及介质 （朗坤智慧科技股份有限公司）

组件可视化前端页面自动布局方法、系统、22.如权利要求1所述的组件可视化前端页面自动布局方法，其特征在于：所述组件包3.如权利要求1或2所述的组件可视化前端页用户通过拖拽动作，从已注册的组件库中选取覆盖区域FG中存在大于XC+WC的横坐标；3覆盖区域FG中存在小于YC-HC的纵坐标。在启用了垂直空间压缩策略的情况下，通过堆叠检测，逐所述堆叠检测包括，将当前拖拽的网格所覆盖的区域FG与逐一画布上,采集在左侧边界和右侧边界之间的所有已放置网格，若采集的所有若采集的所有已放置网格，均未超出所述左侧边若采集的所有已放置网格，存在超出所述左侧边界或所述右侧边完成边界的拓展后，更新所述左侧边界和所述右侧边界，重新判4,,f(y)=1；若输入的y值所在直线穿过任一已放置网格，则f(y)=0。在存在足够空余空间的情况下，当分界线穿过已放置网格时QP+1,QP+2…Qq分别进行压缩，分界线两侧的压缩比例分别从一开始的100%按照在不存在足够空余空间的情况下，当分界线穿过已放置网格时，间隙部分长度Q,进行放大，同时将Q1,Q2…QP-1以及QP+1,QP+2…Qq全部压缩为12.一种采用如权利要求1_11任一所述方法的组件可视化前端页面自动布局系统，其5被处理器执行时实现组件可视化前端页面自动布局6难以满足快速迭代以及高度定制化的市场需求。尽管基于组件化的前端开发框架如7,其中，BG;表示第i个已放置网格所覆盖的区域，i表示已放置网格的索引，8[0034]采集在左侧边界和右侧边界之间的所有已放置网格，若格排列为一列，则仅对所述左侧边界和所述右侧边界之间的已放置网格进行空余空间分述右侧边界之间的已放置网格进行全局垂直空,,识别函数，在所述左侧边界和所述右侧边界之间，若输入的y值所在直线未穿过已放置网述自动调整包括，通过识别函数f(y)，在所述左侧边界和所述右侧边界之间识别f(y)=19QP+1,QP+2…Qq分别进行压缩，分界线两侧的压缩比例分别从一开始的100%按照[0043]其中，BY表示当前拖拽的网格上下边缘所在直线与已放置网格边缘所在直线的续的间隙部分长度Q,进行放大，同时将Q1,Q2…QP-1以及QP+1,QP+2…Qq全部压述处理器执行所述计算机程序时实现本发明中任一项所述的方[0054]图1为本发明第一个实施例提供的组件可视化前端页面自动布局方法的整体流程[0055]图2为本发明第一个实施例提供的组件可视化前端页面自动布局方法中间隙示意,其中，BG;表示第i个已放置网格所覆盖的区域，i表示已放置网格的索引，[0084]采集在左侧边界和右侧边界之间的所有已放置网格，若格排列为一列，则仅对所述左侧边界和所述右侧边界之间的已放置网格进行空余空间分述右侧边界之间的已放置网格进行全局垂直空排列不仅一列时，左侧边界和右侧边界的定义有助于划定拖拽网格可能占据的水平区域，使系统能够对更广泛的网格区域进行垂直空间评估，保证拖拽网格能放置在最优化的位,,识别函数，在所述左侧边界和所述右侧边界之间，若输入的y值所在直线未穿过已放置网法仅统计箭头1+箭头2的间隙长度，并不统计箭头1+箭头4的间隙长度或箭头3+箭头2的间[0092]通过识别函数f(y)，在所述左侧边界和所述右侧边界之间识别f(y)=1的部分，QP+1,QP+2…Qq分别进行压缩，分界线两侧的压缩比例分别从一开始的100%按照0.01%的压缩步长逐渐减小，直到不存在堆叠且BY≥MBY时，停止减小压缩比例。其中，BY表示当前拖拽的网格上下边缘所在直线与已放置网格边缘所在直线的最短垂直距离；Q1,Q2…QP-1的数值也逐渐减小，此时的终止判据。对于下侧而言，Q,之后的QP+1,QP+2…Qq的数值也逐渐减小，此时获取无重叠的情况下找到合理的位置。这种调整机制避免了传统固定空间布局带来的局限性，续的间隙部分长度Q,进行放大，同时