uni-app canvas文本自动换行

news2024/9/30 10:44:01

封装

支持单行文本超出换行。多行文本顺位排版

	// 填充自动换行的文本
	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);
		let nextStart = 0;
		lines.forEach((line, index) => {
			ctx.fillText(line, x, y + ((index++) * lineHeight), maxWidth);
			nextStart = y + ((index++) * lineHeight)
		});
	}

使用

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

在这里插入图片描述

效果

在这里插入图片描述

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

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

相关文章

JavaScript中的函数定义

第8章 函数 在JS中函数即对象&#xff0c;程序可以随意操控他们。可以把函数赋值给变量&#xff0c;或者作为参数传递给其他函数。因为函数就是对象&#xff0c;所以可以给他们设置属性&#xff0c;甚至调用他们的方法。 JavaScript的函数可以嵌套在其他函数中定义&#xff0…

初识C语言(四)

目录 前言 十一、常见关键字&#xff08;补充&#xff09; &#xff08;1&#xff09;register —寄存器 &#xff08;2&#xff09;typedef类型重命名 &#xff08;3&#xff09;static静态的 1、修饰局部变量 2、修饰全局变量 3、修饰函数 十二、#define定义常量和宏…

5250 Fantasy RPG Icons Pack 幻想RPG游戏图标合集

这里是集合 - 幻想RPG图标 它包括50个主题图标。文件:PNG。 在档案中,带有背景的图标(512512)和没有背景的单个对象(大小取决于主题)。仅具有背景技能的技能。 2024年2月更新(+500个图标): RPG蔬菜图标; RPG游戏中的蜘蛛战利品图标; RPG海战战利品图标; RPG怪物战利…

匿名管道 Linux

管道 首先自己要用用户层缓冲区&#xff0c;还得把用户层缓冲区拷贝到管道里&#xff0c;&#xff08;从键盘里输入数据到用户层缓冲区里面&#xff09;&#xff0c;然后用户层缓冲区通过系统调用&#xff08;write&#xff09;写到管道里&#xff0c;然后再通过read系统调用&…

新手上路:Anaconda虚拟环境创建和配置以使用PyTorch和DGL

文章目录 前言步骤 1: 安装 Anaconda步骤 2: 创建新的 Anaconda 环境步骤 3: 安装最新版本的 PyTorch步骤 4: 安装特定版本的 PyTorch步骤 5: 安装最新版本的 DGL步骤 6: 安装特定版本的 DGL步骤 7: Pycharm中使用虚拟环境解释器第一种情况&#xff1a;创建新项目第二种情况&am…

Linux Shell编程最重要的十个核心概念

对于每个Linux学习者而言&#xff0c;Shell编程的重要性不言而喻。它是连接用户与系统操作的桥梁&#xff0c;能够培养命令行的熟练度和解决问题的能力。通过Shell编程&#xff0c;学习者可以深入理解系统管理和日常任务自动化的精髓&#xff0c;提高工作效率。此外&#xff0c…

应急响应(1)-同事电脑

一、现象 重要时间节点&#xff0c;同事反馈桌面有鼠标移动、随机断网&#xff1b;发现登录账户多了一个&#xff0c;由于电脑长时间没有更改过密码&#xff0c;导致忘记密码无法登录。随机联系进行应急处理。 二、排查 2.1、密码重置/删除 由于同事忘记密码导致无法进行登录…

Linux文件系统入门详解-总结大章

我们先看一张图&#xff1a; 这张图大体上描述了 Linux 系统上&#xff0c;应用程序对磁盘上的文件进行读写时&#xff0c;从上到下经历了哪些事情。 这篇文章就以这张图为基础&#xff0c;介绍 Linux 在 I/O 上做了哪些事情。 文件系统 什么是文件系统 文件系统&#xff0…

EKF学习笔记

扩展卡尔曼滤波&#xff0c;也就是EKF&#xff0c;常用于在动态系统中对状态的估计。比如&#xff0c;在机器人领域&#xff0c;EKF则常常用于对状态&#xff08;位置&#xff0c;方向&#xff09;的估计&#xff0c;也就是我们常说的数据融合&#xff0c;结合运动模型和观测数…

