cocos2d-js 2D控件

RenderTexture

RenderTexture Api

/** 
 * 通过宽度、高度、像素点格式（仅RGB和RGBA格式有效）、深度模板格式初始化一个RenderTexture对象
 * @param w 渲染纹理对象的宽度
 * @param h 渲染纹理对象的高度
 * @param format 像素点格式（只有RGB和RGBA格式是有效的）
 * @param depthStencilFormat 深度模板格式
 */
static RenderTexture * create(int w, int h);
static RenderTexture * create(int w, int h, Texture2D::PixelFormat format);
static RenderTexture * create(int w ,int h, Texture2D::PixelFormat format, GLuint depthStencilFormat);

/** 开始渲染 */
virtual void begin();

/** 
 * 开始渲染纹理时先清理纹理
 * 这是在开始渲染之前进行清理纹理的更有效方法
 * @param r 红色色值(0-255)
 * @param g 绿色色值(0-255)
 * @param b 蓝色色值(0-255)
 * @param a 颜色透明度(0-255)
 * @param depthValue  深度值
 * @param stencilValue 指定的模板值
 */
virtual void beginWithClear(float r, float g, float b, float a);
virtual void beginWithClear(float r, float g, float b, float a, float depthValue);
virtual void beginWithClear(float r, float g, float b, float a, float depthValue, int stencilValue);


/** 
 * end是lua的关键词，用其他名字输出到lua。
 */
inline void endToLua(){ end();};

/**
 * 结束渲染
 */
virtual void end();

/** 
 * 清除指定的纹理和颜色值
 * @param r Red.
 * @param g Green.
 * @param b Blue.
 * @param a Alpha.
 */
void clear(float r, float g, float b, float a);

/** 
 * 清除指定的纹理与深度值
 * @param depthValue 深度值
 */
virtual void clearDepth(float depthValue);

/** 
 * 清除指定的纹理与模板值
 * @param stencilValue 模板值
 */
virtual void clearStencil(int stencilValue);

/* 
 * 使用纹理的数据创建一个新的图像（调用者负责通过调用delete来释放它）
 * @param flipImage 是否翻转图像
 * @return 图像
 */
Image* newImage(bool flipImage = true);

/** 
 * 使用JPEG格式将纹理保存到文件中，该文件将被保存在“文档”文件夹中
 * @param filename  文件名
 * @param isRGBA    该文件是否为RGBA
 * @param callback  当文件保存完成后的回调
 * @return 如果操作成功，则返回true
 */
bool saveToFile(const std::string& filename, bool isRGBA = true, std::function<void (RenderTexture*, const std::string&)> callback = nullptr);

/** 
 * 将纹理保存到文件中，格式可以是JPG或PNG，该文件将被保存在“文档”文件夹中
 * 注意：自v3.x以来，saveToFile将会生成一个自定义的命令，这个命令将在下面的render-> render（）中被调用。
 * 所以如果在一个事件处理程序中调用这个函数，实际的保存文件将在下一帧被调用。 如果我们切换到不同的场景，游戏将会崩溃。
 * 为了解决这个问题，在Director :: getInstance（） - > getRenderer（） - > render（）; 之后添加这个功能。
 *
 * @param filename 文件名
 * @param format   图像格式（JPG、PNG）
 * @param isRGBA   该文件是否为RGBA
 * @param callback 当文件保存完成后的回调
 * @return 如果操作成功，则返回true
 */
bool saveToFile(const std::string& filename, Image::Format format, bool isRGBA = true, std::function<void (RenderTexture*, const std::string&)> callback = nullptr);

/** 
 * 监听手机回到后台的消息，并保存渲染
 * 它只对Android有影响
 * @param event 自定义事件回调
 */
void listenToBackground(EventCustom *event);

/** 
 * 监听手机回到前台的消息，并保存渲染
 * 它只对Android有影响
 * @param event 自定义事件回调
 */
void listenToForeground(EventCustom *event);

/** 
 * 获取标识
 */
inline unsigned int getClearFlags() const { return _clearFlags; };

/** 
 * 设置标识
 * @param clearFlags 有效标志：GL_COLOR_BUFFER_BIT，GL_DEPTH_BUFFER_BIT，GL_STENCIL_BUFFER_BIT
 */
