z***@163.com
z***@163.com
  • 发布:2025-03-10 14:11
  • 更新:2025-03-10 14:11
  • 阅读:29

【报Bug】uni-app app端nvue页面中使用canvas, ctx.draw回调函数没有触发

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.7.1

HBuilderX类型: 正式

HBuilderX版本号: 4.45

手机系统: Android

手机系统版本号: Android 12

手机厂商: 荣耀

手机机型: Play7T

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

this.$nextTick(() => {
const ctx = uni.createCanvasContext("screenshotCanvas");
ctx.fillStyle = '#007aff';
// 绘制一个矩形,参数分别为:左上角x坐标, 左上角y坐标, 宽度, 高度
ctx.fillRect(0, 0, 200, 100);
ctx.save();
ctx.fillStyle = '#000000';
ctx.fillText('测试数据', 100, 50);
ctx.stroke();
console.log("ctx---", ctx);
// 在try中页不报错
try {
/**

  • 两种方式
  • ctx.draw 在页面中都没有效果
    */
    // 这里没有回调
    ctx.draw(true, () => {
    // 到这里的代码就没有触发了
    console.log("ctx---", ctx);
    setTimeout(() => {
    console.log("ctx===", ctx);
    }, 50)
    })

                /**  
  • 下面这段draw的回调函数是触发了,但是uni.canvasToTempFilePath又没有触发
  • 应该是上一步draw,没有绘制成功。
    */
    // ctx.draw(true, (() => {
    // console.log("res---", res);
    // setTimeout(() => {
    // uni.canvasToTempFilePath({
    // canvasId: "screenshotCanvas",
    // fileType: 'png',
    // success: (res) => {
    // console.log('成功:', res.tempFilePath);
    // },
    // fail: (err) => {
    // console.error('失败:', err); // 输出具体错误信息
    // },
    // complete: () => {
    // console.log('调用完成'); // 确认 API 是否被触发
    // }
    // })
    // }, 50)
    // })());
    }catch(eror){
    console.log("eror---", eror)
    }

          })

操作步骤:

直接调用上面的代码

预期结果:

希望可以正常在页面中有效果,并且回调函数可以执行

实际结果:

页面中没有显现效果, 回调函数也没有执行,

bug描述:

uni-app app端nvue页面中使用canvas, ctx.draw回调函数没有触发, 使用try也无法捕捉到错误。 页面上也不显示效果。 但在web端页面中是可以正常draw后的内容,并且回调函数也是可以正常执行的。

2025-03-10 14:11 负责人:无 分享
已邀请:

要回复问题请先登录注册