cocosCreator动态生成二维码

news2025/3/15 11:43:53

cocosCreator 版本:3.7.2
开发语言:typeScript

我们在游戏开发中,经常会生成一个专属于玩家个人的二维码,比如说推广、充值等功能。

接到这个任务,在网上找了下,还是有很多教程的。但是这些教程大部分都是用QRCode二维码生成库,将js文件设置成插件的形式。然后用画图组件Graphics把二维码画出来。

我这里也是用的同样的思路,但是没有用插件的形式。下面说说具体的方法:

新建工程

打开cocosCreator,创建一个新工程。在scene中添加一个精灵节点,将精灵设置为白色。再在精灵上添加一个Graphics节点。如下图参考图

注意:这里要设置要精灵和绘图节点的尺寸,最好是2的倍数,而且建议将Graphics的锚点设置为(0,0)

核心代码

   import { _decorator, Component, Node,Graphics, Color, UITransform } from 'cc';
import { QRCode } from './qr/QRCode';
const { ccclass, property } = _decorator;
let QRErrorCorrectLevel = {
    L: 1,
    M: 0,
    Q: 3,
    H: 2
};
@ccclass('qrCode')
export class qrCode extends Component {
    @property(Graphics)
    graphics:Graphics = null;
    start() {
        this.qrCode("https://lengmo714.top");
    }

    private qrCode(url) {
        let node = this.graphics;
        var qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
        qrcode.addData(url);
        qrcode.make();

        var ctx = node.getComponent(Graphics)!;
        ctx.fillColor = Color.BLACK;
        var tileW = node.getComponent(UITransform)!.width / qrcode.getModuleCount();
        var tileH = node.getComponent(UITransform)!.height / qrcode.getModuleCount();

        // draw in the Graphics
        for (var row = 0; row < qrcode.getModuleCount(); row++) {
            for (var col = 0; col < qrcode.getModuleCount(); col++) {
                if (qrcode.isDark(row, col)) {
                    var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
                    var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
                    ctx.rect(Math.round(col * tileW), Math.round(row * tileH), w, h);
                    ctx.fill();
                } else {
                    // ctx.fillColor = cc.Color.WHITE;
                }
                var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
            }
        }
    }
}

注意,这里还是要用到画二维码的插件库,只是我没有用这个插件库,qrcode.js代码转成了ts代码。

qrcode.js文件下载地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1695207.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

虚拟化技术[3]之网络虚拟化

网络虚拟化 网络虚拟化简介核心层网络虚拟化接入层网络虚拟化虚拟机网络虚拟化案例: VMware网络虚拟化技术虚拟网络接口卡虚拟交换机vSwitch分布式交换机端口组VLAN 网络虚拟化简介 传统的数据中心&#xff1a;服务器之间操作系统和上层软件异构、接口与数据格式不统一&#x…

微信小程序连接阿里云快速入门【物联网】

一、前言 1.1 项目背景 随着5G的逐渐普及&#xff0c;万物互联的浪潮已经席卷而来。在万物互联的场景下&#xff0c;如何实现设备之间的互联互通&#xff0c;成为了一个亟待解决的问题。 微信小程序作为一款轻量级的小程序开发框架&#xff0c;以其简洁的语法和丰富的组件库…

【制作100个unity游戏之26】unity2d横版卷轴动作类游13(附带项目源码)

最终效果 系列导航 文章目录 最终效果系列导航前言存储点灯光后处理存储位置信息存储更多数据存储场景信息持久化存储数据引入Unity 的可序列化字典类调用 游戏结束源码完结 前言 欢迎来到【制作100个Unity游戏】系列&#xff01;本系列将引导您一步步学习如何使用Unity开发各…

C++原创人工智能QPBS01G大功告成!!!

俗话说得好&#xff0c;你周五周六不写作业&#xff0c;要上学了才着急了 我之前的版本bug太多&#xff0c;结果这两天晚上改的我两眼发白&#xff0c;太烦人了 这次这娃学聪明了&#xff0c;遇到不会的问题上网搜&#xff0c;我还更新了反骂人骂人功能&#xff0c;第一次测试…

学习_C语言下使用ringbuffer实现任意数据类型的FIFO

思考及注意看&#xff1a;调试中的任意。 https://www.cnblogs.com/dreamboy2000/p/12982423.html

LeetCode392:判断子序列

题目描述 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符而不改变剩余字符相对位置形成的新字符串。&#xff08;例如&#xff0c;"ace"是"abcde"的一个子…

AIGC001-latent-diffusion(SD)第一次让文生图如此生动有趣!

AIGC001-latent-diffusion(SD)第一次让文生图如此生动有趣&#xff01; 文章目录 0 论文工作1 论文方法2 效果 0 论文工作 通过将图像形成过程分解为去噪自编码器的连续应用&#xff0c;扩散模型&#xff08;DMs&#xff09;实现了对图像数据等方面的最先进的综合结果。这些方…

STM32手写超频到128M函数

