截圖!長按保存分享!Cocos Creator
背景一種3D截圖方案
參考 TRUE SPACE with Cocos 技術分享[1]中的動態生成海報的介紹,以及作者的支持。實現一個長按保存分享截圖的方案。
(資料圖片僅供參考)
效果在微信瀏覽器中預覽效果如下
環境Cocos Creator 3.7.1Web 瀏覽器原理原作者講的非常清楚,只需要按照以下步驟實現即可。
3D相機生成一個RT 賦予給2D精靈擺上一些二維碼等UIUI相機再生成一張RT讀取RT中的數據,傳給 canvascanvas 生成圖片數據傳給 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年版
點擊“閱讀原文”查看精選導航
“點贊“ ”在看”鼓勵一下▼
關鍵詞:
責任編輯:孫知兵
免責聲明:本文僅代表作者個人觀點,與太平洋財富網無關。其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,并請自行核實相關內容。
如有問題,請聯系我們!
- 截圖!長按保存分享!Cocos Creator2023-04-29
- “五一”烏魯木齊機場改擴建工程建設“不打2023-04-29
- 深圳市大灣區金融研究院揭牌 眾邦銀行聯合2023-04-29
- 廣州住房公積金管理中心電話多少_廣州住房2023-04-29
- 三夫戶外一季度凈利潤增長超480%,品牌運營2023-04-29
- 童年時光回應質疑:不存在“假冒模仿”,與2023-04-29
- 拼多多“數碼家電消費季”啟動“五一超級加2023-04-29
- 環球快看點丨華為商城收貨地址在哪設置和修2023-04-29
- TCL智能終端榮獲多項艾普蘭獎 技術創新領2023-04-29
- 佐力藥業:靈澤片銷售勢頭較好 今年更有利2023-04-29
- 全國公路氣象預報(4月29日20時至30日20時)2023-04-29
- 傾注百年北歐匠心,ASKO斬獲2023AWE艾普蘭2023-04-29
- 卓翼科技:2022年實現營業收入19.25億元|當2023-04-29
- 金地集團2022年營收超1200億元 同比實現兩2023-04-29
- 2021全運會乒乓球項目資格賽經過激烈爭奪162023-04-29
- 當前信息:這個糖尿病并發癥會致殘致死!中2023-04-29
- 【速看料】北信源一季度實現扭虧為盈2023-04-29
- iPhone 15系列推出新顏色 非Pro版本磨砂2023-04-29
- 去年單車收入增長超四成 北汽藍谷:“今年2023-04-29
- 關愛眼健康∣惠安縣關工委眼健康專題輔導講2023-04-29
- 中富金石成都分公司虛假宣傳薦股服務,被騙2023-04-29
- 高頻電磁波_關于高頻電磁波簡述2023-04-29
- 箭牌家居首秀AWE榮獲艾普蘭獎!2023-04-29
- 視訊!海外營收增長超四倍后,出海會是國軒2023-04-29
- 萬寧市氣象臺發布雷雨大風黃色預警【Ⅲ級/2023-04-29
- 詐騙刑拘怎樣辦理取保2023-04-29
- 當前速看:斗魚能和水虎魚一起養嗎 斗魚和2023-04-29
- 當前要聞:上市公司2022年成績單出爐:營業2023-04-29
- 恒星科技:公司金剛線2022年產銷量比2021年2023-04-29
- 每日速讀!每日看點!熱門看點:獵魂覺醒克里2023-04-29
精彩推薦
- 截圖!長按保存分享!Cocos Creator
- 環球快看點丨華為商城收貨地址在哪設置...
- 2021全運會乒乓球項目資格賽經過激烈爭...
- 關愛眼健康∣惠安縣關工委眼健康專題輔...
- 萬寧市氣象臺發布雷雨大風黃色預警【Ⅲ...
- 每日速讀!每日看點!熱門看點:獵魂覺醒...
- 【資訊】官方回應魅族20缺貨問題:1元訂...
- 瞧這陣勢!游客大軍來了!|世界微速訊
- 【獨家】拉塞爾:自從交易之后 我們為...
- 香港已落成但未售出的私人住宅新供應單...
- 前沿資訊!一周藥聞復盤 | CPHI制藥在...
- 佰維存儲擬通過深化研發封測一體化布局...
- 中國外交官:在困難和危機面前做“留守...
- 當前看點!浙江衛視中國好聲音第一季直播...
- 天天新動態:莫讓獨董成“花瓶”
閱讀排行
-
環球快看點丨華為商城收貨地址在哪設置和修改(華為商城怎么更改收貨地址)
上一篇2023-04-29 21:38:33