982260355
982260355
  • 发布:2022-04-29 11:07
  • 更新:2024-04-08 11:37
  • 阅读:717

【报Bug】vue3 APP版本,在uni-popup组件中,第二次弹出时,canvas不生效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.4.7

手机系统: Android

手机系统版本号: Android 11

手机厂商: 小米

手机机型: 多个

页面类型: vue

vue版本: vue3

打包方式: 云端

项目创建方式: HBuilderX

操作步骤:

如上

预期结果:

如上

实际结果:

如上

bug描述:

2022-04-29 11:07 负责人:DCloud_UNI_GSQ 分享
已邀请:
982260355

982260355 (作者)

@DCloud_UNI_GSQ 好些天了,又看到吗?

  • 迷你猩

    亲,你的这个问题解决了吗?今天我也发现了这个问题,h5上测试没问题,app上有问题

    2023-10-13 15:28

982260355

982260355 (作者)

<template>
<view class="">
<button @click="open">打开弹窗</button>
<uni-popup ref="popup" type="bottom">
<canvas style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
</uni-popup>
</view>
</template>

<script>
export default {
data() {
return {
}
},
onLoad() {

    },  
    methods: {  
        open() {  
            this.$refs.popup.open()  
            setTimeout(() => {  
                this.draw()  
            }, 500)  
        },  
        draw() {  
            var context = uni.createCanvasContext('firstCanvas')  

            context.setStrokeStyle("#00ff00")  
            context.setLineWidth(5)  
            context.rect(0, 0, 200, 200)  
            context.stroke()  
            context.setStrokeStyle("#ff0000")  
            context.setLineWidth(2)  
            context.moveTo(160, 100)  
            context.arc(100, 100, 60, 0, 2 * Math.PI, true)  
            context.moveTo(140, 100)  
            context.arc(100, 100, 40, 0, Math.PI, false)  
            context.moveTo(85, 80)  
            context.arc(80, 80, 5, 0, 2 * Math.PI, true)  
            context.moveTo(125, 80)  
            context.arc(120, 80, 5, 0, 2 * Math.PI, true)  
            context.stroke()  
            context.draw()  
        }  
    }  
}  

</script>

982260355

982260355 (作者)

@DCloud_UNI_GSQ 周末没看到吗?

BoredApe

BoredApe - 有问题就会有答案。

请上传一个能重现问题的测试工程

  • 982260355 (作者)

    已经上传,但是其实就是直接复制的你们github上面提供的代码

    2022-05-17 12:17

982260355

982260355 (作者)

@五块钱的果汁 已经上传工程

982260355

982260355 (作者)

@DCloud_UNI_WYQ @DCloud_UNI_TJX @DCloud_UNI_LXH @DCloud_UNI_JSON @DCloud_UNI_HT @DCloud_UNI_HDX @DCloud_UNI_GSQ @DCloud_UNI_FXY @DCloud_UNI_CHB @DCloud_UNI_Anne 。有一说一,响应BUG的效率有点低啊。

982260355

982260355 (作者)

最近官方在忙什么吗?

陌上华年

陌上华年

测了一下,确实会存在。
临时解决方案:在打开和关闭的时候给canvas加vif控制一下

<canvas v-if="show" style="width: 300px; height: 200px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>
  • Robby

    这个临时方案亲测有效,看结果应该是关闭popup的时候canvas不可见了,再打开时并没有恢复canvas的可见状态

    2024-03-01 17:20

w***@microdreams.com

w***@microdreams.com

我也遇到了,目前的解决方案是每次打开弹窗,可以给canvas的id和canvas-id设置成随机字符串,不要使用固定值
template中的canvas组件和以下两个地方使用定义的随机id
uni.createCanvasContext('随机字符id',instance);

uni.canvasToTempFilePath({
canvasId: '随机字符id'
}

1***@qq.com

1***@qq.com

为什么会出现小程序不能显示,而在app端显示又是正常的情况

要回复问题请先登录注册