前言
Cocos Creator 現(xiàn)在還不是很完善，假如截圖截得是部分節(jié)點(diǎn)，所截圖對象會(huì)跑到左下角，官方提出的將 renderTexture 添加到場景中去,防止截屏?xí)r元素移動(dòng)，親測這樣雖然截圖時(shí)對象不會(huì)移動(dòng)但是截得圖有問題。
一、具體步驟
1、更改被截圖對象的錨點(diǎn)
經(jīng)過測試，RenderTexture 截圖的時(shí)候會(huì)將被截圖的對象移到整個(gè)場景的左下角，然后根絕設(shè)置的 size ，以左下角為坐標(biāo)原點(diǎn)截取，坐標(biāo)系的錨點(diǎn)是（0，0）。
所以，假如被截圖對象的錨點(diǎn)為（0.5，0.5），則只能截取右上角的1/4。遂將被截圖對象的錨點(diǎn)設(shè)置為（0，0）。
2、添加一個(gè)虛假被截圖對象
經(jīng)過測試，我發(fā)現(xiàn)被截圖對象被隱藏后，只要不在本次刷新界面的時(shí)機(jī)被激活，比如在下次刷新界面的時(shí)候激活，則會(huì)恢復(fù)到原位（這個(gè)激活操作是必須做的，否則被移動(dòng)的被截圖對象也不會(huì)恢復(fù)到原位?。?。
基于這個(gè)測試結(jié)果，我的思路是：代替原被截圖對象，放置一個(gè)虛假精靈，在截圖的時(shí)候?qū)⒔厝〉膱D顯示在這個(gè)虛假精靈中，替換原被截圖對象，同時(shí)隱藏被截圖對象。這樣就看不到被移動(dòng)的被截圖對象了。然后在一個(gè)合適的時(shí)機(jī)，再激活真實(shí)被截圖對象，隱藏虛假被截圖對象。
3、正式截圖
① 設(shè)置三個(gè)對象如下代碼：
properties: {
// 被截圖對象
cocos: cc.Sprite,
// 顯示截圖的精靈
show: cc.Sprite,
// 被截圖對象的虛假替身
cocosImage: cc.Sprite,
},
需要的注意的是：本例中虛假替身本身是在被截圖的對象的位置的，所以后續(xù)不需要設(shè)置位置。
② 截圖核心代碼：
shot: function () {
// 注意，EditBox，VideoPlayer，Webview 等控件無法被包含在截圖里面
// 因?yàn)檫@是 OpenGL 的渲染到紋理的功能，上面提到的控件不是由引擎繪制的
if (CC_JSB) {
// 創(chuàng)建 renderTexture
var renderTexture = cc.RenderTexture.create(195, 270);
//實(shí)際截屏的代碼
renderTexture.begin();
this.cocos._sgNode.visit();
renderTexture.end();
// 獲取SpriteFrame
var nowFrame = renderTexture.getSprite().getSpriteFrame();
// 賦值給需要截圖的精靈
this.show.spriteFrame = nowFrame;
// 顯示虛假的代替精靈
this.cocosImage.node.active = true;
this.cocosImage.spriteFrame = nowFrame;
// 翻轉(zhuǎn)得到的紋理
var action = cc.flipY(true);
this.show.node.runAction(action);
var action1 = cc.flipY(true);
this.cocosImage.node.runAction(action1);
// 隱藏被截圖的對象
this.cocos.node.active = false;
}
},
需要注意的：
i RenderTexture 得到的紋理是上下翻轉(zhuǎn)的，所以需要相應(yīng)翻轉(zhuǎn)回來！假如不坐旋轉(zhuǎn)就會(huì)如下圖：
ii 想要截全屏，只要使用 Canvas 的節(jié)點(diǎn)即可，全屏的情況下不需要考慮虛假節(jié)點(diǎn)直接截取即可，記得將初始化 RenderTexture 時(shí)，傳入的 size 為全屏的大小。
正常截圖完后的圖如下：
4、顯示原圖
之前也說了，需要在合適時(shí)機(jī)，激活被截圖對象，并隱藏虛假被截圖對象，代碼如下：
this.cocos.node.active = true;
this.cocosImage.node.active = false
二、其他事項(xiàng)
1、如果待截圖的場景中含有 mask，請使用下面注釋的語句來創(chuàng)建 renderTexture。
var renderTexture = cc.RenderTexture.create(640,960, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);
2、把 renderTexture 添加到場景中去，否則截屏的時(shí)候，場景中的元素會(huì)移動(dòng)。(確實(shí)不移動(dòng)了，但是截部分節(jié)點(diǎn)得圖時(shí)有問題，假如哪位童鞋測試沒問題，希望能聯(lián)系我...)
this.node.parent._sgNode.addChild(renderTexture);
3、把 renderTexture 設(shè)置為不可見，可以避免截圖成功后，移除 renderTexture 造成的閃爍
renderTexture.setVisible(false);
4、保存所截的圖，并且打印其地址
// 保存截圖到本地
renderTexture.saveToFile("demo.png", cc.IMAGE_FORMAT_PNG, true, function () {
});
// 打印本地的地址
cc.log(jsb.fileUtils.getWritablePath());
