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

uniapp中使用leaferui使用Canvas绘制复杂异形表格的实现方法

news 来源：原创 2025/9/11 1:18:27

需求：

如下图，要实现左图的样式，先实现框架，文字到时候往里填就行了，原来的解决方案是想用css,html来实现，发现实现起来蛮麻烦的。我也没找到合适的实现方法，最后换使用canvas来实现，使用的js库是leaferui

1.安装:用game是因为有一些交互，反正体积也不大

npm install leafer-game

2.wxml

    <canvas:style="'width:'+cabox.width+'px;height:'+cabox.height+'px;'"id="leafer"type="2d":width="cabox.width":height="cabox.height"catchtouchstart="receiveEvent"catchtouchmove="receiveEvent"catchtouchend="receiveEvent"catchtouchcancel="receiveEvent"></canvas>

3.javascript

  lf = new Leafer({view: window, width: that.cabox.width, height: that.cabox.height})lf.add(Rect.one(0,0,that.cabox.width,that.cabox.height));lf.add(Rect.one({width: that.cabox.width, height: that.cabox.height, strokeWidth: 2, stroke: "black",}));lf.add(Rect.one({strokeWidth: 2,stroke: "black",width: (that.cabox.perBox * 11.5),height: (that.cabox.perBox * 11.5),x: that.cabox.perBox * 1.75,y: that.cabox.perBox * 1.75}));lf.add(Rect.one({strokeWidth: 2,stroke: "black",width: (that.cabox.perBox * 9),height: (that.cabox.perBox * 9),x: that.cabox.perBox * 3,y: that.cabox.perBox * 3}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [0, 0, that.cabox.perBox * 3, that.cabox.perBox * 3]}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [that.cabox.width, 0, that.cabox.perBox * 12, that.cabox.perBox * 3]}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [that.cabox.width, that.cabox.height, that.cabox.perBox * 12, that.cabox.perBox * 12]}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [0, that.cabox.height, that.cabox.perBox * 3, that.cabox.perBox * 12]}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [that.cabox.perBox*6, 0, that.cabox.perBox*6, that.cabox.height]}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [that.cabox.perBox*9, 0, that.cabox.perBox*9, that.cabox.height]}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [0, that.cabox.perBox*6, that.cabox.width, that.cabox.perBox*6]}));lf.add(Line.one({stroke: "black",strokeWidth: 2,points: [0, that.cabox.perBox*9, that.cabox.width, that.cabox.perBox*9]}));

uniapp中使用leaferui使用Canvas绘制复杂异形表格的实现方法

需求： 如下图，要实现左图的样式，先实现框架，文字到时候往里填就行了，原来的解决方案是想用css,html来实现，发现实现起来蛮麻烦的。我也没找到合适的实现方法，最后换使用canvas来实现&#xff…...

编程日记 2025/9/11 1:18:27

Java 反射（Reflection）的原理和应用

反射（Reflection）是 Java 语言的一项强大功能，它允许程序在运行时动态地获取类的信息，并且可以操作这些信息，如创建对象、调用方法、访问字段等。反射机制的核心在于 Java 的类加载机制和动态类型检查，使…...

编程日记 2025/9/6 18:58:13

Linux top 常用参数记录

top命令经常用来监控linux的系统状况，能实时显示系统中各个进程、线程的资源占用情况，是常用的性能分析工具。一些常用参数记录 top的使用方式 top [-d number] | top [-bnp] # 5s 更新一次 top -d 5# 进行2次top命令的输出结果 top -n 2# 查看进程的…...

编程日记 2025/9/7 3:35:37

hive之LEAD 函数详解

