一种基于锚点的界面动态布局方法、装置、电子设备及存储介质与流程

本公开涉及移动端页面布局领域，具体涉及一种基于锚点的界面动态布局方法、装置、电子设备及存储介质。

背景技术：

随着移动端生态的日益繁荣，面对海量的页面需求，仅仅有几套常规的布局窑炉显然是难以招架的，尤其是各家厂商的手机设备屏幕宽高比从3∶4到9∶16、9∶21，分辨率从480p、720p到1080p甚至2k，显然ui设计师不可能针对每种场景都进行对应的创作，所以一般只就约定的标准尺寸(如常见的1080*1920)输出一张设计稿，而作为前端开发的人员就需要能根据设计师的一张设计稿，做出适配各种不同尺寸屏幕、分辨率的效果，如果面对的是2个设备，可能需要2套样式去适配，如果面对的是200个甚至2000个设备时，单纯的体力劳动，针对每一种设备去写一套样式，已经完全不能解决问题。

为了实现页面运行时的样式自适应，开发者从一开始的静态布局、流式布局到响应式布局、弹性布局，目前普遍被采取的方法是使用rem单位的弹性布局，即基于设备像素比(简称dpr)计算并设置不通不同设备中的根字体大小，元素尺寸采取rem单位。面对不通不同大小、比例和素质的屏幕，只需要写一套样式，就能做到对设计稿视觉效果的精准还原；跨屏适配的逻辑代码可以完全直接复用，配合现有的px转rem插件，几乎没有额外的工作量开销。

但是这种方案在特定场景也会存在适配不够理想的问题。由于基于dpr和rem的方案特点是动态适配且对设计稿的精确还原，所以当遇到实际可视区域与设计稿比例不一致的情况，就会出现纵向适配问题：当视口比设计稿“长”时，页面纵向无法填满整个屏幕，出现底部留白；当视口比设计稿“短”时，页面纵向被容无法一屏显示，出现元素溢出。

技术实现要素：

本公开实施例提供的一种基于锚点的界面动态布局方法、装置、电子设备及存储介质，用户无需针对每一种机型进行适配，通过在配置页面的时候提供页面背景图和内部元素的属性、定位锚点，实现原始页面对不同终端视口的良好适配。

本公开的第一个方面提供了一种基于锚点的界面动态布局方法，包括：s1，将第一界面划分为若干个第一像素，并将每个第一像素进行分类；s2，根据每个第一像素的分类结果，计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离；s3，在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素的宽度、高度以及该第一像素到第一界面顶端、底端、左侧及右侧的距离进行特定比例缩放，得到第二界面，其中，该特定比例为第二界面的高度与第一界面的高度之比。

进一步地，s1中将第一界面划分为若干第一像素，并将每个第一像素进行分类包括：将第一界面划分为若干个第一像素，根据每个第一像素与第一界面的四边吸附特性，将每个第一像素分为吸顶元素或吸底元素或吸左元素或吸右元素或按比例左右居中元素或按比例上下居中元素。

进一步地，吸顶元素、吸底元素、吸左元素、吸右元素、按比例左右居中元素及按比例上下居中元素的高度可自动变化。

进一步地，吸顶元素高度的一半与该吸顶元素顶部到第一界面顶部的距离之和不变；吸底元素高度的一半与该吸底元素底部到第一界面底部的距离之和不变；吸左元素宽度的一半与该吸左元素左边到第一界面左边的距离之和不变；吸右元素宽度的一半与该吸右元素右边到第一界面右边的距离之和不变；按比例左右居中元素的锚点到第一界面左右边的距离相等；按比例上下居中元素高度的一半和该元素顶部到该第一界面顶部的距离之和与该元素高度的一半和该元素底部到第一界面底部的距离之和相等。

进一步地，s3中该特定比例缩放包括：放大或缩小或不进行缩放。

进一步地，第一界面宽度与第二界面的宽度相等。

