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 |