截图!长按保存分享!Cocos Creator
白玉无冰
共 8033字,需浏览 17分钟
· 2023-03-11
一种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')
export class CaptureImage extends Component {
@property(Camera)
copyCamera: Camera = null!;
@property(Node)
targetNode: Node = null!;
@property(Node)
captureBtn: Node = null!;
@property(Node)
closeBtn: Node = null!;
rt: RenderTexture
private _image: HTMLImageElement
_canvas: HTMLCanvasElement = null!;
_buffer: ArrayBufferView = null!;
start() {
log('欢迎关注微信公众号【白玉无冰】 https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA')
this.rt = new RenderTexture();
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)
}
private copyRenderTex() {
const width = this.targetNode.getComponent(UITransform).width;
const height = this.targetNode.getComponent(UITransform).height;
const anchorPoint = this.targetNode.getComponent(UITransform).anchorPoint;
const worldPos = 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 {
let ctx = this._canvas.getContext('2d');
ctx.clearRect(0, 0, this._canvas.width, this._canvas.height);
}
let ctx = this._canvas.getContext('2d')!;
let rowBytes = width * 4;
for (let row = 0; row < height; row++) {
let sRow = height - 1 - row;
let imageData = ctx.createImageData(width, 1);
let start = sRow * width * 4;
for (let i = 0; i < rowBytes; i++) {
imageData.data[i] = this._buffer[start + i];
}
ctx.putImageData(imageData, 0, row);
}
const scale = (view.getVisibleSizeInPixel().height / screen.devicePixelRatio) / view.getDesignResolutionSize().height
const imageWidth = width * scale
const imageHeight = height * scale
let img = new Image(imageWidth, imageHeight);
img.style.position = "absolute"
img.style.marginTop = -imageHeight / 2 + "px"
img.style.marginLeft = -imageWidth / 2 + "px"
img.style.top = "50%"
img.style.left = "50%"
img.src = this._canvas.toDataURL();
game.container!.appendChild(img);
if (this._image) {
game.container!.removeChild(this._image)
}
this._image = img;
this.captureBtn.active = false;
this.closeBtn.active = true;
}
private clearCapture() {
if (this._image) {
game.container!.removeChild(this._image)
}
this._image = null;
this.captureBtn.active = true;
this.closeBtn.active = false;
}
}
其他
最近写文偏笔记的形式,主要是记录一下代码,下次要用的时候再翻出来。希望对大家有所帮助。
参考资料
[1]
TRUE SPACE with Cocos 技术分享: https://forum.cocos.org/t/topic/146459
[2]视频: https://www.bilibili.com/video/BV1w84y1N7XQ
往期精彩:
零代码实现面片效果(UV滚动,帧动画) Cocos Creator
点击“阅读原文”查看精选导航
“点赞“ ”在看” 鼓励一下▼
评论
分享几个前端中好玩且有用的开源工具,总有一个适合你!
点击上方 前端Q,关注公众号回复加群,加入前端Q技术交流群正所谓差生文具多,作为前端的我们,拥有几个合适的工具和网站可以很有效的提高我们的工具效率,还会有一些很有趣的网站可以在我们敲 bug 累了的时候供我们娱乐,接下来我就和大嘎分析一下我在用的一些工具和网站。聚合API该网站提供了大量的
前端Q
0
分享一份抓取某东商品名称、价格和评论数的代码
点击上方“Python共享之家”,进行关注回复“资源”即可获赠Python学习资料今日鸡汤芳草已云暮,故人殊未来。大家好,我是皮皮。一、前言前几天在Python白银交流群【邮递员】问了一个Python网络爬虫的问题,提问截图如下:代码如下:import requestsfrom
IT共享之家
0
ChatGPT、大模型、AI资料分享群
大家好,我是老章之前我发了一份ChatGPT资料(ChatGPT 系列研究报告(40个PDF)),很多朋友购买了。后来我又整理了一些新的,资料包目前有50个PDF了:ChatGPT 系列研究报告(50个PDF),建了一个资料分享微信群这个群我已经维护了一年,只要有新的资料,我都更新到群里了,内容不限
机器学习算法与Python实战
27
分享一个软硬件开源的低功耗时钟项目
关注、星标公众号,直达精彩内容来源 | 网络这是一款基于 AVR128DA48 的超低功耗 LCD 时钟,能够使用 CR2032 纽扣电池或太阳能电池运行三年以上:它使用 AVR128DA48 的片上温度传感器,用 ADC 读取其自身的电源电压。还有一个 I2C 接口,你
李肖遥
0
整理分享五款电脑办公神器!
在日常的工作和学习中,我们总是需要一些工具来提高效率。今天在大家整理了几款比较冷门的工具,界面都是比较简洁的,不需要安装,没有那些凡人广告锤炼小心脏。Q-Dir 多窗口文件管理器这款工具可以同时显示 4 个 Windows 资源管理器的窗口,让文件管理变得更加方便。你可以在不同的窗口中进行复制、粘贴
良许Linux
0
ChatGPT、大模型、AI资料分享群
大家好,我是老章之前我发了一份ChatGPT资料(ChatGPT 系列研究报告(40个PDF)),很多朋友购买了。后来我又整理了一些新的,资料包目前有50个PDF了:ChatGPT 系列研究报告(50个PDF),建了一个资料分享微信群这个群我已经维护了一年,只要有新的资料,我都更新到群里了,内容不限
机器学习算法与Python实战
10
捷成华视网聚确认出席「长江论道」,分享新媒体版权运营新想法
5月23-24日,长江论道诚邀您的参与主办单位流媒体网协办单位湖北长江云新媒体集团举办时间2024年5月23-24日举办地点武汉富力威斯汀酒店捷成华视网聚公司介绍LUNDAO捷成华视网聚是腾讯、优酷、爱奇艺、芒果TV及各类视频平台的重要内容供应商,也是国内领先的新媒体版权内容供应链平台。此次「长江论
流媒体网
0