Search

CN-121980108-A - Page layout method, page layout device, electronic equipment and storage medium

CN121980108ACN 121980108 ACN121980108 ACN 121980108ACN-121980108-A

Abstract

The disclosure provides a page layout method, a page layout device, electronic equipment and a storage medium. The page layout method comprises the steps of monitoring size change of a container to obtain size information of the container in real time, wherein the size information of the container comprises width and height of the container, obtaining size information of grid cells according to the size information of the container, gridding the container based on the size information of the grid cells, determining screen geometric attributes of components according to the grid layout information of the components in the container, and performing visual rendering based on the screen geometric attributes of the components in the container to present the components in a current page. The method and the device can enable the page layout to achieve a better space utilization effect on display equipment with any proportion.

Inventors

  • Dong Zhangquan

Assignees

  • 京东方能源科技股份有限公司

Dates

Publication Date
20260505
Application Date
20260109

Claims (10)

  1. 1. A page layout method, characterized in that the page layout method comprises: monitoring the size change of a container to acquire the size information of the container in real time, wherein the size information of the container comprises the width and the height of the container; obtaining size information of grid cells according to the size information of the container, and gridding the container based on the size information of the grid cells, wherein the size information of the grid cells comprises the width and the height of the grid cells; determining the screen geometric attribute of each component according to the grid layout information of each component in the container; Performing visual rendering based on screen geometry attributes of components within the container to render the components in a current page.
  2. 2. The method of claim 1 wherein monitoring container size changes to obtain container size information in real time comprises monitoring container size changes using a browser native ResizeObserver interface to obtain container size information in real time.
  3. 3. The method of claim 1, wherein the obtaining size information of the grid cells from the size information of the container comprises: determining grid configuration information of the container, wherein the grid configuration information comprises grid rows, grid columns, grid row spacing and grid column spacing; Subtracting the sum of all horizontal intervals from the width of the container to obtain a net width applicable to grid cells, dividing the net width by the grid line number of the container to obtain the width of the grid cells, wherein the sum of all horizontal intervals is determined according to the grid line number and the grid line interval of the container; Subtracting the sum of all vertical intervals from the height of the container to obtain the net height for the grid cells, dividing the net height by the grid column number of the container to obtain the height of the grid cells, wherein the sum of all vertical intervals is determined according to the grid line number and the grid line interval of the container.
  4. 4. The method of claim 3, wherein determining the grid configuration information for the container comprises determining a current aspect ratio of the container based on the size information for the container, looking up first grid configuration information corresponding to the current aspect ratio of the container, and determining the first grid configuration information as the grid configuration information for the container.
  5. 5. A method according to claim 3, wherein the obtaining the size information of the grid cells according to the size information of the container further comprises: Determining a current breakpoint according to the width of the container, and judging whether breakpoint crossing occurs or not based on the current breakpoint and the previous breakpoint; If the break point crossing occurs, recalculating the size information of the grid cells by using second grid configuration information corresponding to the current break point and the size information of the container, and gridding the container based on the size information of the grid cells, wherein the grid configuration information comprises grid rows, grid columns, grid row intervals and grid column intervals.
  6. 6. The method of claim 1, wherein the obtaining the size information of the grid cells from the size information of the container and gridding the container based on the size information of the grid cells comprises: triggering a timer to start when the change of the size of the container is monitored; And when the timing of the timer reaches a preset time length, obtaining the size information of the grid cells according to the size information of the container acquired last time, and gridding the container according to the size information of the grid cells.
  7. 7. The method of claim 1, wherein the obtaining the size information of the grid cells from the size information of the container further comprises: Judging whether the size information of the grid cells meets preset conditions or not, wherein the preset conditions comprise that the size of the grid cells is smaller than or equal to a preset upper limit of the size of the cells and larger than or equal to a lower limit of the size of the cells; And if the size information of the grid cells does not meet the preset condition, obtaining the size information of the grid cells again according to the size information of the container until the size information of the grid cells meets the preset condition.
  8. 8. A page layout apparatus, comprising: The monitoring module is used for monitoring the size change of the container to acquire the size information of the container in real time, wherein the size information of the container comprises the width and the height of the container; The grid module is used for obtaining the size information of the grid cells according to the size information of the container, and gridding the container based on the size information of the grid cells, wherein the size information of the grid cells comprises the width and the height of the grid cells; the conversion module is used for determining the screen geometric attribute of each component according to the grid layout information of each component in the container; And the visualization module is used for performing visual rendering based on the screen geometric attributes of all the components in the container so as to present the components in the current page.
  9. 9. An electronic device comprising one or more processors and a memory storing a program, the program comprising instructions that when executed by the processors cause the processors to perform the method of any of claims 1-7.
  10. 10. A computer readable storage medium storing a program, the program comprising instructions that when executed by one or more processors of a computing device cause the computing device to perform the method of any of claims 1-7.

