在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博客

相关推荐
By北阳8 分钟前
Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.
前端·elasticsearch·less
西洼工作室19 分钟前
SSE与轮询技术实时对比演示
前端·javascript·css
卷Java22 分钟前
用户权限控制功能实现说明
java·服务器·开发语言·数据库·servlet·微信小程序·uni-app
从零开始学习人工智能27 分钟前
Spring Security 实战:彻底解决 CORS 跨域凭据问题与 WebSocket 连接失败
java·websocket·spring
winrisef38 分钟前
删除无限递归文件夹
java·ide·python·pycharm·系统安全
悦悦子a啊42 分钟前
Java面向对象练习:Person类继承与排序
java·开发语言·python
不会算法的小灰44 分钟前
Spring Boot 实现邮件发送功能:整合 JavaMailSender 与 FreeMarker 模板
java·spring boot·后端
come112342 小时前
深入理解 Java和Go语法和使用场景(指南十一)
java·开发语言·golang
IT_陈寒2 小时前
Vite 5.0 性能优化实战:3 个关键配置让你的构建速度提升50%
前端·人工智能·后端
excel2 小时前
Vue2 动态添加属性导致页面不更新的原因与解决方案
前端