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

相关推荐
好_快几秒前
Lodash源码阅读-uniqBy
前端·javascript·源码阅读
好_快4 分钟前
Lodash源码阅读-uniqWith
前端·javascript·源码阅读
恋猫de小郭1 小时前
Flutter Widget IDE 预览新进展,开始推进落地发布
android·前端·flutter
jingling5552 小时前
【Vue3 实战】插槽封装与懒加载
前端·javascript·vue.js
lybugproducer2 小时前
创建型设计模式之:简单工厂模式、工厂方法模式、抽象工厂模式、建造者模式和原型模式
java·设计模式·建造者模式·简单工厂模式·工厂方法模式·抽象工厂模式·面向对象
南客先生2 小时前
马架构的Netty、MQTT、CoAP面试之旅
java·mqtt·面试·netty·coap
Minyy112 小时前
SpringBoot程序的创建以及特点,配置文件,LogBack记录日志,配置过滤器、拦截器、全局异常
xml·java·spring boot·后端·spring·mybatis·logback
百锦再2 小时前
Java与Kotlin在Android开发中的全面对比分析
android·java·google·kotlin·app·效率·趋势
武昌库里写JAVA3 小时前
39.剖析无处不在的数据结构
java·vue.js·spring boot·课程设计·宠物管理
Nelson_hehe6 小时前
Java基础第四章、面向对象
java·语法基础·面向对象程序设计