看了一个TinyWIngs的教程, 讲如何动态创建纹理, 学习了不少.
正好一直有个精灵圆角图片的问题, 即类似iPhone短信的气泡效果, 随文字自适应扩大.
之前参考过一些帖子, 需要在UIImage和CCSprite之间转化.
但是这种做法有个问题, 就是高清和非高清设备出来的效果不一样, 这个当时把我弄晕了.
看了动态创建纹理的教程, 觉得可以做这个自适应. 于是有了这份代码.
算是勉强完成, 但其中还有一些问题, 还请大家多指导!
效果图:
调用:
//图片尺寸没有要求, 四个边界值也没要求.
CCSprite *origin = [CCSprite spriteWithFile:@"iconImage.png"];
CCSprite *sprite = [HXNineGridSprite nineGridSpriteWithSprite:origin size:CGSizeMake(100, 80) edgeInsets:UIEdgeInsetsMake(30, 30, 30, 30)];
// CCSprite *sprite = [HXNineGridSprite horizontalSpriteWithSprite:origin width:400 edgeInsets_H:(HXEdgeInsets_H){120, 40}];
// CCSprite *sprite = [HXNineGridSprite verticalSpriteWithSprite:origin height:200 edgeInsets_V:(HXEdgeInsets_V){15, 30}];
sprite.position = CGPointMake(240, 160);
[self addChild:sprite];
我的疑问:
九宫格裁剪, 把一张图分成9份:
1 2 3
4 5 6
7 8 9
然后把2,4,5,6,8进行延伸.
(初学GLES, 用的是GL_LINEAR. 我发现用GL_REPEAT更会出现下图中的白色缝隙)
下面几行代码是裁剪九宫格之中, 会拉伸的部分, 即: 上,下,左,右,中间 5个部分.
但是裁剪左边和下边这两个的时候, 如果不像注释所说的+1/-1修正, 会出现缝隙, 像这样:
请赐教~~!!
const float edge = 2;//必须是2的n次方, 如:1,2,4... 不可太大
CCSprite *sprite2 = [self subSpriteWithSprite:sprite rect:CGRectMake(left, 0, edge, top)];
CCSprite *sprite4 = [self subSpriteWithSprite:sprite rect:CGRectMake(0, top, left+1, edge)];//宽+1是修正缝隙
CCSprite *sprite5 = [self subSpriteWithSprite:sprite rect:CGRectMake(left, top, edge, edge)];
CCSprite *sprite6 = [self subSpriteWithSprite:sprite rect:CGRectMake(width-right, top, right, edge)];
CCSprite *sprite8 = [self subSpriteWithSprite:sprite rect:CGRectMake(left, height-bottom-1, edge, bottom+1)];//y-1,高+1是修正缝隙
另一个疑问:
这个是纵向自适应, 结果下图红框处, 边缘的过渡没有了, 实际应该是像顶部和底部的边缘过渡那样, 颜色较深才对.
请问大家, 这是为什么?
代码下载: