截图!长按保存分享!Cocos Creator 全球今日讯
发稿时间:2023-04-25 15:44:52 来源: 程序员客栈
背景一种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年版
点击“阅读原文”查看精选导航
“点赞“ ”在看”鼓励一下▼
标签:
- 截图!长按保存分享!Cocos Creator 全球今日讯
- 恒生科技指数跌4%,恒指跌近2%-关注
- 18万职工开设账户 咸宁住房公积金归集余额破百亿元
- 南阳市镇平县:以巡促改拆违建 万家通行更安全
- 2023年青海二级建造师准考证打印5月30日开始
- 南柱赫曾与校园暴力爆料者见面 双方各持己见
- 时代光影 百部川扬 | 《乐至恋歌》|通讯
- 时代光影 百部川扬 | 《在成都遇见你》MV
- 长江鲟野外自然繁殖试验成功 行动计划覆盖17年|当前聚焦
- 推介恩阳城市新价值,共谋未来发展新机遇!|每日精选
- 时代光影 百部川扬 | 《传承--“开路先锋”精神薪火相传》中铁八局-环球播报
- 时代光影 百部川扬 | 《交通强国•匠心筑梦》 全球视讯
- 科学家证实蔓越莓对女性神秘益处 可以预防UTI
- 美国迪士尼公司开始新一轮裁员计划 总数达到4000人
- 辽宁:保护知识产权 激发创新活力
- 桃江县畜牧水产事务中心组织开展创文巩卫志愿活动
- 2023年湖南省《职业病防治法》宣传周在益启动-全球微动态
- 天天播报:投资1亿元!一家中德合资企业落户桃江国辰高科产业园
- 襄阳北编组站大桥建设 进入“百米冲刺”
- 宁夏这所学校用艺术展示廉洁
- 当前快报:《崩坏星穹铁道》怎么完成风雪免疫任务
- 环球讯息:即日起,北京东城严打旅游市场价格违法!为期半年
- 当前快报:真就没人管得了民宿恶意毁约?
- 能见度已明显转好!北京解除沙尘蓝色预警 全球热头条
- 最早可追溯至三国时期、宋朝命运之战,高梁河是这样来的
- 北京数字经济同比增长7.6%,迎来“开门红”
- 天津太平隆龙医药 太平龙隆医药商城 天天报资讯
- 当前焦点!有出行计划的注意!“五一”高速免费时间这样算
- 合肥五里片区A组团二期G地块项目部开展“国家安全教育日”活动 当前聚焦
- 2023-4.23阅读经典 传递书香——梅观高速项目部开展世界读书日活动_环球今热点
延伸阅读
资讯