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

相关推荐
帅帅哥的兜兜34 分钟前
react中hooks使用
前端·javascript·react.js
跟着珅聪学java1 小时前
spring boot +Elment UI 上传文件教程
java·spring boot·后端·ui·elementui·vue
吞掉星星的鲸鱼2 小时前
使用高德api实现天气查询
前端·javascript·css
我命由我123452 小时前
Spring Boot 自定义日志打印(日志级别、logback-spring.xml 文件、自定义日志打印解读)
java·开发语言·jvm·spring boot·spring·java-ee·logback
lilye662 小时前
程序化广告行业(55/89):DMP与DSP对接及数据统计原理剖析
java·服务器·前端
zhougl9963 小时前
html处理Base文件流
linux·前端·html
花花鱼4 小时前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_4 小时前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
战族狼魂5 小时前
CSGO 皮肤交易平台后端 (Spring Boot) 代码结构与示例
java·spring boot·后端
careybobo5 小时前
海康摄像头通过Web插件进行预览播放和控制
前端