Cocos2d js 3.2使用Scale9Sprite 九宫图

灰太狼 2022-07-31 15:20 119阅读 0赞

Scale9Sprite是一个非常方便的类，用这个类可以很好的处理图片的放大问题，指定了几个区域以后，可以使图片不失真的放大。

一个非常简单的使用例子：

**\[cpp\]**  [view plain][] [copy][view plain] [![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  // 第一个rc参数是整体大小   第二个rc参数是中间区域的范围  
2.  var sprTV = **new** cc.Scale9Sprite(res.TV\_9png, cc.rect(0, 0, 26, 26), cc.rect(10, 10, 7, 7));  
3.  sprTV.x = posMenuBtn.x;  
4.  sprTV.y = posMenuBtn.y;  
5.  sprTV.width = rcMenuBtnBB.width + 20;  
6.  sprTV.height = rcMenuBtnBB.height + 20;  
7.  **this**.addChild(sprTV, 5);

![Center][]

上面是原图

使用后效果如下：

![Center 1][]

具体的可以参加官方例子里的Scale9SpriteTest。

这里附上2张图，上面的是不适用Scale9Sprite放大的，下面的 是使用Scale9Sprite放大的。

![Center 2][]

![Center 3][]

对比可以发现，使用了Scale9Sprite的，ABCD区域都没有拉伸，只对其他区域做了拉伸，这种拉伸的好处是，可以很好的处理各种圆角图片的拉伸问题，而不影响最终视觉效果。

源引：http://blog.csdn.net/a102111/article/details/43236947

[view plain]: http://blog.csdn.net/a102111/article/details/43236947#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/591804
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/591804/fork
[Center]: /images/20220731/5d614e76fa784c29ac22dfc435b1c8b5.png
[Center 1]: /images/20220731/16cd970703d44c0f9f6942e1becd08c2.png
[Center 2]: /images/20220731/f5daf9d7144f4579af38ddc5dff896bc.png
[Center 3]: /images/20220731/cc610551225e41098868a40e5da7e6fe.png