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

1.前言

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

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

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

2. 效果展示

2.1 美工提供的UI图片

2.2 处理后的九宫格资源

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

2.3 使用效果

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

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	是否贴边排列	Boolean	true/false	false