1. 函数概述 LEAD 是 Hive 中的窗口函数，用于获取当前行之后指定偏移量处的行的值。常用于分析时间序列数据、计算相邻记录的差异或预测趋势。 2. 语法 LEAD(column, offset, default) OVER ([PARTITION BY partition_column] [ORDER BY order_column [ASC|DESC]…...

编程日记 2025/9/9 3:30:10

Element Plus中el-tree点击的节点字体变色加粗

el-tree标签设置 <el-tree class"tree":data"treeData":default-expand-all"true":highlight-current"true"node-click"onTreeNodeClick"><!-- 动…...

编程日记 2025/9/4 20:26:42

.gitignore 设置后不见效的解决方法中，方案一就可以了

遇到的问题：你的 .gitignore 文件中包含了 unpackage/ 目录，但它不起作用的原因可能有以下几个： 1. 文件或目录已经被 Git 跟踪 .gitignore 只能忽略未被 Git 追踪的文件或目录。如果 unpackage/ 目录已经被提交到 Git 版本库中&#xff…...

编程日记 2025/9/6 20:43:37

git提交管理 scoop install nodejs # windows npm install --save-dev commitlint/config-conventional commitlint/cli # non-windows npm install --save-dev commitlint/{cli,config-conventional} # windows将commitlint.config.js修改为utf8编码, 默认utf16编码 echo &qu…...

编程日记 2025/9/7 0:54:22

DeepSeek八大组合软件，效率加倍

DeepSeek王炸组合：开启2025年高效工作与创意新时代在科技飞速发展的2025年，人工智能和各类工具的融合正不断重塑我们的工作与生活方式。DeepSeek作为一款强大的工具，与众多应用组成的王炸组合，展现出了令人瞩目的能力。今天&…...

编程日记 2025/9/8 4:31:50

TCP和UDP比较

以下是 TCP（传输控制协议） 和 UDP（用户数据报协议） 的详细对比，涵盖核心特性、应用场景及技术差异： 1. 核心特性对比特性TCPUDP连接方式面向连接（需三次握手建立连接）无连接&#…...

编程日记 2025/9/4 16:01:17

【实战篇】【深度解析DeepSeek：从机器学习到深度学习的全场景落地指南】

一、机器学习模型：DeepSeek的降维打击 1.1 监督学习与无监督学习的"左右互搏" 监督学习就像学霸刷题——给标注数据（参考答案）训练模型。DeepSeek在信贷风控场景中，用逻辑回归模型分析百万级用户数据，通过特征工程挖掘出"凌晨3点频繁申请贷款"这类魔…...

编程日记 2025/9/8 4:37:43

Postgresql高可用之Pacemaker+Corosync

简介 Pacemaker 是 ClusterLabs 开源高可用性集群堆栈的资源管理器。它协调配置、启动、监控和跨所有集群节点恢复相互关联的服务。在这套高可用架构用会用到Pacemaker、Corosync以下是对其功能作用的说明。 Corosync ：主要负责集群通信和成员管理，它用…...

编程日记 2025/9/9 0:31:41

智能成绩表

智能成绩表真题目录: 点击去查看 E 卷 100分题型题目描述小明来到学校当老师，需要将学生按考试总分或单科分数进行排名，你能帮帮他吗？输入描述第 1 行输入两个整数，学生人数 n 和科目数量 m。 0 < n < 1000 < m < 10第 2 行输入 m 个科目名称，彼此之…...

编程日记 2025/9/10 21:57:52

制作安装win10系统U盘详细步骤

https://www.microsoft.com/zh-cn/software-download/windows10 ①微软官方链接，下载工具 ②下载之后，点击鼠标右键用管理员身份运行 ③等待几分钟 ④出现许可条款点击接受 ⑤点击为另一台电脑安装介质，然后下一步 ⑥根据需要选择版本。体系…...

编程日记 2025/9/8 13:59:03

【RAG】Embeding 和 Rerank学习笔记

Q: 现在主流Embeding模型架构在RAG（Retrieval-Augmented Generation）系统中，嵌入模型（Embedding Model） 是检索阶段的核心组件，负责将查询（Query）和文档（Document&#…...

编程日记 2025/9/8 0:11:26

华为 Open Gauss 数据库在 Spring Boot 中使用 Flyway

db-migration：Flyway、Liquibase 扩展支持达梦（DM）、南大通用（GBase 8s）、OpenGauss 等国产数据库。部分数据库直接支持 Flowable 工作流。开源代码仓库 Github：https://github.com/mengweijin/db-migrat…...

编程日记 2025/9/7 14:46:31

B/B+树与mysql索引

数据结构操作网站：https://www.cs.usfca.edu/~galles/visualization/Algorithms.html B树算法平均最差空间O(n)O(n)搜索O(log n)O(log n)插入O(log n)O(log n)删除O(log n)O(log n) B树算法平均最差空间O(n)O(n)搜索O(log n)O(log n)插入O(log n)O(log n)删除O(…...

编程日记 2025/9/8 18:46:45

心智模式与企业瓶颈突破

“是环境限制了你，还是你的心智模式？” 当企业发展遇到瓶颈，我们习惯于找外部原因：经济不好、竞争加剧、资源不够、市场环境变化快可现实是，在同样的市场环境下，总有企业逆势增长，而有些企业只…...

编程日记 2025/9/7 20:50:01

介绍微信小程序中页面的生命周期函数和组件的生命周期函数

1.1 页面生命周期函数这些函数主要用于管理页面的显示和隐藏。 onLoad(options): 页面加载时触发，options 是页面路由参数，可以在这里初始化数据。每当用户进入该页面时都会调用这个函数。 onShow(): 页面显示时触发。每当页面从后台切换到前台时都会…...

编程日记 2025/9/10 14:23:39

网络运维学习笔记（DeepSeek优化版）009网工初级（HCIA-Datacom与CCNA-EI）路由理论基础与静态路由

文章目录路由理论基础核心概念路由表六要素路由选路原则加表规则选路优先级协议与参数常见协议号路由协议优先级对比网络架构基础AS（autonomous system，自治系统）路由分类静态路由(static routing)实验拓扑思科配置示例华为配置示例典型…...

编程日记 2025/9/7 22:53:12

基于微信小程序的疫情互助平台(源码+lw+部署文档+讲解)，源码可白嫖!

摘要时代在飞速进步，每个行业都在努力发展现在先进技术，通过这些先进的技术来提高自己的水平和优势，从2019年底新型冠状肺炎疫情的爆发以来，使很多工作的管理工作难度再上一层楼。为了在疫情期间能更好的维护信息管理&#xff0…...

编程日记 2025/9/8 16:53:28

【SRC实战】小游戏漏洞强制挑战

小游戏业务分析: 1、挑战成功加分，失败减分，存在段位机制，段位影响榜单排名 2、随机推荐挑战对象，随着等级升高不再推荐低等级玩家 3、玩家等级需要培养，培养需要道具，道具需要看广告/完成任务/付费 4、…...

编程日记 2025/9/5 17:03:10

阿里云轻量级服务器通过宝塔安装PgVector要点

设置环境变量： export PG_HOME/www/server/pgsql export LD_LIBRARY_PATH$LD_LIBRARY_PATH:/www/server/pgsql/lib export PG_CONFIG/www/server/pgsql/bin/pg_config export PGDATA/www/server/pgsql/data PATH$PATH:$HOME/.local/bin:$HOME/bin:$PG_HOME/bin ali…...

编程日记 2025/9/5 3:05:35

安装 Windows Docker Desktop - WSL问题

一、关联文章： 1、Docker Desktop 安装使用教程 2、家庭版 Windows 安装 Docker 没有 Hyper-V 问题 3、打开 Windows Docker Desktop 出现 Docker Engine Stopped 问题二、问题解析打开 Docker Desktop 出现问题，如下： Docker Desktop - WSL update failed An error o…...

编程日记 2025/9/9 14:06:58

基于SpringBoot和PostGIS的省域“地理难抵点（最纵深处）”检索及可视化实践

目录前言 1、研究背景 2、研究意义一、研究目标 1、“地理难抵点”的概念二、“难抵点”空间检索实现 1、数据获取与处理 2、计算流程 3、难抵点计算 4、WebGIS可视化三、成果展示 1、华东地区 2、华南地区 3、华中地区 4、华北地区 5、西北地区 6、西南地…...

编程日记 2025/9/11 0:20:36

神经网络之RNN和LSTM（基于pytorch-api）

1.RNN 1.1简介 RNN用于处理序列数据。在传统的神经网络模型中，是从输入层到隐含层再到输出层，层与层之间是全连接的，每层之间的节点是无连接的。但是这种普通的神经网络对于很多问题却无能无力。例如，你要预测句子的下一个单词是…...

编程日记 2025/9/8 18:55:35

16.3 LangChain Runnable 协议精要：构建高效大模型应用的核心基石

LangChain Runnable 协议精要：构建高效大模型应用的核心基石关键词：LCEL Runnable 协议、LangChain 链式开发、自定义组件集成、流式处理优化、生产级应用设计 1. Runnable 协议设计哲学与核心接口 1.1 协议定义与类结构 #mermaid-svg-PlmvpSDrEUrUGv2p {font-family:&quo…...

编程日记 2025/9/5 17:22:01

[操作系统] 文件的软链接和硬链接

文章目录引言硬链接（Hard Link）什么是硬链接？硬链接的特性硬链接的用途软链接（Symbolic Link）什么是软链接？软链接的特性软链接的用途软硬链接对比文件的时间戳实际应用示例使用硬链接节省备份空间用软链…...

编程日记 2025/9/10 10:59:26

【Python · PyTorch】循环神经网络 RNN（基础应用）

【Python PyTorch】循环神经网络 RNN（简单应用） 1. 简介2. 模拟客流预测（数据集转化Tensor）3.1 数据集介绍3.2 训练过程 3. 模拟股票预测（DataLoader加载数据集）3.1 IBM 数据集3.1.2 数据集介绍3.1.3 训练…...

编程日记 2025/9/10 12:17:29

Spring Boot 项目开发流程全解析

目录引言一、开发环境准备二、创建项目三、项目结构四、开发业务逻辑 1.创建实体类： 2.创建数据访问层（DAO）： 3.创建服务层（Service）： 4.创建控制器层（Controller&…...

编程日记 2025/9/10 13:52:37

基于互联网协议的诊断通信（DoIP）

1、ISO 13400标准和其他汽车网络协议标准有何不同？ ISO 13400 标准即 DoIP 协议标准，与其他常见汽车网络协议标准（如 CAN、LIN、FlexRay 等）有以下不同： 通信基础与适用场景 ISO 13400：基于互联网协议&a…...

编程日记 2025/9/5 1:36:53

MacDroid for Mac v2.3 安卓手机文件传输助手支持M、Intel芯片 4.7K

MacDroid 是Mac毒搜集到的一款安卓手机文件传输助手，在Mac和Android设备之间传输文件。您只需要将安卓手机使用 USB 连接到 Mac 电脑上即可将安卓设备挂载为本地磁盘，就像编辑mac磁盘上的文件一样编辑安卓设备上的文件，MacDroid支持所有 Andr…...

编程日记 2025/8/19 8:21:30

Skywalking介绍，Skywalking 9.4 安装，SpringBoot集成Skywalking

一.Skywalking介绍 Apache SkyWalking是一个开源的分布式追踪与性能监视平台，特别适用于微服务架构、云原生环境以及基于容器（如Docker、Kubernetes）的应用部署。该项目由吴晟发起，并已加入Apache软件基金会的孵化器，…...

编程日记 2025/9/9 14:40:04

基于POI的Excel下拉框自动搜索，包括数据验证的单列删除

目录目标例子 1.搜索下拉框页 2.数据源页 3.效果代码以及注意事项 1.代码 2.注意事项 1.基于Excel的话，相当于加入了一个【数据验证】 2.代码中的一些方法说明目标期望在Excel利用代码创建具备自动搜索功能的下拉框例子 1.搜索下拉框页 2.数据源…...

编程日记 2025/8/31 0:59:18

std::allocator_traits 能做但 std::allocator 不能的事情

🌟 std::allocator_traits 能做但 std::allocator 不能的事情 1️⃣ 适配自定义分配器假设你要实现一个内存池 MyAllocator，而 STL 容器默认使用的是 std::allocator。如果你希望 STL 容器可以使用你的 MyAllocator，你不能直接用 std::a…...

编程日记 2025/9/10 20:02:15

深度解析Ant Design Pro 6开发实践

深度解析Ant Design Pro 6全栈开发实践：从架构设计到企业级应用落地一、Ant Design Pro 6核心特性与生态定位（技术架构分析） 作为Ant Design生态体系的旗舰级企业应用中台框架，Ant Design Pro 6基于以下技术栈实现突破性升级&am…...

编程日记 2025/9/7 6:38:19

flutter 局部刷新控件Selector源码实现原理

Flutter 中的 Selector 组件是 provider 包提供的一个优化工具，用于在状态管理中仅选择所需数据片段，避免不必要的 Widget 重建。其实现原理基于以下几个关键点： 1. 核心设计目标选择性重建：仅当特定数据变化时触发 Widget 重建&…...

编程日记 2025/9/10 7:31:35

Hadoop之01：HDFS分布式文件系统

HDFS分布式文件系统 1.目标理解分布式思想学会使用HDFS的常用命令掌握如何使用java api操作HDFS能独立描述HDFS三大组件namenode、secondarynamenode、datanode的作用理解并独立描述HDFS读写流程HDFS如何解决大量小文件存储问题 2. HDFS 2.1 HDFS是什么 HDFS是Hadoop中的一…...

编程日记 2025/9/6 13:49:14

vite+react+ts如何集成redux状态管理工具，实现持久化缓存

1.安装插件这里的redux-persist--进行数据的持久化缓存，确保页面刷新数据不会丢失 yarn add react-redux^9.2.0 redux-persist^6.0.0 reduxjs/toolkit^2.5.1 2.创建仓库文件夹在项目的src文件夹下创建名为store的文件夹，里面的具体文件如下 featur…...

编程日记 2025/9/8 6:53:54

文字的力量

不知道以前的时代的年轻人有没有这样的感受。现在我觉得自己是不是出现了认知偏差，发现在很多描写现在的二十几岁年轻人的成长经历的文字下面都会出现很多共鸣，包括我自己也有，就让我有一个错觉:是不是中国所有的和我同龄的年轻人都是这样过来…...

编程日记 2025/9/10 12:20:25

网络空间安全（4）web应用程序安全要点

前言 Web应用程序安全是确保Web应用程序、服务和服务器免受网络攻击和威胁的关键环节。一、编写安全的代码输入验证与过滤：确保所有的用户输入都被正确验证和过滤，以防止注入攻击等安全漏洞。开发者应对URL、查询关键字、HTTP头、POST数据等进行严格的…...

编程日记 2025/9/10 0:42:33

openwebUI访问vllm加载deepseek微调过的本地大模型

文章目录前言一、openwebui安装二、配置openwebui环境三、安装vllm四、启动vllm五、启动openwebui 前言首先安装vllm，然后加载本地模型，会起一个端口好。在安装openwebui,去访问这个端口号。下面具体步骤的演示。一、openwebui安装 rootautodl-co…...

编程日记 2025/9/6 14:46:32

安全测试之五：SQL Server注入漏洞几个实例

示例 1：在 GET 请求中测试 SQL 注入最简单且有时最有效的情况是针对登录页面进行测试。当登录页面请求用户输入用户名和密码时，攻击者可以尝试输入以下字符串 “ or 11”（不包含双引号）： https://vulnerable.web.ap…...

编程日记 2025/9/8 11:42:13

计算机毕业设计SpringBoot+Vue.js线上辅导班系统(源码+文档+PPT+讲解)

温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 温馨提示：文末有 CSDN 平台官方提供的学长联系方式的名片！ 作者简介：Java领…...

编程日记 2025/9/10 1:09:57

C#委托(delegate)的常用方式

C# 中委托的常用方式，包括委托的定义、实例化、不同的赋值方式以及匿名委托的使用。委托的定义 // 委托的核心是跟委托的函数结构一样 public delegate string SayHello(string c);public delegate string SayHello(string c);：定义了一个公共委托类型 …...

编程日记 2025/9/8 19:40:46

《白帽子讲 Web 安全》之移动 Web 安全

目录摘要一、WebView 简介二、WebView 对外暴露 WebView 对外暴露的接口风险三、通用型 XSS - Universal XSS 介绍四、WebView 跨域访问五、与本地代码交互 js 5.1接口暴露风险： 5.2漏洞利用： 5.3JavaScript 与 Native 代码通信六、Chr…...

编程日记 2025/9/8 1:43:08

【Tourism】Yongzhou

永州市（英文：Yongzhou city、Yungchow city）是湖南省辖地级市，简称“永”，别称“零陵”或“潇湘”。位于湖南南部，潇、湘二水汇合处，地势三面环山、地貌复杂多样。截至2022年10月，永…...

编程日记 2025/9/6 20:17:40

C语言--预处理详解

预处理详解 1. 预定义符号 C语言设置了一些预定义符号，可以直接使用，预定义符号也是在预处理期间处理的。 __FILE__ //进行编译的源文件__LINE__ //文件当前的行号__DATE__ //文件被编译的日期__TIME__ //文件被编译的时间__STDC__ //如果编译器遵循A…...

编程日记 2025/9/3 21:40:58

不要升级，Flutter Debug 在 iOS 18.4 beta 无法运行，提示 mprotect failed: Permission denied

近期如果有开发者的 iOS 真机升级到 18.4 beta，大概率会发现在 debug 运行时会有 Permission denied 的相关错误提示，其实从 log 可以很直观看出来，就是 Dart VM 在初始化时，对内核文件「解释运行（JIT）」时…...

编程日记 2025/9/2 9:40:33

Kubespray部署企业级高可用K8S指南

目录前言1 K8S集群节点准备1.1 主机列表1.2 kubespray节点python3及pip3准备1.2.1. 更新系统1.2.2. 安装依赖1.2.3. 下载Python 3.12源码1.2.4. 解压源码包1.2.5. 编译和安装Python1.2.6. 验证安装1.2.7. 设置Python 3.12为默认版本（可选）1.2.8. 安装pi…...

编程日记 2025/9/9 8:58:43

基于zookeeper搭建kafka集群

1、什么是kafka Kafka 是一款开源的分布式流处理平台，最初由 LinkedIn 开发，后由 Apache 基金会维护。它被设计用于高吞吐、可扩展的实时数据管道和流处理场景。Kafka 的核心功能包括发布和订阅消息流、持久化存储数据以及实时处理数据流。其架构基于生…...

编程日记 2025/9/6 10:04:25

相关文章：