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

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

需求:

如下图,要实现左图的样式,先实现框架,文字到时候 往里填就行了,原来的解决方案是想用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绘制复杂异形表格的实现方法

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

判别分析:原理推导、方法对比与Matlab实战

内容摘要 本文深入解析判别分析的三大核心方法——距离判别、Fisher判别与Bayes判别&#xff0c;结合协方差估计、投影优化及贝叶斯决策理论&#xff0c;系统阐述数学原理与实现细节。通过气象数据春早预测、产品厂家分类及城市竞争力评估三大实战案例&#xff0c;完整演示数据…...

PMP项目管理—整合管理篇—4.管理项目知识

文章目录 基本信息知识的分类显性知识隐性知识 如何分享知识&#xff1f;4W1HITTO输入工具与技术输出 经验教训登记册 基本信息 知识管理指管理显性知识和隐性知识&#xff0c;旨在重复使用现有知识并生成新知识。有助于达成这两个目的的关键活动是知识分享和知识集成&#xf…...

Makefile编写和相关语法规则

makefile基本概念 Makefile 本质上是一个文本文件&#xff0c;它包含了一系列规则和指令&#xff0c;用于告诉构建工具&#xff08;如 make&#xff09;如何编译和链接程序&#xff0c;以及如何处理项目中的各种文件。其核心思想是通过定义目标&#xff08;target&#xff09;…...

点云 PCL 滤波在自动驾驶的用途。

1.直通滤波 2.体素滤波...

NL2SQL的应用-长上下文模型在处理NL2SQL任务时,相较于传统模型,有哪些显著的优势

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下NL2SQL的应用-长上下文模型在处理NL2SQL任务时&#xff0c;相较于传统模型&#xff0c;有哪些显著的优势。NL2SQL&#xff08;自然语言转SQL&#xff09;技术旨在将用户自然语言提问自动转换为结构化查询语句&#…...

图像处理基础(8):图像的灰度直方图、直方图均衡化、直方图规定化(匹配)

本文主要介绍了灰度直方图相关的处理&#xff0c;包括以下几个方面的内容&#xff1a; • 利用OpenCV计算图像的灰度直方图&#xff0c;并绘制直方图曲线 • 直方图均衡化的原理及实现 • 直方图规定化&#xff08;匹配&#xff09;的原理及实现 图像的灰度直方图 一…...

探寻数组中两个不重复数字的奥秘:C 语言实战之旅

在编程的世界里&#xff0c;经常会遇到各种各样有趣的问题&#xff0c;今天我们就来探讨一个经典的题目&#xff1a;在一个整数数组中&#xff0c;除了两个数字只出现一次&#xff0c;其余数字都出现了两次&#xff0c;如何高效地找出这两个只出现一次的数字呢&#xff1f;我们…...

Mercury、LLaDA 扩散大语言模型

LLaDA 参考&#xff1a; https://github.com/ML-GSAI/LLaDA https://ml-gsai.github.io/LLaDA-demo/ 在线demo&#xff1a; https://huggingface.co/spaces/multimodalart/LLaDA Mercury 在线demo&#xff1a; https://chat.inceptionlabs.ai/ 速度很快生成...

【ESP32S3接入讯飞在线语音识别】

视频地址: 【ESP32S3接入讯飞在线语音识别】 1. 前言 使用Seeed XIAO ESP32S3 Sense开发板接入讯飞实现在线语音识别。自带麦克风模块用做语音输入,通过串口发送字符“1”来控制数据的采集和上传。 语音识别对比 平台api教程评分百度...

深入了解 SSH 及其相关协议

深入了解 SSH 及其相关协议 在网络通信的世界里&#xff0c;安全始终是至关重要的话题。SSH&#xff08;Secure Shell&#xff09;作为一种广泛应用的网络协议&#xff0c;为我们在不安全的网络环境中提供了安全的远程连接和数据传输方式。今天&#xff0c;就让我们一起来深入…...

微信小程序源码逆向 MacOS

前言 日常工作中经常会遇到对小程序的渗透测试&#xff0c;微信小程序的源码是保存在用户客户端本地&#xff0c;在渗透的过程中我们需要提取小程序的源码进行问题分析&#xff0c;本篇介绍如何在苹果电脑 MacOS 系统上提取微信小程序的源码。 0x01 微信小程序提取 在苹果电…...

【我的 PWN 学习手札】House of Husk

