uni-app canvas文本自动换行

封装

	// 填充自动换行的文本function fillFeedText({ctx, text, x, y, maxWidth, lineHeight, color, size}) {// 文本配置ctx.setFontSize(size);ctx.setFillStyle(color);// 计算文本换行宽高,换行逻辑const words = text.split('');let line = '';const lines = [];for (let i = 0; i < words.length; i++) {const word = words[i];const testLine = line + word;const metrics = ctx.measureText(testLine);if (metrics.width > maxWidth && i > 0) {lines.push(line);line = word;} else {line = testLine;}};// 填充文本lines.push(line);lines.forEach((line, index) => {ctx.fillText(line, x, y + ((index++) * lineHeight), maxWidth);});}

使用

// 文本集合const text = ["时间:" + Tool.now(), state.address]; // 需要填充两个文本text.forEach((line, index) => {fillFeedText({ctx,text: line,x: padding,y: state.height * 0.91 + ((index++) * lineHeight),maxWidth: state.width - padding,lineHeight,color: '#FFFFFF',size: 10})});

在这里插入图片描述

效果

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1547023.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

en造数据结构与算法C# 二叉树的顺序存储和前中后序遍历

二叉树的序号和索引区别 二叉树的顺序存储代码 我用的是List表&#xff0c;只要是线性表就都能实现二叉树 public class Tree<T> : MonoBehaviour {private List<T> bitTree new List<T>();//添加顺序存储方法public void AddTree(T[] values){for(int i…

2024最新盘点:推荐几款主流的采购管理系统

大家都明白采购对制造型企业的重要性&#xff0c;但是在面对市场上琳琅满目的采购管理系统企业却不知道该如何选择&#xff0c;不要担心。 本篇文章将对市面上知名的采购管理系统进行综合测评&#xff0c;深入剖析这些平台的特点与优势。看完这篇内容&#xff0c;你将对不同采…

这本书简直就是自然语言处理学习者的福音!

自然语言处理被誉为“人工智能皇冠上的明珠”! 深度学习等技术的引入为自然语言处理技术带来了一场革命&#xff0c;近年来也出现了自然语言处理的新范式。 早期的静态词向量预训练模型&#xff0c;以及后来的动态词向量预训练模型&#xff0c;特别是2018 年以来&#xff0c;…

书生大模型实战营学习[9] OpenCompass 评测 InternLM-1.8B 实践

准备工作 打开开发机&#xff0c;选择cuda11.7环境&#xff0c;A100选择10%&#xff0c;点击创建&#xff0c;然后进入开发机即可&#xff0c;和之前的操作一样。接下来创建环境&#xff0c;下载必要的依赖包 conda create -n opencompass python3.10 conda install pytorch2…

盘点几款财务人必备的财务管理系统,建议收藏!

相信很多财务人在工作中会遇到各种各样的难题&#xff0c;数据杂乱、对账不清晰、财务流程复杂等&#xff0c;一个好用的财务管理系统绝对是雪中送炭。那么财务人知道有哪些财务管理系统吗&#xff1f; 财务管理系统从多方面为财务人的工作保驾护航&#xff0c;优化流程系统、…

数据结构:实现链式结构二叉树(Tree) 手把手带你入门数据结构~

文章目录 前言一、链式结构二叉树的概念1. 定义2. 节点结构3. 操作4. 优势与劣势 二、链式结构二叉树的实现1. 树结构的定义2. 树的遍历&#xff08;1&#xff09;前序遍历&#xff08;2&#xff09;中序遍历&#xff08;3&#xff09;后序遍历 3. 二叉树结点个数4. 二叉树叶子…

828华为云征文 | 基于华为云Flexus云服务器X搭建部署——AI知识库问答系统(使用1panel面板安装)

&#x1f680;对于企业来讲为什么需要华为云Flexus X来搭建自己的知识库问答系统&#xff1f;&#xff1f;&#xff1f; 【重塑知识边界&#xff0c;华为云Flexus云服务器X引领开源问答新纪元&#xff01;】 &#x1f31f; 解锁知识新动力&#xff0c;华为云Flexus云服务器X携…

力扣 简单 876.链表的中间结点

文章目录 题目介绍题解 题目介绍 题解 法一&#xff1a; class Solution {public ListNode middleNode(ListNode head) {ListNode cur head;int n 0;while (cur ! null) {n;cur cur.next;}ListNode curr head;for (int i 0; i < n / 2; i) {curr curr.next;}return …

C++ 红黑树封装map和set

目录 前言 1.红黑树的改造 1.1主题框架 1.2迭代器 operator &#xff08;&#xff09; begin&#xff08;&#xff09;和end&#xff08;&#xff09; 1.3红黑树相关接口的改造 Find函数的改造 Insert 函数的改造 2.红黑树改造的完整代码 3.Set的封装 4.Map的封装 前…

freeRDP OPenssl

libusb需要下载 我使用的是VS2019编译 所以需要include 与vs2019 在cmake里面修改路径 C:/Users/JPM/source/repos/freeRDP/FreeRDP-stable-2.0/libusb-1.0.24/include/libusb-1.0 C:/Users/JPM/source/repos/freeRDP/FreeRDP-stable-2.0/libusb-1.0.24/VS2019/MS64/static/l…

pycharm24.2运行框中无法输入中文但是可以粘贴中文、输入英文、数字

文章目录 一、问题描述二、解决办法解决办法1解决办法2解决办法3 一、问题描述 pycharm24.2版本中运行框中无法输入中文&#xff0c;敲击空格键发现中文并没有输入进去: 但是可以粘贴中文: 输入英文、数字没有问题。 二、解决办法 该问题为pycharm24.2版本问题。 解决办法…

AI无人直播新标杆,一站式直播解决方案:打造专属舞台!

AI无人直播新标杆&#xff0c;一站式直播解决方案&#xff1a;打造专属舞台&#xff01; 在数字化浪潮的汹涌澎湃中&#xff0c;AI技术正以前所未有的速度渗透至各行各业&#xff0c;其中&#xff0c;直播行业作为数字内容传播的重要阵地&#xff0c;正经历着一场由AI引领的深刻…

OpenHarmony(鸿蒙南向)——平台驱动指南【MIPI CSI】

往期知识点记录&#xff1a; 鸿蒙&#xff08;HarmonyOS&#xff09;应用层开发&#xff08;北向&#xff09;知识点汇总 鸿蒙&#xff08;OpenHarmony&#xff09;南向开发保姆级知识点汇总~ 持续更新中…… 概述 功能简介 CSI&#xff08;Camera Serial Interface&#xf…

数字人形象自定义制作:readyplayer

网址&#xff1a; https://readyplayer.me/ 支持上传照片和拍照&#xff0c;会自动识别变成卡通风格 其他选项是配置选项&#xff1a;穿着、样貌等 上面弄好后右上角点击next&#xff0c;创建的模型可以下载3d glb文件 glb文件在线打开&#xff1a; https://gltf-viewer.d…

SpinalHDL之语义(Semantic)(一)

本文作为SpinalHDL学习笔记第六十九篇,介绍SpinalHDL的赋值(Assignments)。 目录: 1.赋值(Assignments) 2.位宽检查(Width checking) 3.组合逻辑环路(Combinatorial loops) ⼀、赋值(Assignments) SpinalHDL中有多个赋值运算: //因为硬件的并发性, `a`的值⼀直是1 val a…

CrossOver24支持的游戏有那些

CrossOver刚刚更新了24版本&#xff0c;支持《地平线零之曙光》、《以撒的结合&#xff1a;重生》等游戏。一起来看看它有哪些更新吧&#xff01; 一、功能优化 - 更新 Wine 至最新的稳定版 Wine 9.0&#xff0c;引入了 7000多个更新和针对各种软件游戏的优化。 - 更新 Wine M…

Azure Kinect 人体跟踪关节

Azure Kinect 人体跟踪关节 azure kinect dk 提取人体骨骼 要在Azure Kinect DK上提取人体骨骼&#xff0c;你需要使用Azure Kinect SDK和OpenPose库。以下是一个简化的代码示例&#xff0c;展示如何集成这两个库来提取骨骼关键点&#xff1a; 首先&#xff0c;确保你已经安装…

【YashanDB知识库】decode函数中的子查询被不必要地多次执行

本文内容转自YashanDB官网&#xff0c;具体内容请见https://www.yashandb.com/newsinfo/7441387.html?templateId1718516 问题现象 客户向yashandb下发的SQL语句执行时间超过6分钟仍未出结果 问题的风险及影响 SQL语句性能慢&#xff0c;影响客户业务 问题影响的版本 所…

蜂窝物联网全网通sim卡切网技术方案软硬件实现教程(设备根据基站信号质量自动切网)

01 物联网系统中为什么要使用三合一卡 三合一卡为用户解决了单一运营商网络无法全覆盖的缺陷&#xff0c;避免再次采购的经济成本以及时间成本和因没有信号设备停止工作造成的损失&#xff0c;保证仅需一次采购并提高设备工作效率和入网活跃度。例如下面地区的设备&#xff0…

RPA自动化流程机器人有哪些优势?

在数字化快速推进的大背景下&#xff0c;人工智能正在以前所未有的速度改变着生活和生产方式&#xff0c;而RPA自动化流程机器人作为其中一种最重要的革命性的技术&#xff0c;已经成为企业数字化中不可或缺的重要力量&#xff0c;让员工加速从“重复性工作”中摆脱出来。 金智…