Cocos Creator 實現截圖

前言

Cocos Creator 如今還不是很完善，假如截圖截得是部分節點，所截圖對象會跑到左下角，官方提出的將 renderTexture 添加到場景中去,防止截屏時元素移動，親測這樣雖然截圖時對象不會移動可是截得圖有問題。

1、具體步驟

一、更改被截圖對象的錨點

通過測試，RenderTexture 截圖的時候會將被截圖的對象移到整個場景的左下角，而後根絕設置的 size ，以左下角爲座標原點截取，座標系的錨點是（0，0）。

因此，假如被截圖對象的錨點爲（0.5，0.5），則只能截取右上角的1/4。遂將被截圖對象的錨點設置爲（0，0）。

二、添加一個虛假被截圖對象

通過測試，我發現被截圖對象被隱藏後，只要不在本次刷新界面的時機被激活，好比在下次刷新界面的時候激活，則會恢復到原位（這個激活操做是必須作的，不然被移動的被截圖對象也不會恢復到原位！）。

基於這個測試結果，個人思路是：代替原被截圖對象，放置一個虛假精靈，在截圖的時候將截取的圖顯示在這個虛假精靈中，替換原被截圖對象，同時隱藏被截圖對象。這樣就看不到被移動的被截圖對象了。而後在一個合適的時機，再激活真實被截圖對象，隱藏虛假被截圖對象。

三、正式截圖

① 設置三個對象以下代碼：

properties: {

        // 被截圖對象 
        cocos: cc.Sprite,
        // 顯示截圖的精靈
        show: cc.Sprite,
        // 被截圖對象的虛假替身
        cocosImage: cc.Sprite,
    },複製代碼

須要的注意的是：本例中虛假替身自己是在被截圖的對象的位置的，因此後續不須要設置位置。

② 截圖核心代碼：

shot: function () {

        // 注意，EditBox，VideoPlayer，Webview 等控件沒法被包含在截圖裏面
        // 由於這是 OpenGL 的渲染到紋理的功能，上面提到的控件不是由引擎繪製的

        if (CC_JSB) {

            // 建立 renderTexture
            var renderTexture = cc.RenderTexture.create(195, 270);

            //實際截屏的代碼
            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;

            // 翻轉獲得的紋理
            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 獲得的紋理是上下翻轉的，因此須要相應翻轉回來！假如不坐旋轉就會以下圖：

ii 想要截全屏，只要使用 Canvas 的節點便可，全屏的狀況下不須要考慮虛假節點直接截取便可，記得將初始化 RenderTexture 時，傳入的 size 爲全屏的大小。

正常截圖完後的圖以下：

四、顯示原圖

以前也說了，須要在合適時機，激活被截圖對象，並隱藏虛假被截圖對象，代碼以下：

this.cocos.node.active = true;
this.cocosImage.node.active = false複製代碼

2、其餘事項

一、若是待截圖的場景中含有 mask，請使用下面註釋的語句來建立 renderTexture。

var renderTexture = cc.RenderTexture.create(640,960, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);複製代碼

二、把 renderTexture 添加到場景中去，不然截屏的時候，場景中的元素會移動。(確實不移動了，可是截部分節點得圖時有問題，假如哪位童鞋測試沒問題，但願能聯繫我...)

this.node.parent._sgNode.addChild(renderTexture);複製代碼

三、把 renderTexture 設置爲不可見，能夠避免截圖成功後，移除 renderTexture 形成的閃爍

renderTexture.setVisible(false);複製代碼

四、保存所截的圖，而且打印其地址

// 保存截圖到本地
renderTexture.saveToFile("demo.png", cc.IMAGE_FORMAT_PNG, true, function () {

            });

// 打印本地的地址 
cc.log(jsb.fileUtils.getWritablePath());複製代碼

3、Demo

點擊進入Demo

4、嘿嘿！你懂得！

本文首發於個人我的博客，但願你們多多支持！