本公开的第二个方面提供了一种基于锚点的界面动态布局方法，包括：s1，将第一界面划分为若干个第一像素，并将每个第一像素进行分类；s2，根据每个第一像素的分类结果，分别计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离；s3，在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素进行特定比例缩放，得到缩放后的第一像素；其中，该特定比例包括该第二界面的高度与该第一界面的高度之比和该第二界面的宽度与该第一界面的宽度之比；s4，根据每个第一像素高度、宽度、特定缩放比例及第一像素到第一界面顶端、底端、左侧、右侧的距离，得到该第一像素对应的锚点偏移量；s5，根据每个第一像素对应的锚点偏移量移动每个缩放后的第一像素，得到对应的第二像素，其中，每个第二像素构成第二界面。

进一步地，s3中该第一像素对应的锚点偏移量包括锚点竖直方向偏移量和锚点水平方向偏移量，锚点竖直方向偏移量offsetvertical与锚点水平方向偏移量offsethorizontal分别满足以下关系：

offsetvertical＝realtop+height(n)×scale/2-height(n)/2

offsethorizontal＝realanchorx-baseanchorx

其中，height(n)表示第n个第一像素的高度，scale为第二界面的高度与该第一界面的高度之比，realtop为第二像素顶部与第二界面顶部的距离，baseanchorx为每个第一像素的锚点横坐标，realanchorx为每个第二像素的锚点横坐标。

进一步地，s1中将第一界面划分为若干第一像素，并将每个第一像素进行分类包括：将第一界面划分为若干个第一像素，根据每个第一像素与该第一界面的四边吸附特性，将每个第一像素分为吸顶元素或吸底元素或吸左元素或吸右元素或按比例左右居中元素或按比例上下居中元素。

进一步地，吸顶元素、吸底元素、吸左元素、吸右元素、按比例左右居中元素及按比例上下居中元素的高度可自动变化。

本公开的第三个方面提供了一种基于锚点的界面动态布局装置，包括：像素分类单元，用于将第一界面划分为若干个第一像素，并将每个第一像素进行分类；像素距离计算模块，用于根据每个第一像素的分类分别计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离；像素缩放模块，用于在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素的宽度、高度以及该第一像素到第一界面顶端、底端、左侧及右侧的距离进行特定比例缩放，得到第二界面，其中，该特定比例为第二界面的高度与第一界面的高度之比。

本公开的第四个方面提供了一种基于锚点的界面动态布局装置，包括：像素分类单元，用于将第一界面划分为若干个第一像素，并将每个第一像素进行分类；像素距离计算模块，用于根据每个第一像素的分类分别计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离；像素缩放模块，用于在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素进行特定比例缩放，得到缩放后的第一像素；其中，该特定比例包括第二界面的高度与第一界面的高度之比和第二界面的宽度与第一界面的宽度之比；锚点偏移量计算模块，用于根据每个第一像素高度、宽度、特定缩放比例及第一像素到第一界面顶端、底端、左侧、右侧的距离，得到该第一像素对应的锚点偏移量；像素移动模块，用于根据每个第一像素对应的锚点偏移量移动每个缩放后的第一像素，得到对应的第二像素，其中，每个第二像素构成第二界面。

本公开的第五个方面提供了一种电子设备，包括：存储器，处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时，实现本公开的第一个方面或第二个方面提供的基于锚点的界面动态布局方法。

本公开的第六方面提供了一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现本公开的第一个方面或第二个方面提供的基于锚点的界面动态布局方法。

本公开提供的一种基于锚点的界面动态布局方法、装置、电子设备及存储介质，该方法解决了传统移动端布局方案需要适配各种机型尺寸和分辨率从而编写多套样式方案，并且解决了传统的rem方法容易造成底部留白或页面溢出的问题，大大降低了前端开发人员和设计人员的工作成本，提高了工作效率。

附图说明

为了更完整地理解本公开及其优势，现在将参考结合附图的以下描述，其中：

图1示意性示出了根据本公开一实施例的基于锚点的界面动态布局方法的流程图；

图2a示意性示出了根据本公开一实施例的原始图片示意图；

图2b示意性示出了根据本公开一实施例的基准与非基准视口对比图；

图3示意性示出了根据本公开一实施例的基准与非基准视口下的缩放示意图；

图4示意性示出了根据本公开一实施例的视口中元素吸附特性示意图；

