在皮肤的布局中,锚点是比较“玄”的知识,需要我们注意并深刻理解。
有锚点设置的就两处,位置和缩放。

位置锚点和缩放锚点分开理解。
我们理解位置锚点,可以单纯的理解它就是“锚”,锚的作用是固定想在水面停泊的船,锚点的作用就是固定画布上的元素。而皮肤元素之所以需要固定,是画布大小和实际显示大小之间需要兼容。默认画布的大小是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。同样的道理,锚点的右、左下、下、右下就不展开了。
缩放锚点比较好理解,是以锚点为中心缩放。
用实例看一下,我们添加九个图标元素,设置鼠标进入的缩放动作,锚点分别对应九宫格位置,预览一下实际效果。

以上是锚点相关内容。

