cocos2dx 3.X 利用clippingNode把图片裁剪成圆形

ClippingNode简介

先简单了解一下clippingNode类的使用。顾名思义,首先它是一个node,可以做为其他sprite,node的容器,而且是一个可以裁剪的node。如何裁剪,如何定义一套裁剪的规则出来。这里可以使用一张图片,根据图片的分辨率或者有效像素进行裁剪,或者自己画出来一个裁剪区域,根据这个区域进行裁剪。那这个图片或者画出来的区域,就是模板,clippingNode根据模板进行图片的裁剪。

主要方法:

 static ClippingNode* create(Node *stencil);//create函数中传入一个模板,可以是一个sprite,也可以是一个drawNode(自定义的图形)

GLfloat getAlphaThreshold() const;  

void setAlphaThreshold(GLfloat alphaThreshold); 

这个方法比较重要。设置alpha的值,跟图片的透明度有关,默认是1,就是图片中所有像素点都显示出来。包括透明区域。一般想不显示透明区域,则设置为0.05。
下面讲的裁剪图片的方法,也可以使用一个圆形的图片,中间镂空。那么就需要设置setAlphaThreshold,如果不设置的话,裁剪出来的图片就是正方形的,是图片的实际大小。
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, 0, 1);
    circleNode->drawPolygon(circleVec2, maxTrangle, circleColor, 1, 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;
}
时间: 2024-10-08 19:49:40

cocos2dx 3.X 利用clippingNode把图片裁剪成圆形的相关文章

ios 将矩形图片裁剪成圆形图片

在ios中将一个正方形的图片裁剪成圆形的图片是一件非常容易的事情, 直接设置 imageView.layer.cornerRadius 这个属性, 再设置 imageView.clipsToBounds = YES 就可以了, 但是对于长方形的图片来说这个方式裁剪出来的就不是一个圆形的了, 而是个椭圆的. 解决这个问题就需要自己画 并且需要计算. 最终效果图如下: tips: 如果是裁剪矩形的话, 是从图片中心的位置为圆心剪裁的. 代码如下: @implementation UIImage (C

图片裁剪之圆形头像

把一张普通的图片刻意裁剪成圆形,并给圆形图片加上圆形边框 代码抽取为UIImage的分类方法,如下: 1 + (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor 2 { 3 // 1.加载原图 4 UIImage *oldImage = [UIImage imageNamed:name]; 5 6 // 2.开启

ASP.NET MVC在服务端把异步上传的图片裁剪成不同尺寸分别保存,并设置上传目录的尺寸限制

我曾经试过使用JSAjaxFileUploader插件来把文件.照片以异步的方式上传,就像"MVC文件图片ajax上传轻量级解决方案,使用客户端JSAjaxFileUploader插件01-单文件上传"中说的,这种方法足够轻.足够好.但今天,要在前面的基础上再增加2个需求: 1.异步判断上传的图片是否超过最大限制2.把上传的图片裁剪成大中小3张图片,分别保存,删除的时候一块被删除 上传图片如果超出最大尺寸限制,终止上传,并报错误信息. 前台上传图片,显示缩略图. 在项目根目录下的指定文

如何将方形图片磨成圆形图片

如何将方形图片磨成圆形图片 在开发中经常会有一些需求,比如显示头像,显示一些特殊的需求,将图片显示成圆角或者圆形或者其他的一些形状.但是往往我们手上的图片或者从服务器 获取到的图片都是方形的.这时候就需要我们自己进行处理,将图片处理成所需要的形状. 使用Xfermode 两图相交方式 通过查找资料通过查找资料发现android中可以设置画笔的Xfermode即相交模式,从而设置两张图相交之后的显示方式,具体模式见下图,源码可以去android apidemo.(SRC 为我们要画到目标图上的图即

iOS给一张矩形图片剪切成圆形图片

随着APP发展,个人账户的注册和登陆,都有头像的设置,圆形头像也越来越多,此方法正是对剪切圆头像的封装. //****************************************************************************************************************// //******************************************************************************

图片裁剪与圆角半径设置(将图片裁剪为圆形)

如上: 需求:将左边图片改变为右边的图形 1.鼠标右键--用“裁剪图片”,将图片裁剪为正方形 2.在“元件属性与样式”---样式---圆角半径,将圆角半径设置为330即可实现上图效果,圆角半径具体数值可根据具体情况做调整

ios之如何让图片显示成圆形的样式/设置控件边框大小以及颜色

比如说QQ登陆头像显示出来的就是圆形的,但实际上它的图片并非就是圆形,而是通过对layer层进行绘制而成的.说到layer每个控件都会有layer层属性所以可以把任意的控件都可以设置成圆形,或是椭圆型看项目需要而定 UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"头像.png"]]; imageView.frame = CGRectMake(100, 100, 100, 1

把图片转换成圆形图片

调用:(bt是Bitmap) head_portrait.setImageBitmap(ToRoundBitmap.toRoundBitmap(bt)); 转换圆形的方法: 1 package com.ghp.tools; 2 3 import android.graphics.Bitmap; 4 import android.graphics.Canvas; 5 import android.graphics.Color; 6 import android.graphics.Paint; 7

java利用ffmpeg把图片转成yuv格式

安装ffmpeg: 安装目录:/usr/share/ffmpeg 创建ffmpeg目录,解压ffmpeg-3.4.1.tar.bz2 tar -xjvf ffmpeg-3.4.1.tar.bz2 下载yasm-1.3.0.tar.gz 解压 tar -xvzf yasm-1.3.0.tar.gz cd yasm-1.3.0/ ./configure make make install 编译参数都是默认的,直接安装到系统中即可,安装成功之后继续回到ffmpeg解压后的目录,执行下面命令编译并安装: