截图!长按保存分享!Cocos Creator
时间:2023-03-31 07:39:43 来源:程序员客栈
背景一种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年版
点击“阅读原文”查看精选导航
“点赞“ ”在看”鼓励一下▼
标签:
最新文章推荐
- 陕西7名核酸检测阳性外省游客活动轨迹公布
- 万人说新疆 | 棉花朵朵赛白云,阿克苏美出新高度!
- 万人说新疆 | 孙芳红:我在新疆每天过得很充实也很快乐
- 万人说新疆 | 棉农阿卜来提开心地笑了
- 万人说新疆 | 阿迪力的棉花合作社年入300万
- 四川乐山犍为县发生4.3级地震 无人员伤亡
- 西安全面开展排查管控 目前20481人核酸检测结果均阴性
- 陕西7名核检阳性者为一旅行团同行人员 活动轨迹公布
- 西安交大举行2021级本科生迎新会 校长:学习是主动作为之事
- 【母亲河畔的中国】黄河岸边的这个村庄如何打好旅游服务牌?
X 关闭
资讯中心
2022-08-06
2022-07-08
2022-05-20
2021-10-18
X 关闭
热点资讯
-
1
华为Mate X5直接开售,秒售罄!除价格外,其他信息已汇总
-
2
长飞特种光纤助力高质量光通信网络与数据中心建设
-
3
国信证券:港股底部条件具备,等待美联储加息结束
-
4
同一个作者的作品,为什么西行纪可以做成年番,武庚纪却不行?
-
5
河岸“会客厅”打造京城新地标
-
6
股票行情快报:亿联网络(300628)9月8日主力资金净卖出212.22万元
-
7
个人ip如何打造 ip的意思是什么
-
8
“速度王者”DNBSEQ-G99获国家药监局批准 华大智造再拓18亿销售空间
-
9
李墨谦(对于李墨谦简单介绍)
-
10
受降雨影响,居庸关长城景区夜长城及部分区域暂时关闭
-
11
新华社权威快报|10位国际友人获颁首届兰花奖
-
12
几内亚西芒杜铁矿北部区块开发快速推进:中国宝武即将“进场”项目投资
-
13
记者观察丨违规减持屡禁不止 上市公司守信合规要加强
-
14
恒宇信通:9月7日融资买入480.22万元,融资融券余额2345.29万元
-
15
儿童友好看雄安丨“我与雄安一同成长”儿童友好科普教育基地巡礼活动举办
-
16
贵港重点在园区发展保障性租赁住房 着力解决产业工人职住问题
-
17
白醋怎么洗脸才美白祛斑视频(白醋怎么洗脸)
-
18
《灌篮高手》日本下档, 票房已突破155.2亿日元
-
19
没想到,辣椒素是牛生长不可缺少的因素,辣椒素对牛的好处有哪些
-
20
交易异动!鸣志电器:无未披露的重大事项