Flex 自定义组件外观

核心提示： 图 1. 九宫格原理图注：原图是，5 * 5 方格图，Flex 自定义组件外观(3)，每个方格 4 个像素，上图是被放大后的效果图 1 在四条红线的位置把图片块成了 9 块，scaleGridTop 代表横向顶部的切割线距离图像顶部的像素距离；scaleGridBottom 代表横向底部的切割线

图 1. 九宫格原理图

注：原图是，5 * 5 方格图，每个方格 4 个像素，上图是被放大后的效果

图 1 在四条红线的位置把图片块成了 9 块，四个角，四条边和中间一块，在缩放的时候，四个角始终不变，两条横向边只缩放宽度，高度不变，两条纵向的边只缩放高度，宽度不变，中间一块宽和高同时缩放，这就是九宫格缩放的原理。这种技术一般是在使用图片做控件的皮肤时使用，很多控件的皮肤样式，在四个角的为位置是圆的或不规则的，所以使用这种缩放技术可以保证控件与图片的大小不一致的时候，图片看起来并不变形。

了解了九宫格技术再看 scaleGridTop、scaleGridBottom、scaleGridLeft、scaleGridRight 四个属性，它们分别代表图 1 中四条红色切割线的位置，scaleGridTop 代表横向顶部的切割线距离图像顶部的像素距离；scaleGridBottom 代表横向底部的切割线距离图像顶部的像素距离；scaleGridLeft 代表纵向左部的切割线距离图像左部的像素距离；scaleGridRight 代表纵向右部的切割线距离图像左部的像素距离。

通过上述技术和方法的使用，具体实例效果展示如图 2. 从左至右分别是 upSkin、downSkin、overSkin 的效果。

图 2. 位图实现效果展示图