House of Husk House of Husk是利用格式化输出函数如printf、vprintf在打印输出时&#xff0c;会解析格式化字符如%x、%lld从而调用不同的格式化打印方法&#xff08;函数&#xff09;。同时C语言还提供了注册自定义格式化字符的方法。注册自定义格式化字符串输出方法&#xf…...

(八)趣学设计模式 之 装饰器模式!

目录 一、 啥是装饰器模式&#xff1f;二、 为什么要用装饰器模式&#xff1f;三、 装饰器模式的实现方式四、 装饰器模式的优缺点五、 装饰器模式的应用场景六、 装饰器模式 vs 代理模式七、 总结 &#x1f31f;我的其他文章也讲解的比较有趣&#x1f601;&#xff0c;如果喜欢…...

设计后端返回给前端的返回体

目录 1、为什么要设计返回体&#xff1f; 2、返回体包含哪些内容&#xff08;如何设计&#xff09;&#xff1f; 举例 3、总结 1、为什么要设计返回体&#xff1f; 在设计后端返回给前端的返回体时&#xff0c;通常需要遵循一定的规范&#xff0c;以确保前后端交互的清晰性…...

Element Plus中el-select选择器的下拉选项列表的样式设置

el-select选择器&#xff0c;默认样式效果&#xff1a; 通过 * { margin: 0; padding: 0; } 去掉内外边距后的样式效果&#xff08;样式变丑了&#xff09;&#xff1a; 通过 popper-class 自定义类名修改下拉选项列表样式 el-select 标签设置 popper-class"custom-se…...

C高级(shell)

作业 1、使用case...in实现等级判断 2、计算各个位数和 3、计算家目录下目录个数和普通文件数 4、打印图形 5、冒泡排序...

子宫腺肌症是如果引起的?

子宫腺肌症是一种常见的妇科疾病&#xff0c;它是指子宫内膜的腺体和间质侵入子宫肌层形成的一种病症。那么&#xff0c;子宫腺肌症是如何引起的呢&#xff1f; 一、病因分析 子宫腺肌症的确切病因目前尚不十分清楚&#xff0c;但经过医学研究和临床观察&#xff0c;认为其发…...

网络安全学习中,web渗透的测试流程是怎样的?

渗透测试是什么&#xff1f;网络安全学习中&#xff0c;web渗透的测试流程是怎样的&#xff1f; 渗透测试就是利用我们所掌握的渗透知识&#xff0c;对网站进行一步一步的渗透&#xff0c;发现其中存在的漏洞和隐藏的风险&#xff0c;然后撰写一篇测试报告&#xff0c;提供给我…...

【软考】【2025年系统分析师拿证之路】【啃书】第十四章 软件实现与测试(十五)

目录 程序设计方法代码重用软件测试软件测试的对象和目的软件测试方法按照被测程序是否可见分类按照是否需要执行被测试程序分类自动测试 测试类型按测试对象划分按测试阶段划分按被测试软件划分其他分类 程序设计方法 结构化程序设计&#xff1a;自顶向下&#xff0c;逐步求精…...

Spring Boot 实现流式响应(兼容 2.7.x)

在实际开发中&#xff0c;我们可能会遇到一些流式数据处理的场景&#xff0c;比如接收来自上游接口的 Server-Sent Events&#xff08;SSE&#xff09; 或 流式 JSON 内容&#xff0c;并将其原样中转给前端页面或客户端。这种情况下&#xff0c;传统的 RestTemplate 缓存机制会…...

基于ASP.NET+ SQL Server实现(Web)医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试

作者&#xff1a;Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位&#xff1a;中南大学地球科学与信息物理学院论文标题&#xff1a;BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接&#xff1a;https://arxiv.…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

【SQL学习笔记1】增删改查+多表连接全解析(内附SQL免费在线练习工具)

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

【论文笔记】若干矿井粉尘检测算法概述

总的来说&#xff0c;传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度&#xff0c;通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

GruntJS-前端自动化任务运行器从入门到实战

Grunt 完全指南&#xff1a;从入门到实战 一、Grunt 是什么&#xff1f; Grunt是一个基于 Node.js 的前端自动化任务运行器&#xff0c;主要用于自动化执行项目开发中重复性高的任务&#xff0c;例如文件压缩、代码编译、语法检查、单元测试、文件合并等。通过配置简洁的任务…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...