您的位置：首頁 >熱點 > 正文

截圖！長按保存分享！Cocos Creator

來源：程序員客棧時間：2023-03-26 15:36:25

一種3D截圖方案

背景

參考 TRUE SPACE with Cocos 技術分享^[1]中的動態生成海報的介紹，以及作者的支持。實現一個長按保存分享截圖的方案。

(資料圖片)

效果

在微信瀏覽器中預覽效果如下

環境

Cocos Creator 3.7.1

Web 瀏覽器

原理

原作者講的非常清楚，只需要按照以下步驟實現即可。

3D相機生成一個RT 賦予給2D精靈

擺上一些二維碼等UI

UI相機再生成一張RT

讀取RT中的數據，傳給 canvas

canvas 生成圖片數據傳給 Image

適配Image對象大小位置

視頻

錄了一段操作視頻^[2]供大家參考。

代碼

這段代碼的截圖功能是按照高度適配的方式寫的，如有其他需求，可自行修改相關邏輯。僅供大家參考學習。

import{_decorator,Component,Node,Camera,RenderTexture,view,UITransform,log,game,screen,NodeEventType}from"cc";const{ccclass,property}=_decorator;@ccclass("CaptureImage")exportclassCaptureImageextendsComponent{@property(Camera)copyCamera:Camera=null!;@property(Node)targetNode:Node=null!;@property(Node)captureBtn:Node=null!;@property(Node)closeBtn:Node=null!;rt:RenderTextureprivate_image:HTMLImageElement_canvas:HTMLCanvasElement=null!;_buffer:ArrayBufferView=null!;start(){log("歡迎關注微信公眾號【白玉無冰】https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA")this.rt=newRenderTexture();this.rt.reset({width:view.getVisibleSize().width,height:view.getVisibleSize().height,})this.copyCamera.targetTexture=this.rt;this.captureBtn.active=true;this.closeBtn.active=false;this.captureBtn.on(NodeEventType.TOUCH_END,this.copyRenderTex,this)this.closeBtn.on(NodeEventType.TOUCH_END,this.clearCapture,this)}privatecopyRenderTex(){constwidth=this.targetNode.getComponent(UITransform).width;constheight=this.targetNode.getComponent(UITransform).height;constanchorPoint=this.targetNode.getComponent(UITransform).anchorPoint;constworldPos=this.targetNode.getWorldPosition();this._buffer=this.rt.readPixels(Math.round(worldPos.x-width*anchorPoint.x),Math.round(worldPos.y-height*anchorPoint.y),width,height);if(!this._canvas){this._canvas=document.createElement("canvas");this._canvas.width=width;this._canvas.height=height;}else{letctx=this._canvas.getContext("2d");ctx.clearRect(0,0,this._canvas.width,this._canvas.height);}letctx=this._canvas.getContext("2d")!;letrowBytes=width*4;for(letrow=0;row
其他最近寫文偏筆記的形式，主要是記錄一下代碼，下次要用的時候再翻出來。希望對大家有所幫助。
參考資料[1]
TRUE SPACE with Cocos 技術分享:https://forum.cocos.org/t/topic/146459
[2]視頻:https://www.bilibili.com/video/BV1w84y1N7XQ
往期精彩：
3DUI Cocos Creator
三渲二 Cocos Creator
零代碼實現面片效果(UV滾動,幀動畫) Cocos Creator
游戲開發資料合集，2022年版
點擊“閱讀原文”查看精選導航
“點贊“ ”在看”鼓勵一下▼
                			免責聲明：本文不構成任何商業建議，投資有風險，選擇需謹慎！本站發布的圖文一切為分享交流，傳播正能量，此文不保證數據的準確性，內容僅供參考
                      
 關鍵詞：