当前位置: 首页 > 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;逐步求精…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

地震勘探——干扰波识别、井中地震时距曲线特点

目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波&#xff1a;可以用来解决所提出的地质任务的波&#xff1b;干扰波&#xff1a;所有妨碍辨认、追踪有效波的其他波。 地震勘探中&#xff0c;有效波和干扰波是相对的。例如&#xff0c;在反射波…...

智慧医疗能源事业线深度画像分析(上)

引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

Python爬虫实战:研究feedparser库相关技术

1. 引言 1.1 研究背景与意义 在当今信息爆炸的时代,互联网上存在着海量的信息资源。RSS(Really Simple Syndication)作为一种标准化的信息聚合技术,被广泛用于网站内容的发布和订阅。通过 RSS,用户可以方便地获取网站更新的内容,而无需频繁访问各个网站。 然而,互联网…...

将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?

Otsu 是一种自动阈值化方法&#xff0c;用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理&#xff0c;能够自动确定一个阈值&#xff0c;将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

【学习笔记】深入理解Java虚拟机学习笔记——第4章 虚拟机性能监控,故障处理工具

第2章 虚拟机性能监控&#xff0c;故障处理工具 4.1 概述 略 4.2 基础故障处理工具 4.2.1 jps:虚拟机进程状况工具 命令&#xff1a;jps [options] [hostid] 功能&#xff1a;本地虚拟机进程显示进程ID&#xff08;与ps相同&#xff09;&#xff0c;可同时显示主类&#x…...

Android 之 kotlin 语言学习笔记三(Kotlin-Java 互操作)

参考官方文档&#xff1a;https://developer.android.google.cn/kotlin/interop?hlzh-cn 一、Java&#xff08;供 Kotlin 使用&#xff09; 1、不得使用硬关键字 不要使用 Kotlin 的任何硬关键字作为方法的名称 或字段。允许使用 Kotlin 的软关键字、修饰符关键字和特殊标识…...

论文阅读笔记——Muffin: Testing Deep Learning Libraries via Neural Architecture Fuzzing

Muffin 论文 现有方法 CRADLE 和 LEMON&#xff0c;依赖模型推理阶段输出进行差分测试&#xff0c;但在训练阶段是不可行的&#xff0c;因为训练阶段直到最后才有固定输出&#xff0c;中间过程是不断变化的。API 库覆盖低&#xff0c;因为各个 API 都是在各种具体场景下使用。…...