图5示意性示出了根据本公开一实施例的按比例居中元素示意图；

图6示意性示出了根据本公开一实施例的吸顶元素的示意图；

图7示意性示出了根据本公开一实施例的吸底元素的示意图；

图8示意性示出了根据本公开一实施例的按比例上下居中元素的示意图；

图9示意性示出了根据本公开一实施例的吸左元素的示意图；

图10示意性示出了根据本公开另一实施例的基于锚点的界面动态布局方法的流程图；

图11示意性示出了根据本公开另一实施例的锚点偏移量示意图；

图12示意性示出了根据本公开一实施例的基于锚点的界面动态布局装置的方框图；

图13示意性示出了根据本公开另一实施例的基于锚点的界面动态布局装置的方框图；

图14示意性示出了根据本公开一实施例的电子设备的方框图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。在下面的详细描述中，为便于解释，阐述了许多具体的细节以提供对本公开实施例的全面理解。然而，明显地，一个或多个实施例在没有这些具体细节的情况下也可以被实施。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语(包括技术和科学术语)具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

在使用类似于“a、b和c等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有a、b和c中至少一个的系统”应包括但不限于单独具有a、单独具有b、单独具有c、具有a和b、具有a和c、具有b和c、和/或具有a、b、c的系统等)。在使用类似于“a、b或c等中至少一个”这样的表述的情况下，一般来说应该按照本领域技术人员通常理解该表述的含义来予以解释(例如，“具有a、b或c中至少一个的系统”应包括但不限于单独具有a、单独具有b、单独具有c、具有a和b、具有a和c、具有b和c、和/或具有a、b、c的系统等)。

附图中示出了一些方框图和/或流程图。应理解，方框图和/或流程图中的一些方框或其组合可以由计算机程序指令来实现。这些计算机程序指令可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器，从而这些指令在由该处理器执行时可以创建用于实现这些方框图和/或流程图中所说明的功能/操作的装置。本公开的技术可以硬件和/或软件(包括固件、微代码等)的形式来实现。另外，本公开的技术可以采取存储有指令的计算机可读存储介质上的计算机程序产品的形式，该计算机程序产品可供指令执行系统使用或者结合指令执行系统使用。

图1示意性示出了根据本公开一实施例的基于锚点的界面动态布局方法的流程图。

如图1所示，该基于锚点的界面动态布局方法包括步骤s1～s2。

s1，将第一界面划分为若干个第一像素，并将每个第一像素进行分类。

s2，根据每个第一像素的分类结果，计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离。

s3，在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素的宽度、高度以及该第一像素到第一界面顶端、底端、左侧及右侧的距离进行特定比例缩放，得到第二界面，其中，该特定比例为第二界面的高度与第一界面的高度之比。

根据本公开的实施例，如图2a所示为原始图片，即第一界面，其高度为height，宽度为width。如图2b所示，该第一界面适配的用户终端窗口为基准视口，基准视口的宽度记为basew，其宽度值为10.8rem(对应设计稿1080px)，基准视口的高度记为baseh，其高度值为21.6rem，其中，第一界面与其适配的基准视口的长宽比相等，即：baseh/basew＝height/width。将第一界面进行相应比例缩放后的第二界面，其适配的用户终端窗口为实际视口(非基准视口)，其宽度记为realh，高度记为realh。

具体地，本公开实施例采用基于dpr和rem的方案，容易得出realw＝basew＝10.8rem，则可得实际视口与基准视口的差别在于realh与baseh不同。

根据realw/realh＝window.innerwidth/window.innerheight，其中，window.innerwidth为实际视口的宽度，window.innerheight为实际视口的高度，由realh＝(realw×window.innerheight)/window.innerwidth结合realw＝10.8rem，即可求的实际视口的高度realh。

其中，将实际视口的高度与基准视口高度的比例设置为windowheightratio，则windowheightratio＝realh/baseh。如图2b所示，第二界面的高度realh可大于或等于或小于baseh。因此，在第二界面的高度realh大于baseh时，windowheightratio>1；在第二界面的高度realh等于baseh时，windowheightratio＝1；在第二界面的高度realh小于baseh时，windowheightratio＜1。

