您的位置  > 互联网

皮肤的布局中,锚点是比较“玄”的知识

只需要设置两个锚点:位置和缩放。

位置锚点和比例锚点是分开理解的。

当我们理解位置锚点时,我们可以简单地将其理解为“锚点”。 锚的作用是固定想要锚定在水面上的船,锚点的作用是固定画布上的元素。 皮肤元素需要固定的原因是画布尺寸和实际显示尺寸需要兼容。 默认画布尺寸为 640×480。 制作的皮肤可以扩展到不同的计算机显示器或压缩到不同的手机显示器尺寸。 这需要相对定位显示,否则元素将从屏幕左上角开始。 将 X 和 Y 值放置在画布中。

画布中的位置定位也是以左上角为起始顶点。

默认情况下,位置锚点位于左上角。 (这里分为九个网格锚点:左上、上、右上、左、中、右、左下、下、右下)。

如果我们想快速理解锚点,我们应该将锚点与画布对应起来。 锚点将设置在画布上元素所在的任何位置。

例如,元素在画布中的位置如下。

锚点应设置在右下角,而不是默认的左上角。 否则,输出是在计算机的1920×1080显示器上,就是这种情况。

所以如果你对锚点如何定位有深入的了解,可以参考下面的图解来理解。

此时图标元素的锚点为左上角,因此元素的定位以实际显示屏幕为准,距左200,距上120。 锚点朝上,则元素距顶部120,左右按照当前比例200:440定位在实际屏幕中。 对于 1920 宽的显示器,距左侧的距离为 872.7,距右侧的距离为 1047.3。 锚点位于右上角,因此元素定位距离实际屏幕右侧 440 度,距离顶部 120 度。 锚点在左,元素定位在实际屏幕中距左侧200。 距顶部的距离按照120:360的比例定位。 对于1080高的显示器,距顶部的距离为270,距底部的距离为810。锚点位于中间,因此从左侧到顶部的距离成比例。 此时距左侧的距离为200/640,距顶部的距离为120/480。 在1920×1080的屏幕上,距左侧的距离为872.7,距顶部的距离为270。同理,锚点的右侧、左下、下、右下也不会被扩展。

缩放锚点更容易理解。 它是以锚点为中心的。

让我们看一个例子。 我们添加九个图标元素,设置鼠标进入时的缩放动作,锚点对应九个方格的位置来预览实际效果。

以上就是锚点相关的内容。