截图！长按保存分享！Cocos Creator

最新推荐文章于 2024-07-31 15:55:54 发布

原创

最新推荐文章于 2024-07-31 15:55:54 发布 · 761 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#数码相机

本文介绍了使用Cocos Creator 3.7.1实现的一种长按保存分享的3D截图方案。通过3D相机生成RT，结合UI元素，利用canvas生成图片数据，并提供了代码示例和操作视频供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一种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:&nb