Description

Page layout method, page layout device, electronic equipment and storage medium Technical Field The disclosure relates to the field of computer technology, and in particular, to a page layout method, a page layout device, electronic equipment and a storage medium. Background With the wide application of large-screen display equipment in various scenes such as data centers, monitoring centers, exhibition halls and the like, the grid layout of pages faces new challenges. In the related art, a single-dimensional grid computing manner based on the width of a container is adopted in the page layout, the page is divided into a plurality of columns along the horizontal direction according to a fixed proportion, the width of the grid is calculated based on the width of the container, and the height of the grid is determined by adopting a fixed height value or a strategy of self-adaptive adjustment of internal content. The page layout mode has at least the following technical defects in a large-screen display scene: 1) The utilization rate of the vertical space is low, namely, the grid height cannot be reasonably distributed according to the container height, so that the vertical space in a large-screen display scene is underutilized, and a large number of blank areas are easy to appear. This problem is particularly acute on ultra-wide screens or special ratio display devices. 2) The cross-device scaling capability is inadequate-due to the wide variety of large screen display devices, there is a significant difference in aspect ratio of different display devices, e.g., 16:9, 21:9, 4:3, etc. Because the page layout mode cannot respond to the change of the height direction at the same time, full and coordinated visual filling effects are difficult to realize on display devices with different proportions. 3) When the size of the container is changed, the visual effect difference of the page layout under different sizes is large because only the width participates in calculation, obvious inconsistency exists, and the user experience is affected. Therefore, a new technology is urgently needed to enable a page layout on any scale of display devices including large-screen display devices to achieve a better space utilization effect. Disclosure of Invention In view of this, the present disclosure provides a page layout method, apparatus, electronic device, and storage medium. According to a first aspect of the present disclosure, there is provided a page layout method including: monitoring the size change of a container to acquire the size information of the container in real time, wherein the size information of the container comprises the width and the height of the container; obtaining size information of grid cells according to the size information of the container, and gridding the container based on the size information of the grid cells, wherein the size information of the grid cells comprises the width and the height of the grid cells; determining the screen geometric attribute of each component according to the grid layout information of each component in the container; Performing visual rendering based on screen geometry attributes of components within the container to render the components in a current page. In some embodiments of the first aspect of the present disclosure, the monitoring the container size change to obtain the size information of the container in real time includes monitoring the container size change using a ResizeObserver interface native to the browser to obtain the size information of the container in real time. In some embodiments of the first aspect of the present disclosure, the obtaining the size information of the grid cell according to the size information of the container includes: determining grid configuration information of the container, wherein the grid configuration information comprises grid rows, grid columns, grid row spacing and grid column spacing; Subtracting the sum of all horizontal intervals from the width of the container to obtain a net width applicable to grid cells, dividing the net width by the grid line number of the container to obtain the width of the grid cells, wherein the sum of all horizontal intervals is determined according to the grid line number and the grid line interval of the container; Subtracting the sum of all vertical intervals from the height of the container to obtain the net height for the grid cells, dividing the net height by the grid column number of the container to obtain the height of the grid cells, wherein the sum of all vertical intervals is determined according to the grid line number and the grid line interval of the container. In some embodiments of the first aspect of the present disclosure, the determining the grid configuration information of the container includes determining a current aspect ratio of the container according to the size information of the container, searching for first grid configuration information correspondin