本公开实施例中，使用scaletype描述元素缩放类型，其可选值包括：zoomin(放大)、zoomout(缩小)及standard(不进行缩放)。

具体地，使用scale描述元素在实际视口与标准视口下的缩放比，第一界面在基准视口下的宽高为width和height，则其经过缩放后在实际视口下的宽高分别为basew*scale和baseh*scale，如图3所示，w2＝w1*scale，h2＝h1*scale。

其中，scaletype中为zoomin的图像元素，当实际视口高于基准视口时，元素缩放比为视口高度比(realh/baseh)，元素表现为放大；当实际视口不高于基准视口时，元素缩放比为1，元素大小保持不变，即：当实际视口的高度大于基准视口的高度时，windowheightratio>1，元素缩放比scale＝windowheightratio；当实际视口的高度小于等于基准视口的高度时，windowheightratio≤1，元素缩放比scale＝1。

scaletype中为zoomout的图像元素，当实际视口低于基准视口时，元素缩放比为视口高度比，元素表现为缩小；当实际视口不低于基准视口时，元素缩放比为1，元素大小保持不变。即：实际视口的高度大于基准视口的高度时，windowheightratio＞1，元素缩放比scale＝1；当实际视口的高度小于等于基准视口的高度时，windowheightratio≤1，元素缩放比scale＝windowheightratio。

scaletype中为standard的元素，表现行为始终与原始设计稿尺寸保持一致，即：对于任何windowheightratio，始终有元素缩放比scale＝1。

根据本公开的实施例，将第一界面分为若干个第一像素，并在每个第一像素的中心位置设置锚点，如图3所示，在第一像素中以锚点为中心将各第一像素进行一定比例缩放，得到非基准视口的第二像素。本公开实施例中，锚点位置设置并不固定，可以灵活根据实际需求的效果进行设置，本文将锚点设置为元素实际宽高的中心点，即每个第一像素的中心位置。

本公开的实施例中，不同的视口内，页面原色的锚点相对于视口的某一个边的位置是定值，称该元素吸附于该条边，根据与第一界面的四边吸附的边不同，可将各第一像素分为吸顶元素或吸底元素或吸左元素或吸右元素。如图4所示，x为锚点位置，tl表示为吸顶靠左元素，br为吸底靠右元素。对于某个元素，若其在水平或竖直方向并不吸附于某一条边，而是相对于顶部到底部或左边到右边的距离是固定比例，则称其为按比例居中，如图5所示，其中，i1/i2＝i3/i4，按居中特性可分为按比例左右居中元素或按比例上下居中元素。

具体地，吸顶元素的特性是元素锚点与视口顶部距离固定，即在不同视口中，吸顶元素高度的一半与该吸顶元素顶部到第一界面顶部的距离之和不变，如图6所示。根据该特性则满足换算关系：height(n)/2+basetop＝height(n)×scale/2+realtop，由realh＝baseh×scale可得，realtop＝height(n)/2+basetop-(height×scale)/2，其中，height(n)为第n个第一像素的高度，basetop为第n个第一像素顶部到第一界面顶部的距离，realtop为该第一像素缩放后得到的第二像素顶部与第二界面顶部的距离，其中，若干个第一像素经过缩放后得到的一一对应的像素为第二像素，该多个第二像素构成第二界面。

具体地，吸底元素的特性是元素锚点与视口底部的距离固定，即不同视口中，吸底元素高度的一半与该吸底元素底部到第一界面底部的距离之和不变，如图7所示。根据该特性则满足换算关系：baseh-(basetop+height(n)/2)＝realh-(realtop+height(n)/×scale/2)，则可得，realtop＝realh-baseh+(basetop+height(n)/2)-(height(n)×scale)/2。

具体地，按比例上下居中元素的特性是元素锚点距视口顶部和底部的距离成固定比例，即不同视口中，按比例上下居中元素高度的一半和该元素顶部到第一界面顶部的距离之和与该元素高度的一半和该元素底部到第一界面底部的距离之和相等，如图8所示，i1/i2＝i3/i4。根据该特性则满足换算关系：(height(n)/2+basetops)/baseh＝(height(n)×scale/2+realtop)/realh，则可得，realtop＝(realh/baseh)×(height(n)/2+basetops)-(height(n)×scale)/2。

