【组件005】九宫格



  • 九宫格

    九宫格组件可以通过拉伸或平铺的方式,在指定大小范围内,填充图像。

    例如:

    be279927-a0bb-497f-9758-e49afa9811b8-image.png

    现在通过对比精灵和九宫格,来看一下详细属性值。

    左边使用的是九宫格,右边使用的是精灵对象。

    image.png

    image.png

    image.png

    右边使用的精灵对象,在缩放的时候就会产生形变和模糊,而左边九宫格组件可以保证4个角不变的情况下自由拉伸并且不会模糊。

    九宫格编辑器

    九宫格对象使用单个图像,在对象库双击九宫格进入九宫格编辑器设置的边距自动将其切割为九个部分。通过设置左边距,上边距,右边距和下边距,对象会自动计算出所有九个部分的大小和位置。

    上传九宫格图片

    在九宫格编辑器左上方image.png按钮,上传九宫格图片。

    image.png

    九宫格四边设置

    九宫格四个角落(下图中1,2,3,4)在图片放大或缩小时将保持原始大小不变。

    image.png

    九宫格四边(下图中5,6,7,8)在图片放大或缩小时将根据四边的设置进行平铺或拉伸。

    image.png

    image.png

    九宫格四边(下图 中9)在图片放大或缩小时将根据中心的设置进行平铺或拉伸或透明。

    image.png

    想实现平铺效果,设置如下:
    6e6879f4-6eaa-4796-8f07-04e92ac99fe0-image.png

    记得帖子下打卡~有问题可以直接提出哦。