cocos2d 剪裁圆头像

使用ClippingNode来实现剪裁圆头像
一、原理
ClippingNode,有三个相关实体:模板(Stencil)、底板、Layer,其原理就是将模板做为遮罩,遮罩本身不渲染,透过遮罩对底板进行裁剪,最后将裁剪后的结果放在Layer层上。
简单来说遮罩上有不同的形状和透明区域(是否透明由setAlphaThreshold来指定,小于指定值的都算透明),根据形状来将裁剪底板,裁剪后当做一个节点,可以和普通node一样任意摆放。
当然,也可以根据透明区域去裁剪,由setInverted(true)来指定。
二、实现带边框圆形头像
现在我们就可以来实现上面说到的功能了。其实有了上面的知识储备,想要什么形状的头像都可以了
1、为什么要带边框
开始尝试只使用ClippingNode来裁剪,确实可以将图变成圆形,但是边上的锯齿严重,非常不好看,所以需要在外面再罩一个圆圈边框,看上去会好很多。
2、代码实现

/*
设置相关图片,返回设置好后的精灵
@param texture2D:头像纹理
@param facePos截取截取位置
@param showPos头像需要摆放的位置
@param imgScale纹理需要缩放的倍率
*/
Sprite* RoundLayer::setImg(Texture2D *texture2D, Vec2 facePos,Vec2 showPos,float imgScale)
{
    auto clipNode = ClippingNode::create();
    //圆形模板
    auto mask = Sprite::create("..\\Resources\\clip\\circle_muban.png");
    clipNode->setAlphaThreshold(0.5f);
    clipNode->setInverted(false); 
    clipNode->setStencil(mask);
    //mask->setPosition(facePos);
    //需要被处理的纹理图像
    auto img = Sprite::create();
    img->initWithTexture(texture2D);
    img->setScale(imgScale);
    img->setPosition(-facePos);
    //将头像大小缩放为模板大小  
    //img->setScale(mask->getContentSize().width / img->getContentSize().width);
    clipNode->addChild(img);
    //clipNode->setPosition(-facePos);
    this->addChild(clipNode);
    //this->addChild(img);
    //最后套上一个环,掩盖锯齿
    auto circle = Sprite::create("..\\Resources\\clip\\circle_alpha.png");
    //circle->setPosition(facePos);
    this->addChild(circle);

    setPosition(showPos);
    return this;
}

参考链接http://blog.csdn.net/pur_e/article/details/50540599

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值