vscode使用yarn 启动vue项目记录

第一次启动yarn项目&#xff0c;这个是公司的老项目&#xff0c;遇到了点问题&#xff0c;记录下首先是我一般使用的是npm命令&#xff0c;所以没有安装yarn vscode安装yarn vscode进入到该项目文件夹下&#xff0c;输入命令&#xff1a;npm install -g yarn 安装成功后&…

河南人社厅:注册满两年可按条件认定副高

河南省工程系列建筑专业中高级职称 申报评审标准 总则 一、为培养造就高素质、社会化的工程建设领域专业技术人才队伍&#xff0c;充分发挥工程建设领域专业技术人才在科技发展和经济建设中的作用&#xff0c;推动技术创新、科技成果转化和实现高新技术产业化&#xff0c;根据…

CSS给一行按钮统一设置间隔

使用css的&#xff0b;&#xff08;相邻兄弟选择器&#xff09;&#xff0c;找到指定元素后面的相邻元素。 <div class"btn-list"><button class"btn">按钮1</button><button class"btn">按钮2</button><butto…

Arthas memory(查看 JVM 内存信息)

文章目录 二、命令列表2.1 jvm相关命令2.1.11 memory&#xff08;查看 JVM 内存信息&#xff09;举例1&#xff1a;查看 JVM 内存信息 本人其他相关文章链接 二、命令列表 2.1 jvm相关命令 2.1.11 memory&#xff08;查看 JVM 内存信息&#xff09; 基本用法&#xff1a; mem…

第一讲-环境安装

PyCharm安装 官网下载 https://www.jetbrains.com/pycharm/ 点击Download跳转到下载界面,会有专业版跟社区版两个选择,专业版需要购买,可自行在淘宝上买个激活码。一般开发社区版够用了。 这是专业版: 这是社区版:

WinRAR技巧:如何给多个压缩包设置同一个密码

RAR压缩包是大家经常使用的文件&#xff0c;并且可以进行加密&#xff0c;也是一种文件加密方式&#xff0c;那么当你有很多文件都需要压缩加密&#xff0c;b并且想要设置同一个密码&#xff0c;防止以后忘记密码&#xff0c;该如何高效的完成这个工作呢&#xff1f;今天分享如…

vue2中使用tailwindCss 详细教程

1、先看官方文档&#xff1a;https://www.tailwindcss.cn/ 2、先安装&#xff1a;npm install -D tailwindcss ---------------通过 npm 安装 tailwindcss&#xff0c;然后创建你自己的 create your tailwind.config.js 配置文件。 npm install -D tailwindcss 3、初始化文件…

解决Java调用通义接口出现依赖爆红与API-key找不到(日常小记)

1.依赖dashscope-sdk-java爆红 解决方法&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>dashscope-sdk-java</artifactId><exclusions><exclusion><groupId>org.slf4j</groupId><artifactId…

跑批系统设计

需求分析 将大批量的数据&#xff0c;从一个地方&#xff0c;迁移到另外一个地方&#xff0c;如何处理 主要的涉及到的问题 亿级数据怎么存怎么防止重复调度怎么做到负载均衡同一个节点&#xff0c;任务怎么并行如何动态调整并发度机器节点挂了怎么办 概要设计 数据存储 …

springboot整合MybatisPlus+MySQL

上一篇&#xff1a;springboot整合sentinel和对feign熔断降级 文章目录 一、准备二、主要工作三、具体步骤3.1 准备数据库环境3.20 pre引入依赖3.2 引入依赖3.3 bootstrap.yml配置mybatisplus3.40 pre引入service、mapper3.4 引入实体类、service、mapper 四、测试目录结构 五…

数据结构 ——— 单链表oj题:移除链表中所有 val 的元素

目录 题目要求 手搓简易单链表 代码实现 题目要求 给你一个链表的头节点 head 和一个整数 val &#xff0c;请你删除链表中所有满足 Node.val val 的节点&#xff0c;并返回新的头节点 手搓简易单链表 在实现以上逻辑函数前&#xff0c;要先手搓一个单链表出来&#xff…