inline void setClearFlags(unsigned int clearFlags) { _clearFlags = clearFlags; };

/** 
 * 清除颜色值，仅当“autoDraw”为true时才有效。
 * @return 颜色值
 */
inline const Color4F& getClearColor() const { return _clearColor; };

/** 
 * 设置颜色值
 * @param clearColor 色值
 */
inline void setClearColor(const Color4F &clearColor) { _clearColor = clearColor; };

/** 
 * 获取深度,仅当“autoDraw”为true时才有效。
 * @return 深度值
 */
inline float getClearDepth() const { return _clearDepth; };

/** 
 * 设置深度
 * @param clearDepth 深度值
 */
inline void setClearDepth(float clearDepth) { _clearDepth = clearDepth; };

/** 
 * 获取模具值
 * @return 模具值
 */
inline int getClearStencil() const { return _clearStencil; };

/** 
 * 设置模具值
 * @param 模具值
 */
inline void setClearStencil(int clearStencil) { _clearStencil = clearStencil; };

/** 
 * 启用后，会自动将其子项渲染到纹理中，出于兼容性原因，默认情况下禁用。
 * 将来会启用
 * @return 返回autoDraw值。
 */
inline bool isAutoDraw() const { return _autoDraw; };

/**  
 * 设置一个开关来控制是否自动将其子项渲染到纹理中。
 * @param isAutoDraw 是否自动将其子项渲染到纹理中。
 */
inline void setAutoDraw(bool isAutoDraw) { _autoDraw = isAutoDraw; };

/** 
 * 获取正在使用的Sprite。
 * @return Sprite.
 */
inline Sprite* getSprite() const { return _sprite; };

/** 
 * 设置正在使用的Sprite
 * @param sprite A Sprite.
 */
inline void setSprite(Sprite* sprite) {
    CC_SAFE_RETAIN(sprite);
    CC_SAFE_RELEASE(_sprite);
    _sprite = sprite;
};

RenderTexture 示例(RenderTexture 与 ClippingNode结合使用合成图片)

// 圆形图层大小
var clipWidth = 92;
var clipHeight = 92;

// 圆角半径
var radius = clipWidth / 2;

// 圆形图层的位置，以左下角坐标为起点
var offsetX = 86;
var offsetY = 80;

// 圆形参数
var drawRadius = radius / 3;
var drawAngle = 0;
var drawSegments = 100;
var drawLineToCenter = false;
var drawCenter = cc.p(-clipWidth / 2 + offsetX + radius, - clipHeight / 2 + offsetY + radius);
var drawLineColor = cc.color(0,0,0);

// 绘制圆形
var stencil = new cc.DrawNode();
stencil.drawCircle(drawCenter, drawRadius, drawAngle, drawSegments, drawLineToCenter, radius, drawLineColor);

// 通过绘制出的图形绘制面板
var clippingPanel = new cc.ClippingNode();
clippingPanel.stencil = stencil;

// 头像
var portraitView = new cc.Sprite("res/Resource/Common/defalt_portrait.png");
portraitView.setPosition(offsetX, offsetY);
clippingPanel.addChild(portraitView);

// 初始化渲染图层（注意：RenderTexture 与 ClippingNode结合使用会出现白色背景，所以最后一个参数要传gl.DEPTH24_STENCIL8_OES才能解决）
var rend = new cc.RenderTexture(1280, 760, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);
rend.setPosition(0, 0);

// 主面板（RenderTexture要渲染的主面板）
var shareContain = new cc.Sprite(game.platform.path + "Contest/share.png");
shareContain.addChild(clippingPanel);

// 开始渲染
rend.beginWithClear(0, 0, 0, 0, 0);
shareContain.setPosition(640,360);
shareContain.visit();
rend.end();

// 保存图片
rend.saveToFile("share.png", cc.IMAGE_FORMAT_PNG, false, function (sender, fileName) {
    cc.log(sender);
    cc.log(fileName);

    var newSprite = new cc.Sprite(jsb.fileUtils.getWritablePath()+"share.png");
    newSprite.setAnchorPoint(0, 0);
    newSprite.setPosition(0, 0);
    this.addChild(newSprite);
}.bind(this));

头像：

主面板：

合成后的视图：