加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

Cocos2d-x 图像渲染和动画——裁剪(ClippingNode)

发布时间:2020-12-14 17:07:44 所属栏目:百科 来源:网络整理
导读:概述 ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。 ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中。 ClippingNode 常用方法 create 可以使用 static ClippingNode* c

概述

ClippingNode(裁剪节点)可以用来对节点进行裁剪,可以根据一个模板切割图片的节点,生成任何形状的节点显示。

ClippingNode是Node的子类,可以像普通节点一样放入Layer,Scene,Node中。

ClippingNode 常用方法

  • create

    可以使用static ClippingNode* create();方法创建一个ClippingNode对象。如下:

    auto clipper = ClippingNode::create();

    也可以使用 static ClippingNode* create(Node *stencil);方法创建;在创建的时候指定裁剪模板

    auto stencil = Sprite::create("CloseNormal.png");//模板节点
    clipper = ClippingNode::create(stencil);
  • setStencil

    可以使用void setStencil(Node *stencil);方法设置“裁剪模板”节点。 如下:

    clipper->setStencil(stencil);//设置裁剪模板
  • setInverted

    可以使用void setInverted(bool inverted);方法,设置是显示被裁剪的部分,还是显示裁剪。true 显示剩余部分。false显示被剪掉部分。 如下:

    clipper->setInverted(true);//设置底板可见,显示剩余部分
  • setAlphaThreshold

    可以使用void setAlphaThreshold(GLfloat alphaThreshold);,设置alpha阈值, 只有模板(stencil)的alpha像素大于alpha阈值(alphaThreshold)时内容才会被绘制。 alpha阈值(threshold)范围应是0到1之间的浮点数。 alpha阈值(threshold)默认为1。 如下:

    clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0

示例

auto bg = LayerColor::create(Color4B(255,255,255));
    this->addChild(bg,-1);//1

    auto stencil = Sprite::create("CloseNormal.png");
    stencil->setScale(2);//2
    auto clipper = ClippingNode::create();
    clipper->setStencil(stencil);//设置裁剪模板 //3
    clipper->setInverted(true);//设置底板可见
    clipper->setAlphaThreshold(0);//设置绘制底板的Alpha值为0
    this->addChild(clipper);//4

    auto content = Sprite::create("HelloWorld.png");//被裁剪的内容
    clipper->addChild(content);//5

    clipper->setPosition(Vec2(visibleSize.width/2 + origin.x,visibleSize.height/2 + origin.y));

运行效果图:

clipper->setInverted(true); 改为 clipper->setInverted(false); 运行效果如图:

资源图片:

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读