在uniapp中使用canvas封装组件遇到的坑,数据被后面设备覆盖,导致数据和前面的设备一样

在uniapp开发中使用canvas封装了一个叫cirlceTemp的组件(温度圆环图表)

封装的HTML代码

html 复制代码
<template>
  <view class="progress-box" :style="{ width: `${progressWidth}rpx`, height: `${progressHeight}rpx` }">
    <canvas class="progress-bg" canvas-id="cpbg"></canvas>
  </view>
</template>

组件的使用

html 复制代码
<circleTemp :temperature="probleTemp" :unit="unit" :deviceId="deviceId"/>

使用时,发现数据居然被后面设备的数据覆盖了,后面项的数据变化,前面的也跟着变化

问题

在uniapp中使用canvas封装组件遇到的坑,数据被后面设备覆盖,导致数据和前面的设备一样,而导致这个问题是因为ID的问题,canvas-id="cpbg",canvas-id="cpbg" 是静态的名称。多个 circleTemp 组件实例共享相同 canvas-id,导致可能的冲突。

解决方案 :可以将 canvas-id 动态化(必须唯一),例如将 deviceId 作为 canvas-id 的一部分:

html 复制代码
<template>
  <view class="progress-box" :style="{ width: `${progressWidth}rpx`, height: `${progressHeight}rpx` }">
    <canvas class="progress-bg" :canvas-id="`cpbg-${deviceId}`"></canvas>
  </view>
</template>

然后在 uni.createCanvasContext("cpbg", this) 中使用动态 ID:

javascript 复制代码
const ctx = uni.createCanvasContext(`cpbg-${this.deviceId}`, this)

uniapp 实现同时连接多蓝牙设备

uniapp 实现 ble蓝牙同时连接多台蓝牙设备,支持app、苹果(ios)和安卓手机,以及ios连接蓝牙后的一些坑-CSDN博客

相关推荐
带刺的坐椅5 分钟前
Solon MVC 的 @Mapping 用法说明
java·mvc·ioc·solon
飞滕人生TYF6 分钟前
java Arrays 详解
java·python·排序算法
xisai8810 分钟前
2025年开考科目有哪些?
java·开发语言·javascript·算法·kotlin
想花12 分钟前
源码分析Spring Boot (v3.3.0)
java·spring boot·后端
陶然同学21 分钟前
RabbitMQ轻松构建高效可靠的消息队列系统
java·网络·分布式·rabbitmq·mq
DN金猿39 分钟前
vue项目PC端和移动端实现在线预览pptx文件
前端·javascript·vue.js·ppt
hahaqi95271 小时前
layui 表格点击编辑感觉很好用,实现方法如下
前端·javascript·layui
我爱学习_zwj1 小时前
ArkTS的进阶语法-4(函数补充,正则表达式)
前端·华为·正则表达式·harmonyos
李小白661 小时前
二叉树的练习题(中)
java·数据结构·算法
骑鱼过海的猫1232 小时前
【redis】redis
java·数据库·redis