具体地，吸左元素的特性是锚点距离视口左边框的距离固定，即不同视口中，吸左元素宽度的一半与该吸左元素左边到第一界面左边的距离之和不变，如图9所示。根据该特性则满足换算关系：baseleft+width(n)/2＝realleft+width(n)/×scale/2，则可得：realleft＝baseleft+width(n)/2-(width(n)×scale)/2，其中，width(n)为第n个第一元素的宽度。

具体地，吸右元素的特性是锚点距离视口右边框的距离固定，即不同视口中，吸右元素宽度的一半与该吸右元素右边到第一界面右边的距离之和不变。同理可得，realleft＝realw-basew+(baseleft+width(n)/2)-width(n)×scale/2。

具体地，按比例左右居中元素的特性是该元素的锚点到第一界面左右边的距离相等，即同理可得：realleft＝(realw/basew)×(baseleft+width(n)/2)-(width(n)×scale)/2。由于本公开实施例基于rem和dpr的布局方案的一个“准则”是视口宽度总是10.8rem，即realw实际和basew在数值上相等，则上述结果可以简化为：realleft＝(baseleft+width(n)/2)-width(n)×scale/2。

根据本公开的实施例，第一界面中的吸顶元素、吸底元素、吸左元素、吸右元素、按比例左右居中元素及按比例上下居中元素的高度可自动变化，得到相应的第二像素。

本公开的实施例中，对于单一的“满屏”需求，如一个单独的满屏页面，只需要对其中的元素使用固定定位(fixed)方案结合前面六个元素的特性求得的scale、realtop和realleft求得样式即可，具体代码如下：

style＝`

top：${realtop}rem；

left：${realleft}rem；

width：${width}rem；

height：${height}rem；

transform：scale(${scale})；

其中，style为元素样式声明；${realtop}为上文中计算的第二元素顶部距离第二界面顶部的距离；${realleft}为上文中计算的第二元素距离页面左部的距离；${width}为第一元素的宽度；${height}为第一元素的高度；${scale}为元素缩放比。

图10示意性示出了根据本公开另一实施例的基于锚点的界面动态布局方法的流程图。

如图10所示，该方法包括步骤s1～s5。

s1，将第一界面划分为若干个第一像素，并将每个第一像素进行分类。

s2，根据每个第一像素的分类结果，分别计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离。

s3，在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素进行特定比例缩放，得到缩放后的第一像素；其中，该特定比例包括第二界面的高度与第一界面的高度之比和第二界面的宽度与第一界面的宽度之比。

s4，根据每个第一像素高度、宽度、特定缩放比例及第一像素到第一界面顶端、底端、左侧、右侧的距离，得到该第一像素对应的锚点偏移量。

s5，根据每个第一像素对应的锚点偏移量移动每个缩放后的第一像素，得到对应的第二像素，其中，每个第二像素构成第二界面。

本公开实施例中，该方法适应页面需要由一连串的“满屏”页面组成，并且可以进行“满屏”页面的切换，实现类似幻灯片一样的效果图(即长界面效果)，则实际上每个“满屏”的页面其实是我们最终页面的一个具备“满屏”特性的“容器”，容器内部的元素在进行布局时，需要相对于容器进行绝对定位(absolute)。

如上文所示，采用元素锚点的概念，可利用元素锚点的偏移量进行定位，锚点即是css中的transform-origin属性，即transform-origin：center，假设元素均处于默认起始位置(top＝left＝0)，则使用transform属性对元素的偏移位置进行设置，如图11所示，具体满足以下关系：

锚点竖直方向原位置(各第一像素中的锚点位置)：baseanchory＝height(n)/2；

锚点竖直方向目标位置(各第二像素中的锚点位置)：：realanchory＝realtop+height(n)/×scale/2；

因此，根据上述关系可得到：

锚点竖直方向的偏移量(对应图11中offsety)：offsetvertical＝realanchory-baseanchory＝realtop+height(n)×scale/2-height(n)/2。

同理可得，锚点水平方向的偏移量(对应图11中offsetx)：offsethorizontal＝realanchorx-baseanchorx。具体代码如下：

style＝`

