当前位置: 首页 > news >正文

canvas绘制表格

canvas绘制表格

最近在为公司产品做技术预研,经理让用canvas做一个表格,于是就有了这篇博客。

我们的数据是后端通过MQTT推送过来的
我在代码中也直接使用了
具体MQTT的实现代码,可见博客
在vue使用MQTT

在这里为了方便实用我直接封装成组件了,当MQTT数据来了就出发绘制方法

<template>  <div>  <!-- 画布元素,用于绘图 -->  <canvas ref="canvasRef" height="180" width="600"></canvas>  </div>  
</template>  <script setup>  
import {defineExpose, onMounted, ref} from 'vue';  
import UseMqtt from "../hooks/useMqtt.js"; // 引入MQTT通信的自定义hook  // 画布引用  
const canvasRef = ref(null);  
// 画布上下文  
const ctx = ref(null);  
// 存储接收到的数据  
const data = ref([]);  
// 行高  
const rowHeight = 30;  
// 当前偏移量,用于控制画布滚动  
const currentOffset = ref(30);  // 数据格式示例  
/*[{  "hx": 56,  "szy": 77,  "xl": 74,  "ssy": 122,  "xybhd": 0.36  
}]*/  /**  * 绘制函数,用于在画布上绘制表格  */  
const drawTable = () => {  const canvas = canvasRef.value;  ctx.value = canvas.getContext('2d');  ctx.value.clearRect(0, 0, canvas.width, canvas.height); // 清除画布  ctx.value.fillStyle = 'black'; // 设置填充颜色  ctx.value.font = '16px Arial'; // 设置字体  // 绘制列标题  const headers = ["hx", "szy", "xl", "ssy", "xybhd"];  headers.forEach((header, index) => {  ctx.value.fillText(header, index * 120, rowHeight);  });  // 绘制数据行  data.value.forEach((item, rowIndex) => {  const y = (rowIndex + 1) * rowHeight + currentOffset.value;  if (y < canvas.height) {  Object.values(item).forEach((value, colIndex) => {  ctx.value.fillText(value, colIndex * 120, y);  });  }  });  
};  onMounted(() => {  drawTable(); // 组件挂载后绘制表格  
});  const options = {  subscription: {topic: "/testtopic/yq", qos: 0} // MQTT订阅配置  
}  
const {  createAndDo,  destroyConnection  
} = UseMqtt(options, getMessage); // 使用MQTT hook,并传入消息处理函数  /**  * 接收消息  * @param v 接收到的消息  */  
function getMessage(v) {  try {  data.value.push(JSON.parse(v)) // 解析并存储消息  if (data.value.length >= 5) {  data.value.shift() // 如果数据超过5条,移除最旧的一条  }  drawTable(); // 重新绘制表格  } catch (e) {  console.error(e) // 错误处理  }  
}  onMounted(() => {  createAndDo() // 组件挂载后建立MQTT连接并开始接收消息  
})  defineExpose({  destroyConnection, // 暴露销毁MQTT连接的方法  createAndDo // 暴露建立并开始MQTT连接的方法  
})  
</script>

效果图

相关文章:

canvas绘制表格

canvas绘制表格 最近在为公司产品做技术预研&#xff0c;经理让用canvas做一个表格&#xff0c;于是就有了这篇博客。 我们的数据是后端通过MQTT推送过来的 我在代码中也直接使用了 具体MQTT的实现代码&#xff0c;可见博客 在vue使用MQTT 在这里为了方便实用我直接封装成组件…...

避免溃坝的关键:渗压计在防洪管理中的作用

防洪管理对于保障人民生命财产安全具有重要意义&#xff0c;而溃坝作为防洪管理中的重大风险之一&#xff0c;其防范工作尤为关键。在防洪管理体系中&#xff0c;渗压计作为一种重要的监测工具&#xff0c;发挥着不可替代的作用。本文将深入探讨渗压计在防洪管理中的作用。 实时…...

品牌建设如何助力中小企业突破生存瓶颈?

品牌&#xff0c;不仅仅是一个标志或商标&#xff0c;更是企业的形象、声誉和信誉的体现。品牌的存在是为了使企业区别于其他竞争对手&#xff0c;树立独特的形象&#xff0c;赢得消费者的认可和信任。 品牌的本质是品牌拥有者的产品、服务或其它优于竞争对手的优势能为目标受…...

探索Python FastAPI的Annotated参数设计:提升代码的灵活性与可读性

在现代软件开发中&#xff0c;代码的可读性和灵活性是至关重要的。Python的FastAPI框架以其高性能和易用性而受到开发者的喜爱。FastAPI提供了一种名为Annotated的参数设计方式&#xff0c;它允许开发者以类型注解的形式增强函数参数的定义&#xff0c;从而提升代码的表达力和灵…...

ClickHouse 进阶【建表、查询优化】

1、ClickHouse 进阶 因为上一节部署了集群模式&#xff0c;所以需要启动 Zookeeper 和 ck 集群&#xff1b; 1.1、Explain 基本语法 EXPLAIN [AST | SYNTAX | PLAN | PIPELINE] [setting value, ...] SELECT ... [FORMAT ...] AST&#xff1a;用于查看语法树SYNTAX&#…...

Qt拖拽事件详解及代码实现

Qt拖拽事件详解及代码实现 前言项目描述代码结构简介代码详解 前言 qt拖拽事件是一项非常常用并且非常好用的功能&#xff0c;拖拽实际上是一种信息传递的载体&#xff0c;其目的是将信息从一个对象传递给另一个对象。通过拖拽可以简化文件打开或业务操作流程&#xff0c;qt初…...

云原生的候选应用

提示 该内容摘自电子书《为 Azure 构建云原生 .NET 应用程序》&#xff0c;可在**.NET Docs**上获取&#xff0c;也可以免费下载 PDF并离线阅读。 考虑一下您的组织需要构建哪些应用程序。然后&#xff0c;看看您投资组合中的现有应用程序。其中有多少需要云原生架构&#xff…...

什么是单例模式?

单例模式是一种常见的设计模式,它确保一个类只有一个实例,并提供一个全局访问点来获取这个唯一实例。这种模式通常在需要控制某些资源的访问权限或确保对象的唯一性时使用。 单例模式的特点 唯一实例:单例模式确保一个类只有一个实例存在,全局可访问。 延迟实例化:在需…...

F4Pan百度网盘不限速直链解析工具最新可用

最新可用百度网盘不限速直链解析工具&#xff0c;现在很多解析网站和浏览器扩展都失效了&#xff0c;这个是用《F4Pan网盘解析系统开源源码》搭建的&#xff0c;有兴趣可以去研究研究。 下面看一下测试速度超过70MB每秒比开通会员还快非常的恐怖。 使用方法 1.下载F4Pan解析工…...

设计模式实战:智能家居系统的设计与实现

问题描述 设计一个智能家居系统,支持设备的控制(如灯、空调等),提供多种操作策略,并且在设备状态发生变化时通知用户。系统需要确保设备操作的灵活性和可扩展性。 设计分析 命令模式 命令模式用于将请求封装成对象,从而使我们可以用不同的请求、队列或日志来参数化其…...

Unity Rigidbody 踩坑记录

1&#xff1a;两个带有刚体的物体碰撞会一直不停的弹 把被动受力的刚提的 Freeze Position 的勾选 去掉&#xff08;碰到过一次&#xff0c;有一种受力无法释放又返回给目标的 所以一直弹跳的感觉&#xff09; 2&#xff1a;子物体 和父物体 都有刚体的情况下 子物体 Freeze R…...

Guitar Pro简谱怎么输入 ?如何把简谱设置到六线谱的下面?

一、Guitar Pro简谱怎么输入 简谱在音乐学习、演奏、创作和传播中都起着非常重要的作用&#xff0c;是音乐领域不可或缺的工具。吉他乐谱的制作可以使简谱&#xff0c;也可以使五线谱、六线谱等多种形式&#xff0c;这几种乐谱都可以使用Guitar Pro来完成。下面来看看Guitar Pr…...

Python 爬虫项目实战(一):爬取某云热歌榜歌曲

前言 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;也称为网页蜘蛛&#xff08;Web Spider&#xff09;或网页机器人&#xff08;Web Bot&#xff09;&#xff0c;是一种按照既定规则自动浏览网络并提取信息的程序。爬虫的主要用途包括数据采集、网络索引、内容抓…...

Mongodb权限

MongoDB 的权限管理用于确保数据库的安全性并限制用户访问敏感数据。MongoDB 使用基于角色的访问控制&#xff08;RBAC&#xff09;来管理权限&#xff0c;允许管理员定义用户和角色&#xff0c;并为这些角色分配相应的权限。 Mongodb的内置角色 数据库角色 角色说明权限read…...

力扣第五十三题——最大子数组和

内容介绍 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&…...

达梦数据库:select报错:不是 GROUP BY 表达式

目录 SQL示例报错信息原因排查解决方法一&#xff1a;达梦支持灵活的处理方式&#xff0c;可以直接在查询中加hint参数方法二&#xff1a;修改dm.ini参数GROUP_OPT_FLAG1&#xff0c;动态&#xff0c;会话级参数&#xff0c;不用重启数据库方法三&#xff1a;配置兼容参数&…...

大模型卷向「下半场」,产业场景成拼杀重地

在19世纪的一个雨声潺潺的夏日&#xff0c;诗人拜伦与雪莱在瑞士的湖畔边闲聊&#xff0c;他们聊到了一个大胆的想法&#xff1a;如果能够把一个生物的各个部分制造出来&#xff0c;再组装到一起&#xff0c;赋予它生命的温暖&#xff0c;那会怎样&#xff1f; 这次对话激发了…...

OD C卷 - 多线段数据压缩

多段 线 数据压缩 &#xff08;200&#xff09; 如图中每个方格为一个像素&#xff08;i&#xff0c;j&#xff09;&#xff0c;线的走向只能水平、垂直、倾斜45度&#xff1b;图中线段表示为(2, 8)、&#xff08;3,7&#xff09;、&#xff08;3, 6&#xff09;、&#xff08…...

密码学基础:搞懂Hash函数SHA1、SHA-2、SHA3(2)

目录 1.引入 2. SHA512-224\256 3.SHA-3 4.MD5 5.SM3 1.引入 上篇密码学基础&#xff1a;搞懂Hash函数SHA1、SHA-2、SHA3(1)-CSDN博客&#xff0c;我们先就将基础的SHA1\2讲解了&#xff0c;接下来我们继续聊SHA-3、SHA2变体SHA512_224\256等 2. SHA512-224\256 SHA512…...

C++ 异步编程:std::async、std::future、std::packaged_task 和 std::promise

C 异步编程&#xff1a;std::async、std::future、std::packaged_task 和 std::promise 在现代 C 编程中&#xff0c;异步编程已经成为一种常见的模式。利用 C11 引入的标准库组件 std::async、std::future、std::packaged_task 和 std::promise&#xff0c;我们可以更方便地处…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

Python爬虫(一):爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

三分算法与DeepSeek辅助证明是单峰函数

前置 单峰函数有唯一的最大值&#xff0c;最大值左侧的数值严格单调递增&#xff0c;最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值&#xff0c;最小值左侧的数值严格单调递减&#xff0c;最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...

Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践

前言&#xff1a;本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中&#xff0c;跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南&#xff0c;你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案&#xff0c;并结合内网…...

FTXUI::Dom 模块

DOM 模块定义了分层的 FTXUI::Element 树&#xff0c;可用于构建复杂的终端界面&#xff0c;支持响应终端尺寸变化。 namespace ftxui {...// 定义文档 定义布局盒子 Element document vbox({// 设置文本 设置加粗 设置文本颜色text("The window") | bold | color(…...

Git 命令全流程总结

以下是从初始化到版本控制、查看记录、撤回操作的 Git 命令全流程总结&#xff0c;按操作场景分类整理&#xff1a; 一、初始化与基础操作 操作命令初始化仓库git init添加所有文件到暂存区git add .提交到本地仓库git commit -m "提交描述"首次提交需配置身份git c…...

Linux 内存管理调试分析:ftrace、perf、crash 的系统化使用

Linux 内存管理调试分析&#xff1a;ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础&#xff0c;但这一子系统结构复杂&#xff0c;常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题&#xff0c;需要一套工具化、…...

21-Oracle 23 ai-Automatic SQL Plan Management(SPM)

小伙伴们&#xff0c;有没有迁移数据库完毕后或是突然某一天在同一个实例上同样的SQL&#xff0c; 性能不一样了、业务反馈卡顿、业务超时等各种匪夷所思的现状。 于是SPM定位开始&#xff0c;OCM考试中SPM必考。 其他的AWR、ASH、SQLHC、SQLT、SQL profile等换作下一个话题…...

华为云Flexus+DeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手

华为云FlexusDeepSeek征文 | 基于Dify构建具备联网搜索能力的知识库问答助手 一、构建知识库问答助手引言二、构建知识库问答助手环境2.1 基于FlexusX实例的Dify平台2.2 基于MaaS的模型API商用服务 三、构建知识库问答助手实战3.1 配置Dify环境3.2 创建知识库问答助手3.3 使用知…...