cocos2dx 3.2 利用clippingNode把图片裁剪成圆形,接口可直接使用

cocos2dx 3.2 利用clippingNode把图片裁剪成圆形,接口可直接使用,第1张

概述ClippingNode简介 先简单了解一下clippingNode类的使用。顾名思义,首先它是一个node,可以做为其他sprite,node的容器,而且是一个可以裁剪的node。如何裁剪,如何定义一套裁剪的规则出来。这里可以使用一张图片,根据图片的分辨率或者有效像素进行裁剪,或者自己画出来一个裁剪区域,根据这个区域进行裁剪。那这个图片或者画出来的区域,就是模板,clippingNode根据模板 ClipPingNode简介 先简单了解一下clipPingNode类的使用。顾名思义,首先它是一个node,可以做为其他sprite,node的容器,而且是一个可以裁剪的node。如何裁剪,如何定义一套裁剪的规则出来。这里可以使用一张图片,根据图片的分辨率或者有效像素进行裁剪,或者自己画出来一个裁剪区域,根据这个区域进行裁剪。那这个图片或者画出来的区域,就是模板,clipPingNode根据模板进行图片的裁剪。 主要方法:
 /** Creates and initializes a clipPing node with an other node as its stencil.     The stencil node will be retained.     */    static ClipPingNode* create(Node *stencil);
create函数中传入一个模板,可以是一个sprite,也可以是一个drawNode(自定义的图形)。
    /** The Alpha threshold.     The content is drawn only where the stencil have pixel with Alpha greater than the AlphaThreshold.     Should be a float between 0 and 1.     This default to 1 (so Alpha test is Disabled).     */    GLfloat getAlphaThreshold() const;    voID setAlphaThreshold(GLfloat AlphaThreshold);
这个方法比较重要。设置Alpha的值,跟图片的透明度有关,默认是1,就是图片中所有像素点都显示出来。包括透明区域。一般想不显示透明区域,则设置为0.05。 下面讲的裁剪图片的方法,也可以使用一个圆形的图片,中间镂空。那么就需要设置setAlphaThreshold,如果不设置的话,裁剪出来的图片就是正方形的,是图片的实际大小。
/** Inverted. If this is set to true,the stencil is inverted,so the content is drawn where the stencil is NOT drawn.     This default to false.     */    bool isInverted() const;    voID setInverted(bool inverted);
显示裁剪的部分,还是被裁剪的部分。 CircularNode 圆形图片类 写这个类有两种方法。一种是,让美术给切一个圆形的图片,中间镂空,以这个圆形图片做为clipPingNode的模板去裁剪,但必须要设置setAlphaThreshold(0.05)。 另一种方法就是下面代码所示,就不麻烦美术了,能省几KB就省几KB吧。我们自己画个圆形出来。只写了一个接口,需要的可以扩展,依照注释 看一下吧。 头文件:
#ifndef __CircularNode__#define __CircularNode__#include <stdio.h>#include "cocos2d.h"#include "extensions/cocos-ext.h"class CircularNode:public cocos2d::ClipPingNode{public:    CircularNode();    virtual ~CircularNode();    /**     *  创建一个圆形clipPingNode     *     *  @param radius 创建的圆形半径     *     *  @return 返回一个剪切node     */    static CircularNode* create(float radius);        /**     *  创建一个圆形的clipPingNode     *     *  @param radius 创建的圆形半径     *  @param sprite 需要切呈圆形的精灵     *     *  @return 返回一个剪切node     */    static CircularNode* create(float radius,cocos2d::Node* pNode);        virtual bool init(float radius);        CC_PROPERTY(cocos2d::Node*,m_clipNode,ClipNode);};#endif 
实现:
#include "CircularNode.h"USING_NS_CC;CircularNode::CircularNode()	:m_clipNode(nullptr){    }CircularNode::~CircularNode(){    CC_SAFE_RELEASE_NulL(m_clipNode);}CircularNode* CircularNode::create(float radius){    auto pClipNode = new CircularNode();    if (pClipNode && pClipNode->init(radius))    {        pClipNode->autorelease();    }    else    {        delete pClipNode;        pClipNode = nullptr;    }    return pClipNode;}bool CircularNode::init(float radius){    if (!ClipPingNode::init())    {        cclOG("CircularNode parent init Failed!");        return false;    }    	//使用drawNode画圆形    auto circleNode = DrawNode::create();	//顶点坐标个数,在需要画大圆的时候,这个值就要相应变大一点    const int maxTrangle = 360;	//顶点数组    Vec2 circleVec2[maxTrangle];	//计算圆上面的各个点的坐标    for (int i = 0; i < maxTrangle; i ++)    {        float x = cosf( i * (M_PI/180.f)) * radius;        float y = sinf( i * (M_PI/180.f)) * radius;        circleVec2[i] = Vec2(x,y);    }	//颜色    auto circlecolor = color4F(0,1,1);    circleNode->drawpolygon(circleVec2,maxTrangle,circlecolor,circlecolor);	//设置clipPingNode的模板类	setStencil(circleNode);    return true;}CircularNode* CircularNode::create(float radius,Node* pNode){    auto clipNode = CircularNode::create(radius);    if (clipNode)    {        clipNode->setClipNode(pNode);    }    return clipNode;}voID CircularNode::setClipNode(Node* pNode){    CC_SAFE_RELEASE_NulL(m_clipNode);    m_clipNode = pNode;    CC_SAFE_RETAIN(m_clipNode);        addChild(pNode);}Node* CircularNode::getClipNode(){    return m_clipNode;}

测试效果:

总结

以上是内存溢出为你收集整理的cocos2dx 3.2 利用clippingNode把图片裁剪成圆形,接口可直接使用全部内容,希望文章能够帮你解决cocos2dx 3.2 利用clippingNode把图片裁剪成圆形,接口可直接使用所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1029812.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存