top：0px；

left：0px；

width：${width}rem；

height：${height}rem；

transform-origin：center；

transform：

translatex(${offsetvertical}rem)translatey(${offsethorizontal}rem)scale(${style.scale})；

其中，(top，left)为各第一元素的初始位置；${width}为第一元素的宽度；${height}为第一元素的高度；${scale}为元素缩放比；center为各第一像素中锚点的位置；${offsetvertical}为锚点竖直方向的偏移量；offsethorizontal}为锚点水平方向的偏移量。

本公开实施例中，该方法基于使用transform属性实现元素缩放后再结合偏移量得到第二元素，该若干个第二元素即构成第二界面。

本公开的实施例提供了两种不同的基于锚点的界面动态布局方法，该方法可根据实际需求实现不同原始图片的缩放需求，以使其适配不同尺寸的实际需求视口，实现了原始界面对不同视口的良好适配。

图12示意性示出了根据本公开一实施例的基于锚点的界面动态布局装置的方框图。

如图12所示，该基于锚点的界面动态布局装置1200包括：像素分类单元1210、像素距离计算模块1220及像素缩放模块1230。该装置1200可以用于实现参考图1所描述的基于锚点的界面动态布局方法。

像素分类单元1210，用于将第一界面划分为若干个第一像素，并将每个第一像素进行分类；

像素距离计算模块1220，用于根据每个第一像素的分类分别计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离；

像素缩放模块1230，用于在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素的宽度、高度以及该第一像素到第一界面顶端、底端、左侧及右侧的距离进行特定比例缩放，得到第二界面，其中，该特定比例为该第二界面的高度与第一界面的高度之比。

本公开实施例中，该装置1200用以实现如图1所示的基于锚点的界面动态布局方法，各元素特性如上文所示，此处不再详细表述。

图13示意性示出了根据本公开另一实施例的基于锚点的界面动态布局装置的方框图。

如图13所示，该基于锚点的界面动态布局装置1300包括：像素分类单元1310、像素距离计算模块1320、像素缩放模块1330、锚点偏移量计算模块1340及像素移动模块1350。该装置1300可以用于实现参考图10所描述的基于锚点的界面动态布局方法。

像素分类单元1310，用于将第一界面划分为若干个第一像素，并将每个第一像素进行分类；

像素距离计算模块1320，用于根据每个第一像素的分类分别计算各第一像素的宽度、高度，以及该第一像素到第一界面顶端、底端、左侧及右侧的距离；

像素缩放模块1330，用于在每个第一像素的中心位置设置锚点，并以锚点为中心将各第一像素进行特定比例缩放，得到缩放后的第一像素；其中，该特定比例包括第二界面的高度与第一界面的高度之比和第二界面的宽度与第一界面的宽度之比；

锚点偏移量计算模块1340，用于根据每个第一像素高度、宽度、特定缩放比例及第一像素到第一界面顶端、底端、左侧、右侧的距离，得到该第一像素对应的锚点偏移量；

像素移动模块1350，用于根据每个第一像素对应的锚点偏移量移动每个缩放后的第一像素，得到对应的第二像素，其中，每个第二像素构成第二界面。

根据本公开的实施例的模块、子模块、单元、子单元中的任意多个、或其中任意多个的至少部分功能可以在一个模块中实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以被拆分成多个模块来实现。根据本公开实施例的模块、子模块、单元、子单元中的任意一个或多个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(fpga)、可编程逻辑阵列(pla)、片上系统、基板上的系统、封装上的系统、专用集成电路(asic)，或可以通过对电路进行集成或封装的任何其他的合理方式的硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，根据本公开实施例的模块、子模块、单元、子单元中的一个或多个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

