前言
Cocos Creator 現(xiàn)在還不是很完善，假如截圖截得是部分節(jié)點(diǎn)，所截圖對(duì)象會(huì)跑到左下角，官方提出的將 renderTexture 添加到場(chǎng)景中去,防止截屏?xí)r元素移動(dòng)旧蛾，親測(cè)這樣雖然截圖時(shí)對(duì)象不會(huì)移動(dòng)但是截得圖有問題。
一岁经、具體步驟
1、更改被截圖對(duì)象的錨點(diǎn)
經(jīng)過測(cè)試蛇券，RenderTexture 截圖的時(shí)候會(huì)將被截圖的對(duì)象移到整個(gè)場(chǎng)景的左下角缀壤，然后根絕設(shè)置的 size 朽们，以左下角為坐標(biāo)原點(diǎn)截取，坐標(biāo)系的錨點(diǎn)是（0诉位，0）骑脱。
所以，假如被截圖對(duì)象的錨點(diǎn)為（0.5苍糠，0.5）叁丧，則只能截取右上角的1/4。遂將被截圖對(duì)象的錨點(diǎn)設(shè)置為（0岳瞭，0）拥娄。
2、添加一個(gè)虛假被截圖對(duì)象
經(jīng)過測(cè)試瞳筏，我發(fā)現(xiàn)被截圖對(duì)象被隱藏后稚瘾，只要不在本次刷新界面的時(shí)機(jī)被激活，比如在下次刷新界面的時(shí)候激活姚炕，則會(huì)恢復(fù)到原位（這個(gè)激活操作是必須做的摊欠，否則被移動(dòng)的被截圖對(duì)象也不會(huì)恢復(fù)到原位！）柱宦。
基于這個(gè)測(cè)試結(jié)果些椒，我的思路是：代替原被截圖對(duì)象，放置一個(gè)虛假精靈掸刊，在截圖的時(shí)候?qū)⒔厝〉膱D顯示在這個(gè)虛假精靈中免糕，替換原被截圖對(duì)象，同時(shí)隱藏被截圖對(duì)象忧侧。這樣就看不到被移動(dòng)的被截圖對(duì)象了石窑。然后在一個(gè)合適的時(shí)機(jī)，再激活真實(shí)被截圖對(duì)象蚓炬，隱藏虛假被截圖對(duì)象松逊。
3、正式截圖
① 設(shè)置三個(gè)對(duì)象如下代碼：
properties: {
// 被截圖對(duì)象
cocos: cc.Sprite,
// 顯示截圖的精靈
show: cc.Sprite,
// 被截圖對(duì)象的虛假替身
cocosImage: cc.Sprite,
},
需要的注意的是：本例中虛假替身本身是在被截圖的對(duì)象的位置的试吁，所以后續(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);
// 隱藏被截圖的對(duì)象
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ī)朱巨，激活被截圖對(duì)象史翘，并隱藏虛假被截圖對(duì)象，代碼如下：
this.cocos.node.active = true;
this.cocosImage.node.active = false
二冀续、其他事項(xiàng)
1琼讽、如果待截圖的場(chǎng)景中含有 mask，請(qǐng)使用下面注釋的語句來創(chuàng)建 renderTexture洪唐。
var renderTexture = cc.RenderTexture.create(640,960, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);
2钻蹬、把 renderTexture 添加到場(chǎng)景中去，否則截屏的時(shí)候凭需，場(chǎng)景中的元素會(huì)移動(dòng)问欠。(確實(shí)不移動(dòng)了，但是截部分節(jié)點(diǎn)得圖時(shí)有問題粒蜈，假如哪位童鞋測(cè)試沒問題溅潜，希望能聯(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());
