实现类似Cocos2dx游戏引擎中的九宫格组件,解决复杂UI边框自适应问题

629 阅读3分钟

1.前言

九宫格,顾名思义,就是将图片拆分称9块,保证四个角固定不变,其它5块自由拉伸;最初接触到这个理念是在Cocos2dx游戏引擎中的Scale9Sprite。这里不做过多解释,不清楚九宫格原理的,可自行到Cocos2dx引擎API文档中查阅相关文档了解,这里是对应链接:Cocos2d-x: Scale9Sprite Class Reference

而在前端领域,经常我们开发的时候,会遇到美工制作的UI边框精美很复杂,但是却没法实现宽度、高度根据内容自动适应,如果直接去设置图片的宽高,会导致图片拉伸变形、模糊等问题。而九宫格的设计初衷就是为了解决该问题而出现的,但是很可惜,我目前还没有在前端中有看到实现该功能的插件或组件,因此自己写了一个组件,来解决以后项目中的这种问题

目前该组件是基于vue开发的,因此只适用于vue项目

2. 效果展示

2.1 美工提供的UI图片

底框.png

底框选中.png

外框.png

2.2 处理后的九宫格资源

box_1.png

box_2.png

box2.png

我们可以看到,处理完毕后的资源,会变得很小(题外话,这也是九宫格理念之一,CoCos2dx引擎大多数用于开发手游,因此资源大小也是其要考虑的问题,所以九宫格理念,可以说是非常棒),但是其中关键的一些纹路,我们依然保留了,这样我们在使用九宫格后,依然可以还原美工所制作的UI效果,同时还能保留细节

2.3 使用效果

1.gif

可以看到,基本的自适应已经完美实现,同时具有移入移出的效果,且在内容改变时,边框也能自动适应

2. API

2.1 基础用法

使用md-sprite9组件,将内容包裹,同时传入图片地址img、原点origin、中心宽高box,这三个属性是必须的

<md-sprite9
    :img="'./box_1.png'"
    :hover-img="'./box_2.png'"
    :origin="[26,21]"
    :box="[15,6]"
>{{testTxt}}</md-sprite9>

2.2 移入效果

通过hover-img属性传入对应变更的图片,需要注意:变更的图片尺寸、原点、中心宽高要与原图一致,否则会出现切图错误

<md-sprite9
    :img="'./box_1.png'"
    :hover-img="'./box_2.png'"
    :origin="[26,21]"
    :box="[15,6]"
>{{testTxt}}</md-sprite9>

2.3 过渡效果

通过transition属性来控制,鼠标移入移出时的过渡效果,需要在传入hover-img之后方可生效

<md-sprite9
    :img="'./box_1.png'"
    :hover-img="'./box_2.png'"
    :origin="[26,21]"
    :box="[15,6]"
    transition="background-image .5s linear"
>{{testTxt}}</md-sprite9>

2.4 贴边排列

通过facing属性来控制内容从边框的最左侧排列,通常用于解决九宫格图片4个角的宽高过大(例如前文效果展示中第三张九宫格图片),导致内容距离边框太大导致的问题,一般情况下可以不使用

<md-sprite9
    :img="'./box2.png'"
    :origin="[29,45]"
    :box="[2,6]"
    class="box3"
    facing
>
    <span class="test">{{testTxt2}} </span>
</md-sprite9>

3. Attributes

参数说明类型可选值默认值
img基础九宫格图片资源地址String--
hover-img鼠标移入九宫格图片资源地址String--
origin九宫格切图原点Array--
box九宫格切图中心宽高Array--
transition过渡动画String--
facing是否贴边排列Booleantrue/falsefalse