例如，像素分类单元1210、像素距离计算模块1220、像素缩放模块1230、像素分类单元1310、像素距离计算模块1320、像素缩放模块1330、锚点偏移量计算模块1340及像素移动模块1350中的任意多个可以合并在一个模块中实现，或者其中的任意一个模块可以被拆分成多个模块。或者，这些模块中的一个或多个模块的至少部分功能可以与其他模块的至少部分功能相结合，并在一个模块中实现。根据本公开的实施例，像素分类单元1210、像素距离计算模块1220、像素缩放模块1230、像素分类单元1310、像素距离计算模块1320、像素缩放模块1330、锚点偏移量计算模块1340及像素移动模块1350中的至少一个可以至少被部分地实现为硬件电路，例如现场可编程门阵列(fpga)、可编程逻辑阵列(pla)、片上系统、基板上的系统、封装上的系统、专用集成电路(asic)，或可以通过对电路进行集成或封装的任何其他的合理方式等硬件或固件来实现，或以软件、硬件以及固件三种实现方式中任意一种或以其中任意几种的适当组合来实现。或者，像素分类单元1210、像素距离计算模块1220、像素缩放模块1230、像素分类单元1310、像素距离计算模块1320、像素缩放模块1330、锚点偏移量计算模块1340及像素移动模块1350中的至少一个可以至少被部分地实现为计算机程序模块，当该计算机程序模块被运行时，可以执行相应的功能。

图14示意性示出了根据本公开实施例的适于实现上文描述的方法(图1或图10所示的方法)的电子设备的方框图。图14示出的电子设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。

如图14所示，本实施例中所描述的电子设备1400，包括：存储器1410，处理器1420及存储在存储器1410上并可在处理器上运行的计算机程序，处理器执行该程序时实现前述图1或图10中所示实施例中描述的基于锚点的界面动态布局方法。

根据本公开的实施例，该电子设备还包括：至少一个输入设备1430；至少一个输出设备1440。上述存储器1410、处理器1420输入设备1430和输出设备1440通过总线1450连接。

其中，输入设备1430具体可为触控面板、物理按键或者鼠标等等。输出设备1440具体可为显示屏。存储器1410可以是高速随机存取记忆体(ram，randomaccessmemory)存储器，也可为非不稳定的存储器(non-volatilememory)，例如磁盘存储器。存储器1410用于存储一组可执行程序代码，处理器1420与存储器1410耦合。

该电子设备1400还包括：显示屏(图中为画出)，用于显示第二界面，该显示屏可以为手机、ipad的显示屏幕，本公开对此不做限定。

本发明实施例还提供了一种计算机可读存储介质，该计算机可读存储介质可以是上述实施例中描述的设备/装置/系统中所包含的；也可以是单独存在，而未装配入该设备/装置/系统中。上述计算机可读存储介质承载有一个或者多个程序，当上述一个或者多个程序被执行时，实现根据本公开实施例的图1或图10中所示实施例中描述的基于锚点的界面动态布局方法。

根据本公开的实施例，计算机可读存储介质可以是非易失性的计算机可读存储介质，例如可以包括但不限于：便携式计算机磁盘、硬盘、随机访问存储器(ram)、只读存储器(rom)、可擦式可编程只读存储器(eprom或闪存)、便携式紧凑磁盘只读存储器(cd-rom)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。

需要说明的是，在本发明各个实施例中的各功能模块可以集成在一个处理模块中，也可以是各个模块单独物理存在，也可以两个或两个以上模块集成在一个模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。所述集成的模块如果以软件功能模块的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的全部或部分可以以软件产品的形式体现出来。

附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，上述模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图或流程图中的每个方框、以及框图或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

本领域技术人员可以理解，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合，即使这样的组合或结合没有明确记载于本公开中。特别地，在不脱离本公开精神和教导的情况下，本公开的各个实施例和/或权利要求中记载的特征可以进行多种组合和/或结合。所有这些组合和/或结合均落入本公开的范围。

尽管已经参照本公开的特定示例性实施例示出并描述了本公开，但是本领域技术人员应该理解，在不背离所附权利要求及其等同物限定的本公开的精神和范围的情况下，可以对本公开进行形式和细节上的多种改变。因此，本公开的范围不应该限于上述实施例，而是应该不仅由所附权利要求来进行确定，还由所附权利要求的等同物来进行限定。