Cocos2d js 3.2使用Scale9Sprite 九宫图

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

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

[cpp] 
view plain
copy
《Cocos2d js 3.2使用Scale9Sprite 九宫图》
《Cocos2d js 3.2使用Scale9Sprite 九宫图》

  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);  

《Cocos2d js 3.2使用Scale9Sprite 九宫图》

上面是原图

使用后效果如下:

《Cocos2d js 3.2使用Scale9Sprite 九宫图》

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

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

《Cocos2d js 3.2使用Scale9Sprite 九宫图》

《Cocos2d js 3.2使用Scale9Sprite 九宫图》

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

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

    原文作者:九宫图算法
    原文地址: https://blog.csdn.net/alex8046/article/details/47031377
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