今天学习了野火的STM32教程学会了如何设置STM32的时钟频率&#xff0c;步骤比较详细&#xff0c;也很容易理解&#xff0c;就是视频教程不能跳着看&#xff0c;只能一节节的看&#xff0c;不然会知识不连贯&#xff0c;造成有些知识不理解&#xff0c;连续着看还是没有什么难度…

Spring的FactoryBean多例问题

关于spring bean&#xff0c;我们了解的最多的还是单例&#xff0c;而多例bean,除了平时我们自己new的那些多实例外&#xff08;但不属于IOC管理了&#xff09;&#xff0c;几乎很少能用到&#xff0c;而在spring 层面&#xff0c;FactoryBean刚好是多例的一个体现&#xff0c;…

Java中流的概念细分

按流的方向分类&#xff1a; 输入流&#xff1a;数据流向是数据源到程序&#xff08;以InputStream、Reader结尾的流&#xff09;。 输出流&#xff1a;数据流向是程序到目的地&#xff08;以OutputStream、Writer结尾的流&#xff09;。 按处理的数据单元分类&#xff1a; 字…

python-pytorch 下批量seq2seq+Bahdanau Attention实现问答1.0.000

python-pytorch 下批量seq2seq+Bahdanau Attention实现简单问答1.0.000 前言原理看图数据准备分词、index2word、word2index、vocab_size输入模型的数据构造注意力模型decoder的编写关于损失函数和优化器在预测时完整代码参考前言 前面实现了 luong的dot 、general、concat注意…

某神,云手机启动?

某神自从上线之后&#xff0c;热度不减&#xff0c;以其丰富的内容和独特的魅力吸引着众多玩家&#xff1b; 但是随着剧情无法跳过&#xff0c;长草期过长等原因&#xff0c;近年脱坑的玩家多之又多&#xff0c;之前米家推出了一款云某神的app&#xff0c;目标是为了减少用户手…

Android9.0 MTK平台如何增加一个系统应用

在安卓定制化开发过程中&#xff0c;难免遇到要把自己的app预置到系统中&#xff0c;作为系统应用使用&#xff0c;其实方法有很多&#xff0c;过程很简单&#xff0c;今天分享一下我是怎么做的&#xff0c;共总分两步&#xff1a; 第一步&#xff1a;要找到当前系统应用apk存…

PostgreSQL基本使用Schema

参考文章&#xff1a;PostgreSQL基本使用&#xff08;3&#xff09;Schema_pg数据库查询schema-CSDN博客 PostgreSQL 模式&#xff08;Schema&#xff09;可以理解为是一个表的集合&#xff08;或者所属者&#xff09;。 例如&#xff1a;在 MySQL 中&#xff0c;Scheam 是库&…

储能服务系统架构:实现能源可持续利用的科技之路

随着可再生能源的快速发展和能源系统的智能化需求增加&#xff0c;储能技术作为能源转型和可持续发展的关键支撑之一&#xff0c;备受各界关注。储能服务系统架构的设计和实现将对能源行业产生深远影响。本文将探讨储能服务系统架构的重要性和关键组成部分&#xff0c;旨在为相…

安卓开发--安卓使用Echatrs绘制折线图

安卓开发--安卓使用Echatrs绘制折线图 前期资料安卓使用Echarts绘制折线图1.1 下载 Echarts 安卓资源1.2 新建assets文件1.3 新建布局文件1.4 在布局文件中布局WebView1.5 在活动文件中调用 最终效果 前期资料 Echarts 官网样式预览: https://echarts.apache.org/examples/zh/…

使用Webcam实现摄像头的开启和关闭,并保存和复制图片

实现思路 0&#xff0c;将webcam的jar文件传入项目中 1&#xff0c;显示摄像头的地方&#xff1a;创建一个画板&#xff0c;在画板上添加开启和关闭按钮 2&#xff0c;设置开启和关闭功能&#xff1a;创建一个类实现动作监听器&#xff0c;进而实现监听动作按钮 3&#xff…

《我的阿勒泰》读后感

暂没时间写&#xff0c;记录在此&#xff0c;防止忘记&#xff0c;后面补上!!! 【经典语录】 01、如果天气好的话&#xff0c;阳光广阔地照耀着世界&#xff0c;暖洋洋又懒洋洋。这样的阳光下&#xff0c;似乎脚下的每一株草都和我一样&#xff0c;也把身子完全舒展开了。 02、…

Jmeter预习第1天

Jmeter参数化&#xff08;重点&#xff09; 本质&#xff1a;使用参数的方式来替代脚本中的固定为测试数据 实现方式&#xff1a; 定义变量&#xff08;最基础&#xff09; 文件定义的方式&#xff08;所有测试数据都是固定的情况下[死数据]&#xff0c;eg:注册登录&#xff0…

为了“降本增效”,我用AI 5天将SpringBoot迁移到了Nodejs

背景 大环境不好&#xff0c;各行各业都在流行“降本增效”&#xff0c;IT行业大肆执行“开猿节流”&#xff0c;一顿操作效果如何&#xff1f;普通搬砖人谁会在乎呢。 为了收紧我的口袋&#xff0c;决定从头学习NodejsTypeScript&#xff0c;来重写我的Java后端服务。 其实这…